├── .gitignore
├── src
    ├── universal
    │   ├── styles
    │   │   └── global.less
    │   ├── redux
    │   │   ├── reducers
    │   │   │   └── index.js
    │   │   └── createStore.js
    │   ├── routes
    │   │   ├── static.js
    │   │   ├── async.js
    │   │   └── Routes.js
    │   ├── containers
    │   │   └── App
    │   │   │   └── AppContainer.js
    │   ├── components
    │   │   ├── App
    │   │   │   ├── App.js
    │   │   │   └── App.css
    │   │   └── Home
    │   │   │   ├── Home.css
    │   │   │   └── Home.js
    │   └── modules
    │   │   └── counter
    │   │       ├── ducks
    │   │           └── counter.js
    │   │       ├── containers
    │   │           └── Counter
    │   │           │   └── CounterContainer.js
    │   │       └── components
    │   │           └── Counter
    │   │               ├── Counter.js
    │   │               └── Counter.css
    ├── server
    │   ├── server.babel.js
    │   ├── hmr.js
    │   ├── server.js
    │   ├── ssr.js
    │   └── Html.js
    └── client
    │   ├── containers
    │       └── AppContainer.js
    │   └── client.js
├── postcss.config.js
├── webpack
    ├── client.babel.js
    ├── server.babel.js
    ├── webpack.config.server.js
    ├── webpack.config.development.js
    └── webpack.config.client.js
├── .babelrc
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | build
4 | npm-debug.log
5 | 


--------------------------------------------------------------------------------
/src/universal/styles/global.less:
--------------------------------------------------------------------------------
1 | .background {
2 |   background-color: #DDDDDD;
3 | }
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: [
3 |       require('autoprefixer')
4 |     ]
5 | }
6 | 


--------------------------------------------------------------------------------
/webpack/client.babel.js:
--------------------------------------------------------------------------------
1 | require('babel-register');
2 | module.exports = require('./webpack.config.client.js');
3 | 


--------------------------------------------------------------------------------
/webpack/server.babel.js:
--------------------------------------------------------------------------------
1 | require('babel-register');
2 | module.exports = require('./webpack.config.server.js');
3 | 


