Edit on GitHub

Build with material-ui

material-ui is a set of React components that implement Google's material design. It's a great choice to help you quickly develop your web app with a sophisticated look and feel UI that is designed to be responsive. It's very simple to add material-ui components to an Electrode app. We've built a sample with step by step instructions to show you how.

screenshot

Installation #

Prerequisites #

Make sure you have installed NodeJS >= 4.x and npm >= 3.x, and gulp.

  $ node -v
  v6.6.0
  $ npm -v
  3.10.3
  $ npm install -g gulp

Check it out #

To try out this ready made sample app, use git to clone the repo:

$ git clone https://github.com/electrode-io/electrode.git
$ cd electrode/samples/universal-material-ui
$ npm install
$ gulp dev

Now navigate your browser to http://localhost:3000 to see the sample app with material-ui components.

About #

This app was created with the following steps.

Generate Electrode App #

First part of the process is to generate an Electrode Universal App using the yeoman generator. Follow the steps below:

  1. First generate the Electrode Universal App with the following commands:
  $ npm install -g yo generator-electrode
  $ mkdir react-sample-material-ui
  $ cd react-sample-material-ui
  $ yo electrode
  # ... answer questions and wait for app to be generated and npm install completed ...
  1. Run gulp dev in the newly generated app
  2. Navigate to http://localhost:3000 to make sure app is working.

Add material-ui #

Second part of the process is to add material-ui dependencies. Follow the steps below:

  1. Stop the app and install material-ui dependencies
  $ npm install material-ui react-tap-event-plugin --save
  1. Restart gulp dev and reload browser to make sure things are still working.
  2. Add material-ui's required font Roboto to server/plugins/webapp/index.html
  3. Update client/styles/base.css with styles for material-ui.
  4. Test material-ui component by adding a RaisedButton to client/components/home.jsx
  5. Watch webpack-dev-server update your bundle and refresh browser to see changes.
  6. Add global.navigator.userAgent to server/index.js as required by material-ui for Server Rendering.
  7. Watch webpack-dev-server update your bundle and refresh browser to see changes.

Add material-ui Examples #

Now we are ready to add some of the material-ui examples to the app.

Enable tapping #

First we have to add the resolution for this issue https://github.com/callemall/material-ui/issues/4670.

Add the following code to client/app.jsx

import injectTapEventPlugin from "react-tap-event-plugin";

window.webappStart = () => {
  injectTapEventPlugin(); // https://github.com/callemall/material-ui/issues/4670

};

IconMenu AppBar example #

First add the IconMenu AppBar example by following the steps below.

  1. Copy the source from the example into a file client/components/AppBarExampleIconMenu.jsx
  2. Replace the Hello Electrode and the RaisedButton content in client/components/home.jsx with <AppBarExampleIconMenu />;
  3. Watch webpack-dev-server update your bundle and refresh browser to see changes.
  4. If the AppBar shows up, click on the right menu button, you should see a menu pops up.

BottomNavigation example #

Next add the BottomNavigation example

  1. Copy the source from the example into a file client/components/BottomNavigationExampleSimple.jsx
  2. Import the component in client/components/home.jsx and add it to render after the AppBarExampleIconMenu component.
  3. Watch webpack-dev-server update your bundle and refresh browser to see changes.
  4. You should see AppBar and BottomNavigation show up. You should be able to interact with the buttons on the BottomNavigation component.

Card example #

In this section we add the Card example.

  1. Copy the source from the Card example into a file client/components/CardExampleWithAvatar.jsx
  2. Import the component in client/components/home.jsx and add it to render after the AppBarExampleIconMenu component.
  3. Watch webpack-dev-server update your bundle and refresh browser to see changes.
  4. You should see Card show up but with broken images

You can replace the image URLs with the full URLs to the images by adding http://www.material-ui.com/ to them to fix the broken images, but we will explore isomorphic images next.

Isomorphic Images #

Electrode core comes with isomorphic images support built in using isomorphic-loader. In this section we explore using that feature to load the images for the Card example.

  1. Create a directory client/images and copy the following images there
    • http://www.material-ui.com/images/nature-600-337.jpg
    • http://www.material-ui.com/images/jsa-128.jpg (Or your own favorite 128x128 Avatar image)
    • Note that in my sample I use jchip-128.jpg as my avatar.
  2. In client/components/CardExampleWithAvatar.jsx, import the images:
  import natureJpg from "../images/nature-600-337.jpg";
  import avatarJpg from "../images/jsa-128.jpg";
  1. Replace the URLs for avatar and CarMedia img src, as follows:
  ...
    avatar={avatarJpg}
  ...
    src={natureJpg}
  1. In server/index.js, activate isomorphic-loader's extend-require by changing the last line to:
    supports.isomorphicExtendRequire().then(() => {
      require("electrode-server")(config, [staticPathsDecor()]);
    });
  1. Watch webpack-dev-server update your bundle and refresh browser to see changes.

Note that you will see the message Warning: Unknown prop onTouchTap on <button> tag. show up on the server side rendering because of the tapping event plugin, which we don't need on server anyways.