├── .gitattributes ├── config ├── development.json ├── production.json ├── default.json └── production.js ├── gulpfile.js ├── .babelrc ├── .travis.yml ├── client ├── images │ ├── jchip-128.jpg │ └── nature-600-337.jpg ├── styles │ └── base.css ├── routes.jsx ├── components │ ├── home.jsx │ ├── AppBarExampleIconMenu.jsx │ ├── CardExampleWithAvatar.jsx │ └── BottomNavigationExampleSimple.jsx └── app.jsx ├── .editorconfig ├── server ├── views │ └── index-view.jsx ├── plugins │ └── webapp │ │ ├── index.html │ │ └── index.js └── index.js ├── test └── client │ └── components │ └── home.spec.jsx ├── LICENSE ├── package.json ├── .gitignore └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /config/development.json: -------------------------------------------------------------------------------- 1 | { 2 | } 3 | -------------------------------------------------------------------------------- /config/production.json: -------------------------------------------------------------------------------- 1 | { 2 | } 3 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | require("electrode-archetype-react-app")(); 2 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./node_modules/electrode-archetype-react-app/config/babel/.babelrc" 3 | } 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - v6 4 | - v5 5 | - v4 6 | - '0.12' 7 | - '0.10' 8 | -------------------------------------------------------------------------------- /client/images/jchip-128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electrode-samples/electrode-react-sample-material-ui/HEAD/client/images/jchip-128.jpg -------------------------------------------------------------------------------- /client/images/nature-600-337.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electrode-samples/electrode-react-sample-material-ui/HEAD/client/images/nature-600-337.jpg -------------------------------------------------------------------------------- /client/styles/base.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: 'Roboto', sans-serif; 3 | } 4 | 5 | body { 6 | font-size: 13px; 7 | line-height: 20px; 8 | } 9 | -------------------------------------------------------------------------------- /client/routes.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {Route} from "react-router"; 3 | import {Home} from "./components/home"; 4 | 5 | export const routes = ( 6 | 7 | ); 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | 10 | [*.md] 11 | trim_trailing_whitespace = false 12 | -------------------------------------------------------------------------------- /server/views/index-view.jsx: -------------------------------------------------------------------------------- 1 | import RouterResolverEngine from "electrode-router-resolver-engine"; 2 | import { routes } from "../../client/routes"; 3 | 4 | module.exports = (req) => { 5 | if (!req.server.app.routesEngine) { 6 | req.server.app.routesEngine = RouterResolverEngine(routes); 7 | } 8 | 9 | return req.server.app.routesEngine(req); 10 | }; 11 | -------------------------------------------------------------------------------- /config/default.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "inert": { 4 | "enable": true 5 | }, 6 | "electrodeStaticPaths": { 7 | "enable": true, 8 | "options": { 9 | "pathPrefix": "dist" 10 | } 11 | }, 12 | "webapp": { 13 | "module": "./server/plugins/webapp", 14 | "options": { 15 | "pageTitle": "Electrode React Sample App with material-ui", 16 | "paths": { 17 | "/{args*}": { 18 | "content": { 19 | "module": "./server/views/index-view" 20 | } 21 | } 22 | } 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test/client/components/home.spec.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Home } from "client/components/home"; 4 | 5 | describe("Home", () => { 6 | let component; 7 | let container; 8 | 9 | beforeEach(() => { 10 | container = document.createElement("div"); 11 | }); 12 | 13 | afterEach(() => { 14 | ReactDOM.unmountComponentAtNode(container); 15 | }); 16 | 17 | it("has expected content with deep render", () => { 18 | component = ReactDOM.render( 19 | , 20 | container 21 | ); 22 | 23 | expect(component).to.not.be.false; 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2016 Joel Chen (https://github.com/jchip) 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /client/components/home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"; 3 | import AppBarExampleIconMenu from "./AppBarExampleIconMenu"; 4 | import BottomNavigationExampleSimple from "./BottomNavigationExampleSimple"; 5 | import CardExampleWithAvatar from "./CardExampleWithAvatar"; 6 | 7 | export class Home extends React.Component { 8 | render() { 9 | return ( 10 | 11 |

12 | 13 | 14 | 15 |

16 | 17 | ); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /client/app.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import {routes} from "./routes"; 3 | import {Router} from "react-router"; 4 | import {Resolver} from "react-resolver"; 5 | import "./styles/base.css"; 6 | import injectTapEventPlugin from "react-tap-event-plugin"; 7 | 8 | // 9 | // Add the client app start up code to a function as window.webappStart. 10 | // The webapp's full HTML will check and call it once the js-content 11 | // DOM is created. 12 | // 13 | 14 | window.webappStart = () => { 15 | injectTapEventPlugin(); // https://github.com/callemall/material-ui/issues/4670 16 | 17 | Resolver.render( 18 | () => {routes}, 19 | document.querySelector(".js-content") 20 | 21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /config/production.js: -------------------------------------------------------------------------------- 1 | // 2 | // This file is here to allow enabling the plugins inert and electrodeStaticPaths, overriding the 3 | // settings in production.json, in order to serve the static JS and CSS bundle files from 4 | // the dist directory so you can test your app server locally in production mode. 5 | // 6 | // When running in a real production environment where your static files are most likely served 7 | // by a dedicated CDN server, you might want to turn these plugins off. 8 | // 9 | 10 | const serveStaticFiles = () => { 11 | return process.env.STATIC_FILES_OFF !== "true"; 12 | }; 13 | 14 | module.exports = { 15 | "plugins": { 16 | "inert": { 17 | "enable": serveStaticFiles() 18 | }, 19 | "electrodeStaticPaths": { 20 | "enable": serveStaticFiles() 21 | } 22 | } 23 | }; 24 | -------------------------------------------------------------------------------- /server/plugins/webapp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{PAGE_TITLE}} 6 | {{PREFETCH_BUNDLES}} 7 | {{WEBAPP_BUNDLES}} 8 | 9 | 10 |

11 | 12 | 13 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /client/components/AppBarExampleIconMenu.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AppBar from "material-ui/AppBar"; 3 | import IconButton from "material-ui/IconButton"; 4 | import IconMenu from "material-ui/IconMenu"; 5 | import MenuItem from "material-ui/MenuItem"; 6 | import MoreVertIcon from "material-ui/svg-icons/navigation/more-vert"; 7 | import NavigationClose from "material-ui/svg-icons/navigation/close"; 8 | 9 | const AppBarExampleIconMenu = () => ( 10 | } 13 | iconElementRight={ 14 | 17 | } 18 | targetOrigin={{horizontal: "right", vertical: "top"}} 19 | anchorOrigin={{horizontal: "right", vertical: "top"}} 20 | > 21 | 22 | 23 | 24 | 25 | } 26 | /> 27 | ); 28 | 29 | export default AppBarExampleIconMenu; 30 | -------------------------------------------------------------------------------- /client/components/CardExampleWithAvatar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card'; 3 | import FlatButton from 'material-ui/FlatButton'; 4 | import natureJpg from "../images/nature-600-337.jpg"; 5 | import avatarJpg from "../images/jchip-128.jpg"; 6 | 7 | const CardExampleWithAvatar = () => ( 8 | 9 | 14 | } 16 | > 17 |

