Scaffold Material-UI themed React Web Applications with Maka-CLI

www.maka-cli.com

Another project start article — this time let’s add something that we can SEE and interact with. If you missed my introductory essay, stop on over here and get yourself set up. Otherwise, let’s get started scaffolding a NodeJS web application running React and Material-UI.

Material-UI is a group of React components, which implements Google’s Material Design patterns for creating interactive web pages. I’ve rolled their beta release into Maka-CLI because I believe it is superior to its predecessor and has some excellent documentation.

Let’s get started. Scaffold a new project by telling Maka to create an application and pass it the Material theme flag:

$ maka create my-material-app --theme=material

While that’s building your app … a bear walks into a bar and says “Can I get a … *sigh* beer?” The bartender says, “Sure buddy, but why the big pause?” The bear looks down at his paws and says “Oh these? I’m a bear.” Aaaaaaand done! Once the process has finished, you’ll have created a NodeJS web application with a React front end and Material-UI theme ready to go.

One of the reasons Material-UI is so great is your entire application will follow the same style guide defined by a root element wayyyy up at the top of your application structure. Meaning, you can set global style guides such as color and font with the “createMuiTheme” method. What Maka-CLI has done for you is scaffolded the Material-UI setup in “index.jsx” and installed the necessary packages. For more information on Material-UI used in this application, visit Material-UI-Next and check out their documentation.

Located: /app/imports/startup/client/index.jsx

Sure! Let’s set up a simple app bar that will appear at the top of all of our pages. One way to do this, and I usually start this way, is to put a Material-UI at the top of my “master-layout.jsx” file. So open up this file and let’s get coding!

Using Material-UI-Next example of the AppBar component, I’m just going to set up the app bar sans “withStyles.” It’s not that this higher order component isn’t lovely, it’s just not necessary for this example.

First, copy over the AppBar, Toolbar, and Typography imports into the top of your master-layout.jsx file (/imports/ui/layouts/master-layout/master-layout.jsx):

Located: /app/imports/ui/layouts/master-layout/master-layout.jsx

Next, just add the AppBar component right above the “{ this.props.chilren }” statement in “render()” within the existing “div” tags:

Located: /app/imports/ui/layouts/master-layout/master-layout.jsx

This will place the AppBar at the top of EACH web page that uses this master-layout.jsx component. Meaning any new page you create will have this AppBar at the top.

Finally, Let’s take a look! Launch your project by typing:

$ maka

When the app starts up, navigate to the home page (http://localhost:3000), and you’ll see the AppBar component right there at the top. You may also notice that the boilerplate default code for the home page is below it.

Today you’ve created a NodeJS web application with React as your front-end framework using Material-UI theming. Maka-CLI scaffolded your app in under 10 minutes and, with a little work, in few minutes you had a Material-UI AppBar component you could see!

I’ve glossed over (or ignored entirely) specifics of Material-UI in this example. I’ll let you take it upon yourself to visit their site — find out more of each of the React components they have.

I’ll leave you to continue making something awesome. Before I go, here is a parting tidbit. If you followed along on my last article about SSR, you can combine the idea from that article and this one and make an SSR enabled Material-UI web application (mind. blown.):

$ maka create my-ssr-material-app --ssr=true --theme=material

Next, I’ll talk about how to set up a GraphQL application!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store