--------------------------------------------------------------------------------
/src/universal/redux/reducers/index.js:
--------------------------------------------------------------------------------
1 | export {default as counter} from 'universal/modules/counter/ducks/counter.js';
2 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react", "es2015", "stage-0"],
3 |   "plugins": [
4 |     ["transform-decorators-legacy"],
5 |     ["add-module-exports"],
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/src/universal/routes/static.js:
--------------------------------------------------------------------------------
1 | export { default as Home } from 'universal/components/Home/Home.js';
2 | export { default as Counter } from 'universal/modules/counter/containers/Counter/CounterContainer.js';
3 | 


--------------------------------------------------------------------------------
/src/server/server.babel.js:
--------------------------------------------------------------------------------
1 | // All subsequent files required by node with the extensions .es6, .es, .jsx and .js will be transformed by Babel.
2 | require('babel-register');
3 | 
4 | // Server Driver Code, everything from here on can use all the super future ES6 features!
5 | module.exports = require('./server.js');
6 | 


--------------------------------------------------------------------------------
/src/universal/containers/App/AppContainer.js:
--------------------------------------------------------------------------------
 1 | import React, {Component, PropTypes} from 'react';
 2 | import App from 'universal/components/App/App';
 3 | 
 4 | class AppContainer extends Component {
 5 |   static propTypes = {
 6 |     children: PropTypes.element.isRequired
 7 |   };
 8 | 
 9 |   render () {
10 |     return (
11 |       <App {...this.props}/>
12 |     );
13 |   }
14 | }
15 | 
16 | export default AppContainer;
17 | 


--------------------------------------------------------------------------------
/src/universal/components/App/App.js:
--------------------------------------------------------------------------------
 1 | import React, {Component, PropTypes} from 'react';
 2 | 
 3 | import styles from './App.css';
 4 | 
 5 | class App extends Component {
 6 |   static propTypes = {
 7 |     children: PropTypes.element.isRequired
 8 |   };
 9 | 
10 |   render () {
11 |     return (
12 |       <div className={styles.app}>
13 |         {this.props.children}
14 |       </div>
15 |     );
16 |   }
17 | }
18 | 
19 | export default App;
20 | 


--------------------------------------------------------------------------------
/src/universal/components/Home/Home.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .home {
 3 |   max-width: 750px;
 4 | }
 5 | 
 6 | .center {
 7 |   text-align: center;
 8 | }
 9 | 
10 | .title {
11 |   color: white;
12 |   font-size: 3em;
13 |   display: block;
14 |   text-align: center;
15 |   width: 100%;
16 | }
17 | 
18 | .button {
19 |   display: inline-block;
20 |   margin-top: 50px;
21 |   padding: 15px 40px;
22 |   font-size: 1.5em;
23 |   text-align: center;
24 |   color: #E4E7EB;
25 |   background-color: #F48F94;
26 |   border: solid 7px #F27D83;
27 |   border-radius: 100px;
28 |   text-decoration: none;
29 |   margin-top: 50px;
30 | 
31 | }
32 | 
33 | .button:hover {
34 |   border-color: #F48F94;
35 | }
36 | 


--------------------------------------------------------------------------------
/src/server/hmr.js:
--------------------------------------------------------------------------------
 1 | const HMR = (app) => {
 2 |   const webpack  = require('webpack');
 3 |   const devWebpackConfig = require('../../webpack/webpack.config.development.js');
 4 |   const webpackDevMiddleware = require('webpack-dev-middleware');
 5 |   const webpackHotMiddleware = require('webpack-hot-middleware');
 6 | 
 7 |   const compiler = webpack(devWebpackConfig);
 8 | 
 9 |   app.use(webpackDevMiddleware(compiler, {
10 |     noInfo: true,
11 |     hot: true,
12 |     publicPath: devWebpackConfig.output.publicPath
13 |   }));
14 | 
15 |   app.use(webpackHotMiddleware(compiler, {
16 |     log: console.log,
17 |     reload: true
18 |   }));
19 | 
20 |   return app;
21 | }
22 | 
23 | export default HMR;
24 | 


--------------------------------------------------------------------------------
/src/client/containers/AppContainer.js:
--------------------------------------------------------------------------------
 1 | import React, {Component, PropTypes} from 'react';
 2 | import { ConnectedRouter } from 'react-router-redux';
 3 | import {Route} from 'react-router';
 4 | 
 5 | // Redux
 6 | import { Provider } from 'react-redux';
 7 | 
 8 | // Components
 9 | import Routes from 'universal/routes/Routes.js';
10 | 
11 | class AppContainer extends Component {
12 |   static propTypes = {
13 |     history: PropTypes.object.isRequired
14 |   }
15 | 
16 |   render () {
17 |     const {
18 |       history
19 |     } = this.props;
20 | 
21 |     return (
22 |       <ConnectedRouter history={history} >
23 |         <Route render={({location}) => {
24 |           return (<Routes location={location} />)
25 |         }}/>
26 |       </ConnectedRouter>
27 |     ) ;
28 |   }
29 | }
30 | 
31 | export default AppContainer;
32 | 


--------------------------------------------------------------------------------
/src/universal/modules/counter/ducks/counter.js:
--------------------------------------------------------------------------------
 1 | import {fromJS, Map as iMap} from 'immutable';
 2 | import {push, replace} from 'react-router-redux';
 3 | 
 4 | export const COUNTER_INCREMENT = 'COUNTER_INCREMENT';
 5 | export const COUNTER_DECREMENT  = 'COUNTER_DECREMENT';
 6 | 
 7 | const initialState = iMap({
 8 |   count: 0
 9 | });
10 | 
11 | export default function reducer(state = initialState, action = {}) {
12 |   switch (action.type) {
13 |     case COUNTER_INCREMENT:
14 |       return state.merge({
15 |         count: state.get('count') + 1
16 |       });
17 |     case COUNTER_DECREMENT:
18 |       return state.merge({
19 |         count: state.get('count') - 1
20 |       });
21 |     default:
22 |       return state;
23 |   }
24 | }
25 | 
26 | 
27 | export function incrementCount( ) {
28 |   return {
29 |     type: COUNTER_INCREMENT
30 |   };
31 | }
32 | 
33 | export function decrementCount( ) {
34 |   return {
35 |     type: COUNTER_DECREMENT
36 |   };
37 | }
38 | 


--------------------------------------------------------------------------------
/src/universal/redux/createStore.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   createStore,
 3 |   combineReducers,
 4 |   applyMiddleware
 5 | } from 'redux';
 6 | 
 7 | import {
 8 |   ConnectedRouter,
 9 |   routerReducer,
10 |   routerMiddleware
11 | } from 'react-router-redux';
12 | 
13 | import * as Reducers from './reducers/index.js';
14 | 
15 | export default (history) => {
16 |   const middleware = routerMiddleware(history);
17 | 
18 |   const store = createStore(combineReducers({
19 |     ...Reducers,
20 |     router: routerReducer
21 |   }), applyMiddleware(middleware));
22 | 
23 | 
24 |   if (module.hot) {
25 |     // Enable Webpack hot module replacement for reducers
26 |      module.hot.accept('./reducers', () => {
27 |        const nextReducers = require('./reducers/index.js');
28 |        const rootReducer = combineReducers({
29 |          ...nextReducers,
30 |          router: routerReducer
31 |        });
32 | 
33 |        store.replaceReducer(rootReducer);
34 |      });
35 |    }
36 | 
37 | 
38 |   return store;
39 | }
40 | 