18 | 19 | 20 | 21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 22 | Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. 23 | Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. 24 | Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. 25 | 26 | 27 | 28 | 29 | 30 | 31 | ); 32 | 33 | export default CardExampleWithAvatar; 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electrode-react-sample-material-ui", 3 | "version": "0.0.0", 4 | "description": "Electrode Universal React Sample App with material-ui components", 5 | "homepage": "http://electrode.io", 6 | "author": { 7 | "name": "Joel Chen", 8 | "email": "xchen@walmartlabs.com", 9 | "url": "https://github.com/jchip" 10 | }, 11 | "contributors": [], 12 | "files": [ 13 | "lib" 14 | ], 15 | "main": "lib/index.js", 16 | "keywords": [ 17 | "Electrode", 18 | "Universal", 19 | "React", 20 | "Sample", 21 | "material-ui" 22 | ], 23 | "repository": { 24 | "type": "git", 25 | "url": "jchip/electrode-react-sample-material-ui" 26 | }, 27 | "license": "Apache-2.0", 28 | "scripts": { 29 | "start": "gulp dev", 30 | "test": "gulp test", 31 | "coverage": "gulp check" 32 | }, 33 | "dependencies": { 34 | "bluebird": "^3.4.6", 35 | "electrode-archetype-react-app": "^1.4.1", 36 | "electrode-confippet": "^1.0.0", 37 | "electrode-router-resolver-engine": "^1.0.0", 38 | "electrode-server": "^1.0.0", 39 | "electrode-static-paths": "^1.0.0", 40 | "lodash": "^4.10.1", 41 | "material-ui": "^0.16.4", 42 | "react-tap-event-plugin": "^2.0.0" 43 | }, 44 | "devDependencies": { 45 | "electrode-archetype-react-app-dev": "^1.4.1", 46 | "gulp": "^3.9.1" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /server/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | global.navigator = {userAgent: "all"}; 4 | 5 | process.on("SIGINT", () => { 6 | process.exit(0); 7 | }); 8 | 9 | const config = require("electrode-confippet").config; 10 | const staticPathsDecor = require("electrode-static-paths"); 11 | const supports = require("electrode-archetype-react-app/supports"); 12 | 13 | /** 14 | * Use babel register to transpile any JSX code on the fly to run 15 | * in server mode, and also transpile react code to apply process.env.NODE_ENV 16 | * removal to improve performance in production mode. 17 | */ 18 | supports.babelRegister({ 19 | ignore: /node_modules\/(?!react\/)/ 20 | }); 21 | 22 | /** 23 | * css-modules-require-hook: handle css-modules on node.js server. 24 | * similar to Babel's babel/register it compiles CSS modules in runtime. 25 | * 26 | * generateScopedName - Short alias for the postcss-modules-scope plugin's option. 27 | * Helps you to specify the custom way to build generic names for the class selectors. 28 | * You may also use a string pattern similar to the webpack's css-loader. 29 | * 30 | * https://github.com/css-modules/css-modules-require-hook#generatescopedname-function 31 | * https://github.com/webpack/css-loader#local-scope 32 | * https://github.com/css-modules/postcss-modules-scope 33 | */ 34 | supports.cssModuleHook({ 35 | generateScopedName: "[name]__[local]___[hash:base64:5]" 36 | }); 37 | 38 | supports.isomorphicExtendRequire().then(() => { 39 | require("electrode-server")(config, [staticPathsDecor()]); 40 | }); 41 | -------------------------------------------------------------------------------- /client/components/BottomNavigationExampleSimple.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import FontIcon from 'material-ui/FontIcon'; 3 | import {BottomNavigation, BottomNavigationItem} from 'material-ui/BottomNavigation'; 4 | import Paper from 'material-ui/Paper'; 5 | import IconLocationOn from 'material-ui/svg-icons/communication/location-on'; 6 | 7 | const recentsIcon = restore; 8 | const favoritesIcon = favorite; 9 | const nearbyIcon = ; 10 | 11 | /** 12 | * A simple example of `BottomNavigation`, with three labels and icons 13 | * provided. The selected `BottomNavigationItem` is determined by application 14 | * state (for instance, by the URL). 15 | */ 16 | class BottomNavigationExampleSimple extends Component { 17 | constructor() { 18 | super(); 19 | this.state = { 20 | selectedIndex: 0 21 | }; 22 | } 23 | 24 | select(index) { 25 | return this.setState({selectedIndex: index}); 26 | } 27 | 28 | render() { 29 | return ( 30 | 31 | 32 | this.select(0)} 36 | /> 37 | this.select(1)} 41 | /> 42 | this.select(2)} 46 | /> 47 | 48 | 49 | ); 50 | } 51 | } 52 | 53 | export default BottomNavigationExampleSimple; 54 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Created by https://www.gitignore.io/api/gitbook,node,webstorm,bower,osx 4 | 5 | ### GitBook ### 6 | # Node rules: 7 | ## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 8 | .grunt 9 | 10 | ## Dependency directory 11 | ## Commenting this out is preferred by some people, see 12 | ## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git 13 | node_modules 14 | 15 | # Book build output 16 | _book 17 | 18 | # eBook build output 19 | *.epub 20 | *.mobi 21 | *.pdf 22 | 23 | 24 | ### Node ### 25 | # Logs 26 | logs 27 | *.log 28 | npm-debug.log* 29 | 30 | # Runtime data 31 | pids 32 | *.pid 33 | *.seed 34 | 35 | # Directory for instrumented libs generated by jscoverage/JSCover 36 | lib-cov 37 | 38 | # Coverage directory used by tools like istanbul 39 | coverage 40 | 41 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 42 | .grunt 43 | 44 | # node-waf configuration 45 | .lock-wscript 46 | 47 | # Compiled binary addons (http://nodejs.org/api/addons.html) 48 | build/Release 49 | 50 | # Dependency directory 51 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 52 | node_modules 53 | 54 | # Optional npm cache directory 55 | .npm 56 | 57 | # Optional REPL history 58 | .node_repl_history 59 | 60 | 61 | ### WebStorm ### 62 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 63 | 64 | *.iml 65 | 66 | ## Directory-based project format: 67 | .idea/ 68 | # if you remove the above rule, at least ignore the following: 69 | 70 | # User-specific stuff: 71 | # .idea/workspace.xml 72 | # .idea/tasks.xml 73 | # .idea/dictionaries 74 | # .idea/shelf 75 | 76 | # Sensitive or high-churn files: 77 | # .idea/dataSources.ids 78 | # .idea/dataSources.xml 79 | # .idea/sqlDataSources.xml 80 | # .idea/dynamic.xml 81 | # .idea/uiDesigner.xml 82 | 83 | # Gradle: 84 | # .idea/gradle.xml 85 | # .idea/libraries 86 | 87 | # Mongo Explorer plugin: 88 | # .idea/mongoSettings.xml 89 | 90 | ## File-based project format: 91 | *.ipr 92 | *.iws 93 | 94 | ## Plugin-specific files: 95 | 96 | # IntelliJ 97 | /out/ 98 | 99 | # mpeltonen/sbt-idea plugin 100 | .idea_modules/ 101 | 102 | # JIRA plugin 103 | atlassian-ide-plugin.xml 104 | 105 | # Crashlytics plugin (for Android Studio and IntelliJ) 106 | com_crashlytics_export_strings.xml 107 | crashlytics.properties 108 | crashlytics-build.properties 109 | fabric.properties 110 | 111 | 112 | ### Bower ### 113 | bower_components 114 | .bower-cache 115 | .bower-registry 116 | .bower-tmp 117 | 118 | 119 | ### OSX ### 120 | .DS_Store 121 | .AppleDouble 122 | .LSOverride 123 | 124 | # Icon must end with two \r 125 | Icon 126 | 127 | 128 | # Thumbnails 129 | ._* 130 | 131 | # Files that might appear in the root of a volume 132 | .DocumentRevisions-V100 133 | .fseventsd 134 | .Spotlight-V100 135 | .TemporaryItems 136 | .Trashes 137 | .VolumeIcon.icns 138 | 139 | # Directories potentially created on remote AFP share 140 | .AppleDB 141 | .AppleDesktop 142 | Network Trash Folder 143 | Temporary Items 144 | .apdisk 145 | 146 | # others 147 | .hg 148 | .project 149 | .tmp 150 | 151 | # Build 152 | dist 153 | Procfile 154 | config/assets.json 155 | npm-shrinkwrap.json 156 | 157 | .isomorphic-loader-config.json 158 | -------------------------------------------------------------------------------- /server/plugins/webapp/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const _ = require("lodash"); 4 | const Promise = require("bluebird"); 5 | const fs = require("fs"); 6 | const Path = require("path"); 7 | const assert = require("assert"); 8 | 9 | const HTTP_ERROR_500 = 500; 10 | const HTTP_REDIRECT = 302; 11 | 12 | /** 13 | * Load stats.json which is created during build. 14 | * The file contains bundle files which are to be loaded on the client side. 15 | * 16 | * @param {string} statsFilePath - path of stats.json 17 | * @returns {Promise.