Electrode Universal React Sample App with material-ui components
Make sure you have installed NodeJS >= 4.x and npm >= 3.x, and clap-cli.
$ node -v
v6.6.0
$ npm -v
3.10.3
$ npm install -g clap-cli
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
$ npm install
$ npm run bootstrap
$ clap samples-local
$ cd samples/universal-material-ui
$ npm install
$ clap dev
Now navigate your browser to http://localhost:3000
to see the sample app with material-ui components.
This app was created with the following steps.
First part of the process is to generate an Electrode Universal App using the yeoman generator. Follow the steps below:
- First generate the Electrode Universal App with the following commands:
$ npm install -g yo generator-electrode
$ mkdir electrode-react-sample-material-ui
$ cd electrode-react-sample-material-ui
$ yo electrode
# ... answer questions and wait for app to be generated and npm install completed ...
- Run
clap dev
in the newly generated app - 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:
- Stop the app and install material-ui dependencies
$ npm install material-ui react-tap-event-plugin --save
- Restart
clap dev
and reload browser to make sure things are still working. - Add material-ui's required font Roboto to
src/server/views/index-view.js
- Update
src/client/styles/base.css
with styles for material-ui. - Test material-ui component by adding a RaisedButton to
src/client/components/home.jsx
- Watch webpack-dev-server update your bundle and refresh browser to see changes.
- Add
global.navigator.userAgent
tosrc/server/index.js
as required by material-ui for Server Rendering. - 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.
Note that the examples are written with babel stage-1 which is not supported in Electrode so you might have to rewrite some of them.
First we have to add the resolution for this issue mui/material-ui#4670.
Add the following code to src/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.
- Copy the source from the example into a file
src/client/components/AppBarExampleIconMenu.jsx
- Replace the
Hello Electrode
and the RaisedButton content insrc/client/components/home.jsx
with<AppBarExampleIconMenu />
; - Watch webpack-dev-server update your bundle and refresh browser to see changes.
- If the AppBar shows up, click on the right menu button, you should see a menu pops up.
Next add the BottomNavigation example
- Copy the source from the example into a file
src/client/components/BottomNavigationExampleSimple.jsx
- Import the component in
src/client/components/home.jsx
and add it torender
after theAppBarExampleIconMenu
component. - Watch webpack-dev-server update your bundle and refresh browser to see changes.
- You should see AppBar and BottomNavigation show up. You should be able to interact with the buttons on the BottomNavigation component.
In this section we add the Card example.
- Copy the source from the Card example into a file
src/client/components/CardExampleWithAvatar.jsx
- Import the component in
src/client/components/home.jsx
and add it torender
after theAppBarExampleIconMenu
component. - Watch webpack-dev-server update your bundle and refresh browser to see changes.
- 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.
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.
- Create a directory
src/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.
- Note that in my sample I use
- In
src/client/components/CardExampleWithAvatar.jsx
, import the images:
import natureJpg from "../images/nature-600-337.jpg";
import avatarJpg from "../images/jsa-128.jpg";
- Replace the URLs for
avatar
andCarMedia
imgsrc
, as follows:
...
avatar={avatarJpg}
...
src={natureJpg}
- In
src/server/index.js
, activate isomorphic-loader'sextend-require
by changing the last line to:
const config = require("electrode-confippet").config;
const staticPathsDecor = require("electrode-static-paths");
const support = require("electrode-archetype-react-app/support");
support.load({
isomorphicExtendRequire: true
}).then(() => {
require("electrode-server")(config, [staticPathsDecor()]);
});
- 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.
Apache-2.0 © Joel Chen