--------------------------------------------------------------------------------
/src/universal/components/App/App.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   height: 100%;
 3 |   background: linear-gradient(90deg, #80A2CC, #F99F86);
 4 |   background: -webkit-linear-gradient(90deg, #80A2CC, #F99F86);
 5 | }
 6 | 
 7 | body {
 8 |    min-height: 100%;
 9 |    margin: 0;
10 |    padding: 0;
11 |    display: flex;
12 |    position: relative;
13 |    justify-content: center;
14 |    align-items: center;
15 |    font-family: 'Arvo', Arial, Helvetica, Sans-serif;
16 |    background: linear-gradient(90deg, #80A2CC, #F99F86);
17 |    background: -webkit-linear-gradient(90deg, #80A2CC, #F99F86);
18 | 
19 | }
20 | 
21 | h1,h2,h3,h4,h5,h6 {
22 |   color: white;
23 | }
24 | 
25 | h2 {
26 |   font-size: 2em;
27 |   line-height: 1.5em;
28 | }
29 | 
30 | p, li, ul, ol {
31 |   font-family: 'Raleway';
32 |   color: white;
33 |   font-size: 20px;
34 |   line-height: 1.25em;
35 | }
36 | 
37 | .app {
38 |   /*width: 100%;
39 |   height: 100%;*/
40 |   margin-bottom: 150px;
41 |   margin-top: 150px;
42 | 
43 |   /*padding-top: 100px;*/
44 | }
45 | 


--------------------------------------------------------------------------------
/src/universal/routes/async.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function asyncRoute(getComponent) {
 4 |   return class AsyncComponent extends React.Component {
 5 |     state = {
 6 |       Component: null
 7 |     };
 8 | 
 9 |     componentDidMount() {
10 |       if ( this.state.Component === null ) {
11 |         getComponent().then((Component) => {
12 |           this.setState({Component: Component});
13 |         })
14 |       }
15 |     }
16 | 
17 |     render() {
18 |       const {
19 |         Component
20 |       } = this.state;
21 | 
22 |       if ( Component ) {
23 |         return (<Component {...this.props} />);
24 |       }
25 |       return (<div>loading...</div>); // or <div /> with a loading spinner, etc..
26 |     }
27 |   }
28 | }
29 | 
30 | export const Home = asyncRoute(() => {
31 |   return System.import('../components/Home/Home.js');
32 | });
33 | 
34 | export const Counter = asyncRoute(() => {
35 |   return System.import('../modules/counter/containers/Counter/CounterContainer.js');
36 | });
37 | 


--------------------------------------------------------------------------------
/src/client/client.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {render} from 'react-dom';
 3 | import {AppContainer} from 'react-hot-loader';
 4 | 
 5 | // Components
 6 | import App from './containers/AppContainer.js';
 7 | 
 8 | // Redux
 9 | import { Provider } from 'react-redux';
10 | import createStore from '../universal/redux/createStore.js';
11 | import createHistory from 'history/createBrowserHistory';
12 | 
13 | const history = createHistory();
14 | const store = createStore(history);
15 | 
16 | const rootEl = document.getElementById('root')
17 | const renderApp = (Component) => {
18 |     render(
19 |       <AppContainer>
20 |         <Provider store={store}>
21 |           <Component history={history} />
22 |         </Provider>
23 |       </AppContainer>,
24 |       rootEl
25 |     );
26 | }
27 | 
28 | renderApp(App);
29 | 
30 | if (module.hot) {
31 |   module.hot.accept('./containers/AppContainer.js', () => {
32 |     const nextApp = require('./containers/AppContainer.js');
33 |     renderApp(nextApp);
34 |   });
35 | }
36 | 


--------------------------------------------------------------------------------
/src/universal/routes/Routes.js:
--------------------------------------------------------------------------------
 1 | // Libraries
 2 | import React, {Component, PropTypes} from  'react';
 3 | import {Route, Redirect} from 'react-router';
 4 | 
 5 | // Routes
 6 | // For Development only
 7 | import * as RouteMap from '../routes/static.js';
 8 | 
 9 | // This is used in production for code splitting via `wepback.config.server.js`
10 | // import * as RouteMap from 'universal/routes/async.js';
11 | 
12 | // Containers
13 | import AppContainer from 'universal/containers/App/AppContainer.js';
14 | // import PrivateRouteContainer from 'universal/containers/PrivateRoute/PrivateRouteContainer.js';
15 | 
16 | class Routes extends Component {
17 |   render () {
18 |     const {
19 |       location
20 |     } = this.props;
21 | 
22 |     return (
23 |       <AppContainer>
24 |         <div>
25 |           <Route exact location={location} path='/' component={RouteMap.Home} />
26 |           <Route exact location={location} path='/counter' component={RouteMap.Counter} />
27 |         </div>
28 |       </AppContainer>
29 |     );
30 |   }
31 | }
32 | 
33 | export default Routes;
34 | 


--------------------------------------------------------------------------------
/src/universal/modules/counter/containers/Counter/CounterContainer.js:
--------------------------------------------------------------------------------
 1 | // Libraries
 2 | import React, {Component, PropTypes} from 'react';
 3 | import {connect} from 'react-redux';
 4 | 
 5 | // Components
 6 | import Counter from 'universal/modules/counter/components/Counter/Counter.js';
 7 | 
 8 | // Actions
 9 | import {
10 |   incrementCount,
11 |   decrementCount
12 | } from 'universal/modules/counter/ducks/counter.js';
13 | 
14 | 
15 | @connect(mapStateToProps, mapDispatchToProps)
16 | class CounterContainer extends Component {
17 |   static propTypes = {
18 |     // State
19 |     count: PropTypes.number.isRequired,
20 | 
21 |     // Dispatchers
22 |     incrementCount: PropTypes.func.isRequired,
23 |     decrementCount: PropTypes.func.isRequired
24 |   }
25 | 
26 |   render () {
27 |     return (<Counter {...this.props} />);
28 |   }
29 | }
30 | 
31 | 
32 | function mapStateToProps(state, props) {
33 |   const count = state.counter.get('count');
34 |   return {
35 |     count
36 |   };
37 | }
38 | 
39 | 
40 | function mapDispatchToProps(dispatch, props) {
41 |   return {
42 |     incrementCount: () => {
43 |       dispatch(incrementCount());
44 |     },
45 |     decrementCount: () => {
46 |       dispatch(decrementCount());
47 |     }
48 |   };
49 | }
50 | 
51 | export default CounterContainer;
52 | 


--------------------------------------------------------------------------------
/src/universal/modules/counter/components/Counter/Counter.js:
--------------------------------------------------------------------------------
 1 | import React, {Component, PropTypes} from 'react';
 2 | import styles from './Counter.css';
 3 | import classNames from 'classnames';
 4 | 
 5 | class Counter extends Component {
 6 | 
 7 |   static propTypes = {
 8 |     incrementCount: PropTypes.func.isRequired,
 9 |     decrementCount: PropTypes.func.isRequired,
10 |     count: PropTypes.number.isRequired
11 |   }
12 | 
13 |   handleLinkClick(event) {
14 |     event.stopPropagation();
15 |     event.preventDefault();
16 |   }
17 | 
18 |   handleIncrementClick (incrementCount, event) {
19 |     this.handleLinkClick(event);
20 |     incrementCount();
21 |   }
22 | 
23 |   handleDecrementClick(decrementCount, event) {
24 |     this.handleLinkClick(event);
25 |     decrementCount();
26 |   }
27 | 
28 |   render () {
29 |     const {
30 |       count,
31 |       incrementCount,
32 |       decrementCount
33 |     } = this.props;
34 | 
35 |     return (
36 |       <div className={styles.counterContainer}>
37 |         <div className={styles.counter}>{count}</div>
38 |         <a className={classNames(styles.button, styles.positive)} onClick={this.handleIncrementClick.bind(this, incrementCount)}>+</a>
39 |         <a className={classNames(styles.button, styles.negative)} onClick={this.handleDecrementClick.bind(this, decrementCount)}>-</a>
40 |       </div>
41 |     )
42 |   }
43 | }
44 | 
45 | export default Counter;
46 | 


--------------------------------------------------------------------------------
/src/server/server.js:
--------------------------------------------------------------------------------
 1 | import http    from 'http';
 2 | import express from 'express';
 3 | import colors  from 'colors';
 4 | import path    from 'path';
 5 | 
 6 | // Server Side Rendering
 7 | import {
 8 |   renderPage,
 9 |   renderDevPage
10 | } from './ssr.js';
11 | 
12 | const PROD = process.env.NODE_ENV === 'production';
13 | 
14 | const app = express();
15 | 
16 | if (PROD) {
17 |   app.use('/static', express.static('build'));
18 |   app.get('*', renderPage);
19 | } else {
20 |   const HMR = require('./hmr.js');
21 |   // Hot Module Reloading
22 |   HMR(app);
23 |   app.get('*', renderDevPage);
24 | }
25 | 
26 | // catch 404 and forward to error handler
27 | app.use(function(req, res, next) {
28 |   var err = new Error('Not Found');
29 |   err.status = 404;
30 |   next(err);
31 | });
32 | 
33 | // development error handler
34 | if (!PROD) {
35 |   app.use(function(err, req, res, next) {
36 |     console.error('error : ', err)
37 |     res.status(err.status || 500);
38 |   });
39 | }
40 | 
41 | // production error handler
42 | app.use(function(err, req, res, next) {
43 |   console.error('error : ', err.message)
44 |   res.status(err.status || 500);
45 | });
46 | 
47 | const server = http.createServer(app);
48 | 
49 | server.listen(8080, function() {
50 |    const address = server.address();
51 |    console.log(`${'>>>'.cyan} ${'Listening on:'.rainbow} ${'localhost::'.trap.magenta}${`${address.port}`.green}`);
52 |  });
53 | 


--------------------------------------------------------------------------------
/src/universal/modules/counter/components/Counter/Counter.css:
--------------------------------------------------------------------------------
 1 | .counterContainer {
 2 |   position: relative;
 3 | }
 4 | 
 5 | 
 6 | .counter {
 7 |   width: 200px;
 8 |   height: 200px;
 9 |   display: flex;
10 |   justify-content: center;
11 |   align-items: center;
12 |   font-size: 4em;
13 |   border: solid 10px white;
14 |   border-radius: 200px;
15 |   color: white;
16 | }
17 | 
18 | .button {
19 |   display: inline-block;
20 |   display: flex;
21 |   font-size: 3em;
22 |   line-height: 50px;
23 |   justify-content: center;
24 |   vertical-align: center;
25 |   color: white;
26 |   background-color: #30B661;
27 |   border: solid 1px #0F9D58;
28 |   border-radius: 50px;
29 |   width: 50px;
30 |   height: 50px;
31 |   -webkit-user-select: none;  /* Chrome all / Safari all */
32 | }
33 | 
34 | .button:hover {
35 |   cursor: pointer;
36 | }
37 | 
38 | .positive {
39 |   background-color: #B1DDCC;
40 |   border: solid 7px #7EC6AB;
41 |   position: absolute;
42 |   right: -25px;
43 |   top: 50%;
44 |   margin-top: -25px;
45 |   font-size: 2.5em
46 | }
47 | 
48 | .positive:hover {
49 |   /*background-color: #DEF0EA;*/
50 |   border-color: #B1DDCC;
51 | }
52 | 
53 | .negative {
54 |   background-color: #F48F94;
55 |   border: solid 7px #F27D83;
56 |   position: absolute;
57 |   left: -25px;
58 |   top: 50%;
59 |   margin-top: -25px;
60 |   line-height: 45px;
61 | }
62 | 
63 | .negative:hover {
64 |   border-color: #F48F94;
65 | }
66 | 


--------------------------------------------------------------------------------
/src/server/ssr.js:
--------------------------------------------------------------------------------
 1 | // Node Modules
 2 | import fs from 'fs';
 3 | import {basename, join} from 'path';
 4 | 
 5 | // Libraries
 6 | import React from 'react';
 7 | import {renderToString} from 'react-dom/server';
 8 | 
 9 | // Redux
10 | // import {push} from 'react-router-redux';
11 | import createStore from 'universal/redux/createStore.js';
12 | import createHistory from 'history/createMemoryHistory'
13 | 
14 | // Components
15 | import Html from './Html.js';
16 | 
17 | function renderApp(url, res, store, assets) {
18 |   const context = {};
19 | 
20 |   const html = renderToString(
21 |     <Html
22 |       title='💥'
23 |       store={store}
24 |       url={url}
25 |       context={context}
26 |       assets={assets} />
27 |   );
28 | 
29 |   res.send('<!DOCTYPE html>'+html);
30 | }
31 | 
32 | export const renderPage = function (req, res) {
33 |   const history = createHistory( );
34 |   const store  = createStore(history);
35 | 
36 |   const assets = require('../../build/assets.json');
37 | 
38 |   assets.manifest.text = fs.readFileSync(
39 |     join(__dirname, '..', '..', 'build', basename(assets.manifest.js)),
40 |     'utf-8'
41 |   );
42 | 
43 |   renderApp(req.url, res, store, assets);
44 | };
45 | 
46 | export const renderDevPage = function (req, res) {
47 |   const history =  createHistory( );
48 |   const store   = createStore(history);
49 |   renderApp(req.url, res, store);
50 | };
51 | 
52 | export default renderPage;
53 | 


--------------------------------------------------------------------------------
/src/server/Html.js:
--------------------------------------------------------------------------------
 1 | // Libraries
 2 | import React, {Component, PropTypes} from 'react';
 3 | import {StaticRouter} from 'react-router';
 4 | import {renderToString} from 'react-dom/server';
 5 | 
 6 | // Redux
 7 | import { Provider } from 'react-redux';
 8 | 
 9 | class Html extends Component {
10 |   static propTypes = {
11 |     url: PropTypes.string.isRequired,
12 |     store: PropTypes.object.isRequired,
13 |     title: PropTypes.string.isRequired,
14 |     assets: PropTypes.object
15 |   }
16 | 
17 |   render () {
18 |     const PROD = process.env.NODE_ENV === 'production';
19 | 
20 |     const {
21 |       title,
22 |       store,
23 |       assets,
24 |       url,
25 |       context
26 |     } = this.props;
27 | 
28 |     const {
29 |       manifest,
30 |       app,
31 |       vendor
32 |     } = assets || {};
33 | 
34 |     let state = store.getState();
35 | 
36 |     const initialState = `window.__INITIAL_STATE__ = ${JSON.stringify(state)}`;
37 |     const Layout =  PROD ? require( '../../build/prerender.js') : () => {};
38 | 
39 |     const root = PROD && renderToString(
40 |       <Provider store={store}>
41 |         <StaticRouter location={url} context={context}>
42 |           <Layout />
43 |         </StaticRouter>
44 |       </Provider>
45 |     );
46 | 
47 |     return (
48 |      <html>
49 |        <head>
50 |          <meta charSet="utf-8"/>
51 |          <title>{title}</title>
52 | 
53 |          {PROD && <link rel="stylesheet" href="/static/prerender.css" type="text/css" />}
54 |        </head>
55 |        <body>
56 |          <script dangerouslySetInnerHTML={{__html: initialState}} />
57 |          {PROD ? <div id="root" dangerouslySetInnerHTML={{__html: root}}></div> : <div id="root"></div>}
58 |           {PROD && <script dangerouslySetInnerHTML={{__html: manifest.text}}/>}
59 |           {PROD && <script src={vendor.js}/>}
60 |          <script src={PROD ? app.js : '/static/app.js'} />
61 |        </body>
62 |      </html>
63 |     );
64 |   }
65 | 
66 | }
67 | 
68 | export default Html;
69 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "univeral-hmr-ssr-react-redux-dokku",
 3 |   "version": "1.0.0",
 4 |   "description": "Univeral JS application utilizing Hot Module Reloading, Server Side Rendering, Code Splitting with React, Redux, React Router 4 and a heroku like deploy setup with Dokku.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "development": "NODE_PATH=./src NODE_ENV=development node ./src/server/server.babel.js",
 8 |     "production": "NODE_PATH=./src NODE_ENV=production node ./src/server/server.babel.js",
 9 |     "build": "npm run build:client && npm run build:server",
10 |     "build:server": "NODE_ENV=production webpack --config ./webpack/server.babel.js",
11 |     "build:client": "NODE_ENV=production webpack --config ./webpack/client.babel.js"
12 |   },
13 |   "keywords": [
14 |     "react",
15 |     "redux",
16 |     "hot-module-reloading",
17 |     "server-side-rendering",
18 |     "hmr",
19 |     "ssr",
20 |     "code-splitting",
21 |     "webpack"
22 |   ],
23 |   "author": "Alexander J Ray <alexjamesray@gmail.com>",
24 |   "license": "MIT",
25 |   "devDependencies": {
26 |     "assets-webpack-plugin": "^3.5.1",
27 |     "autoprefixer": "^6.7.7",
28 |     "babel-loader": "^6.4.1",
29 |     "babel-plugin-add-module-exports": "^0.2.1",
30 |     "babel-plugin-transform-decorators-legacy": "^1.3.4",
31 |     "babel-polyfill": "^6.23.0",
32 |     "babel-preset-es2015": "^6.24.0",
33 |     "babel-preset-react": "^6.23.0",
34 |     "babel-preset-stage-0": "^6.22.0",
35 |     "babel-register": "^6.24.0",
36 |     "css-loader": "^0.28.0",
37 |     "extract-text-webpack-plugin": "^2.1.0",
38 |     "react-hot-loader": "^3.0.0-beta.6",
39 |     "style-loader": "^0.16.1",
40 |     "webpack": "^2.3.3",
41 |     "webpack-dev-middleware": "^1.10.1",
42 |     "webpack-hot-middleware": "^2.18.0"
43 |   },
44 |   "dependencies": {
45 |     "classnames": "^2.2.5",
46 |     "colors": "^1.1.2",
47 |     "express": "^4.15.2",
48 |     "history": "^4.6.1",
49 |     "immutable": "^3.8.1",
50 |     "react": "^15.4.2",
51 |     "react-dom": "^15.4.2",
52 |     "react-redux": "^5.0.3",
53 |     "react-router": "^4.0.0",
54 |     "react-router-dom": "^4.0.0",
55 |     "react-router-redux": "^5.0.0-alpha.4",
56 |     "redux": "^3.6.0"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/webpack/webpack.config.server.js:
--------------------------------------------------------------------------------
 1 | import path from 'path';
 2 | import webpack from 'webpack';
 3 | import qs from 'querystring';
 4 | import ExtractTextPlugin from 'extract-text-webpack-plugin';
 5 | 
 6 | // Paths
 7 | const root = process.cwd();
 8 | const src  = path.join(root, 'src');
 9 | const build = path.join(root, 'build');
10 | const universal = path.join(src, 'universal');
11 | const server = path.join(src, 'server');
12 | 
13 | const serverInclude = [server, universal];
14 | 
15 | export default {
16 |   context: src,
17 |   entry: {
18 |     prerender: './universal/routes/Routes.js'
19 |   },
20 |   target: 'node',
21 |   output: {
22 |     path: build,
23 |     chunkFilename: '[name]_[chunkhash].js',
24 |     filename: '[name].js',
25 |     libraryTarget: 'commonjs2',
26 |     publicPath: '/static/'
27 |   },
28 |   resolve: {
29 |     extensions: ['.js'],
30 |     modules: [src, 'node_modules']
31 |   },
32 |   plugins: [
33 |     new webpack.NoEmitOnErrorsPlugin(),
34 |     new ExtractTextPlugin('[name].css'),
35 |     new webpack.optimize.UglifyJsPlugin({compressor: {warnings: false}}),
36 |     new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}),
37 |     new webpack.DefinePlugin({
38 |       '__CLIENT__': false,
39 |       '__PRODUCTION__': true,
40 |       'process.env.NODE_ENV': JSON.stringify('production')
41 |     })
42 |   ],
43 |   module: {
44 |     loaders: [
45 |       {test: /\.(png|j|jpeg|gif|svg|woff|woff2)$/,
46 |         use: {
47 |           loader: 'url-loader',
48 |           options: {
49 |             limit: 10000
50 |           }
51 |         }
52 |       },
53 | 
54 |       {
55 |         test: /\.css$/,
56 |         include: serverInclude,
57 |         loader: ExtractTextPlugin.extract({
58 |           fallback: 'style-loader',
59 |           use: [
60 |             {loader: 'css-loader',
61 |              options: {
62 |                root: src,
63 |                modules: true,
64 |                importLoaders: 1,
65 |                localIdentName: '[name]_[local]_[hash:base64:5]'
66 |              }}
67 |           ]})
68 |       },
69 | 
70 |       {
71 |         test: /\.js$/,
72 |         loader: 'babel-loader',
73 |         include: serverInclude
74 |       }
75 | 
76 |     ]
77 |   }
78 | };
79 | 


--------------------------------------------------------------------------------
/src/universal/components/Home/Home.js:
--------------------------------------------------------------------------------
 1 | import React, {Component, PropTypes} from 'react';
 2 | import {Link} from 'react-router-dom';
 3 | 
 4 | import styles from './Home.css';
 5 | 
 6 | class Home extends Component {
 7 |   render () {
 8 |     return (
 9 |       <div className={styles.home}>
10 |         <h1 className={styles.title}>⚡ Universal JS, HMR and SSR ⚡</h1>
11 | 
12 |         <div>
13 |           <h2>What is it?</h2>
14 |           <ul>
15 |             <li>
16 |               <b>Universal JS: -</b><br />
17 |               <p>JavaScript that can run on both the server and client (or any other JS platform for that matter) !</p>
18 |             </li>
19 | 
20 |             <li>
21 |               <b>Hot Module Reloading: -</b><br />
22 |               <p>Replaces modules that have been changed in real time while preserving the state.</p>
23 |             </li>
24 | 
25 |             <li>
26 |               <b>Server Side Rendering: -</b><br />
27 |               <p>Renders Pages on the initial for fast page loads and search engine optimization</p>
28 |             </li>
29 |           </ul>
30 |         </div>
31 | 
32 | 
33 |         <div>
34 |           <h2>Why?</h2>
35 |           <ul>
36 |             <li>Incredibly Productive</li>
37 |             <li>Extremely Flexible</li>
38 |             <li>Blazing Fast</li>
39 |             <li>... And its just plain cool 😎</li>
40 |           </ul>
41 |         </div>
42 | 
43 |         <div>
44 |           <h2>How?</h2>
45 | 
46 |           <p>The Basic setup goes like this...</p>
47 | 
48 |           <ol>
49 |             <li><p>An express server to handle requests, render the page and handle all our file requests.</p></li>
50 |             <li><p>Webpack to bundle everything up listen for files changes and hot reload them to the client.</p></li>
51 |             <li><p>We will be using React, Redux and React Router to match url requests, and render the state to html that we can then send back to the client.</p></li>
52 |           </ol>
53 | 
54 |           <p>Lets check it out...</p>
55 |         </div>
56 | 
57 | 
58 |         <div className={styles.center}>
59 |           <Link className={styles.button} to='/counter'>Go to App</Link>
60 |         </div>
61 |       </div>
62 |     );
63 |   }
64 | }
65 | 
66 | export default Home;
67 | 


--------------------------------------------------------------------------------
/webpack/webpack.config.development.js:
--------------------------------------------------------------------------------
 1 | import path from 'path';
 2 | import webpack from 'webpack';
 3 | import qs from 'querystring';
 4 | 
 5 | const root = process.cwd();
 6 | const src  = path.join(root, 'src');
 7 | 
 8 | const clientSrc    = path.join(src, 'client');
 9 | const universalSrc = path.join(src, 'universal');
10 | 
11 | const clientInclude = [clientSrc, universalSrc];
12 | 
13 | const babelQuery = {
14 |   "presets": [
15 |     "react",
16 |     ["es2015", { "modules": false }],
17 |     "stage-0"
18 |   ],
19 |   "plugins": [
20 |     "transform-decorators-legacy",
21 |     "react-hot-loader/babel"
22 |   ]
23 | };
24 | 
25 | export default {
26 |   devtool: 'eval',
27 |   context: src,
28 |   entry: {
29 |     app: [
30 |       'babel-polyfill/dist/polyfill.js',
31 |       'react-hot-loader/patch',
32 |       'webpack-hot-middleware/client?noInfo=false',
33 |       './client/client.js'
34 |     ]
35 |   },
36 |   output: {
37 |     filename: 'app.js',
38 |     chunkFilename: '[name]_[chunkhash].js',
39 |     path: path.join(root, 'build'),
40 |     publicPath: '/static/'
41 |   },
42 |   plugins: [
43 |     new webpack.optimize.OccurrenceOrderPlugin(),
44 |     new webpack.HotModuleReplacementPlugin(),
45 |     new webpack.NoEmitOnErrorsPlugin(),
46 |     new webpack.DefinePlugin({
47 |       '__CLIENT__': true,
48 |       '__PRODUCTION__': false,
49 |       'process.env.NODE_ENV': JSON.stringify('development')
50 |     }),
51 |   ],
52 |   resolve: {
53 |     extensions: ['.js'],
54 |     modules: [src, 'node_modules']
55 |   },
56 |   module: {
57 |     loaders: [
58 |       {test: /\.(png|j|jpeg|gif|svg|woff|woff2)$/,
59 |         use: {
60 |           loader: 'url-loader',
61 |           options: {
62 |             limit: 10000
63 |           }
64 |         }
65 |       },
66 | 
67 |       // Javascript
68 |       {test: /\.js$/,
69 |        loader: 'babel-loader',
70 |        query: babelQuery,
71 |        include: clientInclude
72 |       },
73 | 
74 |       // CSS
75 |       {test: /\.css$/,
76 |        include: clientInclude,
77 |        use: [
78 |          {loader: 'style-loader'},
79 |          {loader: 'css-loader',
80 |           options: {
81 |             root: src,
82 |             modules: true,
83 |             importLoaders: 1,
84 |             localIdentName: '[name]_[local]_[hash:base64:5]'
85 |           }}
86 |        ]
87 |       }
88 |     ]
89 |   }
90 | };
91 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ⚡ (V2) Universal JS - Server Side Rendering, Code Splitting and Hot Module Reloading ⚡
 2 | 
 3 | ## 💭 What is it?
 4 | *Universal JS: -*
 5 | JavaScript that can run on both the server and client (or any other JS platform for that matter) !
 6 | 
 7 | *Hot Module Reloading: -*
 8 | Replaces modules that have been changed in real time while preserving the state.
 9 | 
10 | *Server Side Rendering: -*
11 | Renders Pages on the initial for fast page loads and search engine optimization
12 | 
13 | *Code Splitting: -*
14 | Split code into bundles so that code is asynchronously loaded by the client.
15 | 
16 | ## ⚙ How?
17 | 
18 | The Basic setup goes like this...
19 | 
20 | An express server handles a request, renders the page on the server, then sends
21 | it back to the client. The code is bundled into chunks on build time which are requested
22 | by the client when needed for that route.
23 | 
24 | When in development mode, the express server handles a request and uses the `webpack.config.development.js`
25 | configuration as middleware to listen for file changes, build, then and push them to the client.
26 | 
27 | ---
28 | 
29 | This project is an updated version of [this project](https://github.com/Alex-ray/universal-hmr-ssr-react-redux). With the biggest updates being migrations to **React Router 4** and **Hot Module Reloading 3**
30 | 
31 | The main goal of this project remains the same; A simple and no BS approach to a
32 | Universal JS, Server Side Rendering, Code Splitting and Hot Module Reloading using
33 | the following technologies:
34 | 
35 | - React
36 | - Redux
37 | - React Router 4
38 | - Webpack 2
39 | - Hot Module Reloader 3
40 | - Babel
41 | - Express
42 | - webpack-dev-middleware
43 | - webpack-hot-middleware
44 | - immutablejs
45 | 
46 | ## 🛠 Setup
47 | First install the dependencies in the root directory of this project run.
48 | `npm install`
49 | 
50 | ## 🤖 Running
51 | For **Development** run `npm run development`
52 | 
53 | This will start a development server on `localhost:8080` that utilizes hot module
54 | reloading for both React components and Redux reducers.
55 | 
56 | For **Production** run `npm run build && npm run production`.
57 | 
58 | This will build all your assets and write them to a `/build` folder in the root directory of this project. The script will then start an express server on `localhost:8080` that will utilize server side rendering and route based code splitting.
59 | 
60 | ![hmr-ssr](https://cloud.githubusercontent.com/assets/2454928/18360529/39573fe2-75b3-11e6-8a06-75bc2664e98d.gif)
61 | 
62 | ## 🗒 Notes
63 | 
64 | Hot Module Reloading does not work with `System.import`, as such there are two route sources.
65 | - The first one `src/universal/routes/static.js` is for static routes (no code splitting) that is for the development environment to work nicely with [React Hot Loader 3](https://github.com/gaearon/react-hot-loader)
66 | - The second route source `src/universal/routes/async.js` is for asynchronous routes (Code splitting using System.import).
67 | 


--------------------------------------------------------------------------------
/webpack/webpack.config.client.js:
--------------------------------------------------------------------------------
  1 | import path from 'path';
  2 | import webpack from 'webpack';
  3 | import qs from 'querystring';
  4 | 
  5 | import autoprefixer from 'autoprefixer';
  6 | import AssetsPlugin from 'assets-webpack-plugin';
  7 | import ExtractTextPlugin from 'extract-text-webpack-plugin';
  8 | 
  9 | const root = process.cwd();
 10 | const src  = path.join(root, 'src');
 11 | const build = path.join(root, 'build');
 12 | 
 13 | const clientSrc    = path.join(src, 'client');
 14 | const universalSrc = path.join(src, 'universal');
 15 | 
 16 | const clientInclude = [clientSrc, universalSrc];
 17 | 
 18 | // Cache vendor && client javascript on CDN...
 19 | const vendor = [
 20 |   'react',
 21 |   'react-dom',
 22 |   'react-router',
 23 |   'react-redux',
 24 |   'redux'
 25 | ];
 26 | 
 27 | export default {
 28 |   context: src,
 29 |   entry: {
 30 |     app: [
 31 |       'babel-polyfill/dist/polyfill.js',
 32 |       './client/client.js'
 33 |     ],
 34 |     vendor
 35 |   },
 36 |   output: {
 37 |     filename: '[name]_[chunkhash].js',
 38 |     chunkFilename: '[name]_[chunkhash].js',
 39 |     path: build,
 40 |     publicPath: '/static/'
 41 |   },
 42 |   resolve: {
 43 |     extensions: ['.js'],
 44 |     modules: [src, 'node_modules'],
 45 |     unsafeCache: true
 46 |   },
 47 |   node: {
 48 |     dns: 'mock',
 49 |     net: 'mock'
 50 |   },
 51 |   plugins: [
 52 |    new webpack.NamedModulesPlugin(),
 53 |    new ExtractTextPlugin('[name].css'),
 54 |    new webpack.NormalModuleReplacementPlugin(/\.\.\/routes\/static/, '../routes/async'),
 55 |    new webpack.optimize.CommonsChunkPlugin({
 56 |      names: ['vendor', 'manifest'],
 57 |      minChunks: Infinity
 58 |    }),
 59 |    new webpack.optimize.AggressiveMergingPlugin(),
 60 |    /* minChunkSize should be 50000 for production apps
 61 |     * 10 is for this example */
 62 |    new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10}),
 63 |    new webpack.optimize.UglifyJsPlugin({compressor: {warnings: false}, comments: /(?:)/}),
 64 |    new AssetsPlugin({path: build, filename: 'assets.json'}),
 65 |    new webpack.NoEmitOnErrorsPlugin(),
 66 |    new webpack.DefinePlugin({
 67 |      '__CLIENT__': true,
 68 |      '__PRODUCTION__': true,
 69 |      'process.env.NODE_ENV': JSON.stringify('production')
 70 |    })
 71 |  ],
 72 |  module: {
 73 |    loaders: [
 74 |      {test: /\.(png|j|jpeg|gif|svg|woff|woff2)$/,
 75 |        use: {
 76 |          loader: 'url-loader',
 77 |          options: {
 78 |            limit: 10000
 79 |          }
 80 |        }
 81 |      },
 82 | 
 83 |      // JavaScript
 84 |      {test: /\.js$/,
 85 |        loader: 'babel-loader',
 86 |        include: clientInclude
 87 |      },
 88 | 
 89 |      // CSS
 90 |      {test: /\.css|less$/,
 91 |       include: clientInclude,
 92 |       loaders: ExtractTextPlugin.extract({
 93 |         fallback: 'style-loader',
 94 |         use: [
 95 |           {loader: 'css-loader',
 96 |            options: {
 97 |              root: src,
 98 |              modules: true,
 99 |              importLoaders: 1,
100 |              localIdentName: '[name]_[local]_[hash:base64:5]'
101 |            }}
102 |         ]})
103 |      }
104 | 
105 |    ]
106 |  }
107 | };
108 | 


--------------------------------------------------------------------------------