├── .gitignore
├── src
    ├── styles
    │   ├── components
    │   │   ├── _all.scss
    │   │   └── _Hello.scss
    │   ├── base
    │   │   ├── _all.scss
    │   │   ├── _typography.scss
    │   │   └── _reset.scss
    │   └── main.scss
    ├── containers
    │   ├── routes
    │   │   ├── Routes.js
    │   │   ├── Bar.js
    │   │   ├── Foo.js
    │   │   ├── Home.js
    │   │   └── RoutesAsync.js
    │   ├── Root.js
    │   └── App.js
    ├── components
    │   └── Hello.js
    ├── redux
    │   ├── modules
    │   │   ├── promise.js
    │   │   ├── index.js
    │   │   └── sample.js
    │   └── configureStore.js
    ├── helpers
    │   ├── createPromiseAction.js
    │   ├── promiseWaiter.js
    │   └── pender.js
    ├── index.js
    └── serverRenderer.js
├── public
    └── index.html
├── server
    └── index.js
├── config
    ├── paths.js
    ├── webpack.config.server.js
    ├── webpack.config.js
    └── webpack.config.dev.js
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | yarn.lock
2 | node_modules
3 | build
4 | 


--------------------------------------------------------------------------------
/src/styles/components/_all.scss:
--------------------------------------------------------------------------------
1 | @import 'Hello';
2 | 


--------------------------------------------------------------------------------
/src/styles/base/_all.scss:
--------------------------------------------------------------------------------
1 | @import 'reset';
2 | @import 'typography';
3 | 


--------------------------------------------------------------------------------
/src/styles/components/_Hello.scss:
--------------------------------------------------------------------------------
1 | .hello {
2 |     font-weight: 300;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/styles/main.scss:
--------------------------------------------------------------------------------
1 | @import 'base/all';
2 | @import 'components/all';
3 | 


--------------------------------------------------------------------------------
/src/styles/base/_typography.scss:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
2 | 


--------------------------------------------------------------------------------
/src/styles/base/_reset.scss:
--------------------------------------------------------------------------------
1 | body {
2 |     background: #f1f3f5;
3 |     font-family: 'Noto Sans KR', 'NanumGothic', sans-serif;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/containers/routes/Routes.js:
--------------------------------------------------------------------------------
1 | export { default as Home } from './Home';
2 | export { default as Foo } from './Foo';
3 | export { default as Bar } from './Bar';
4 | 


--------------------------------------------------------------------------------
/src/components/Hello.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | const Hello = ({name}) => (
4 |     <h1 className="hello">Hello, {name}</h1>
5 | );
6 | 
7 | export default Hello;
8 | 


--------------------------------------------------------------------------------
/src/redux/modules/promise.js:
--------------------------------------------------------------------------------
1 | export default (state = [], { type, promise }) => {
2 |   return !process.browser && type === 'AWAIT_PROMISE' ? state.concat(promise) : state
3 | }


--------------------------------------------------------------------------------
/src/containers/routes/Bar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Hello from 'components/Hello';
3 | 
4 | const Bar = () => (
5 |     <Hello name="bar"/>
6 | );
7 | 
8 | export default Bar;


--------------------------------------------------------------------------------
/src/containers/routes/Foo.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Hello from 'components/Hello';
3 | 
4 | const Foo = () => (
5 |     <Hello name="foo"/>
6 | );
7 | 
8 | export default Foo;


--------------------------------------------------------------------------------
/src/helpers/createPromiseAction.js:
--------------------------------------------------------------------------------
1 | const createPromiseAction = ({type, promiseCreator}) => (payload) => ({
2 |     type,
3 |     payload: {
4 |         promise: promiseCreator(payload)
5 |     }
6 | })
7 | 
8 | 
9 | export default createPromiseAction;


--------------------------------------------------------------------------------
/src/redux/modules/index.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux';
 2 | import sample from './sample';
 3 | import promise from './promise';
 4 | 
 5 | 
 6 | const modules = combineReducers({
 7 |     sample,
 8 |     promise
 9 | });
10 | 
11 | export default modules;
12 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 |   <head>
 3 |     <meta charset="utf-8">
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |     <title>React App</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="root"></div>
 9 |   </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express');
 2 | const app = express();
 3 | const path = require('path');
 4 | const renderer = require('./renderer');
 5 | 
 6 | 
 7 | app.get('*', renderer);
 8 | app.use(express.static(path.join(__dirname, '../build')));
 9 | 
10 | 
11 | app.listen(8080, ()=>{
12 |     console.log('Listening on port 8080');
13 | })


--------------------------------------------------------------------------------
/src/helpers/promiseWaiter.js:
--------------------------------------------------------------------------------
 1 | const promiseWaiter = store => next => action => {
 2 |     // if it is browser, skip this process
 3 |     if(process.browser) return next(action);
 4 |     
 5 |     const { payload } = action;
 6 | 
 7 |     if(!payload) return next(action);
 8 | 
 9 |     const promise = action.payload.promise;
10 | 
11 |     if(!promise) return next(action);
12 | 
13 |     store.dispatch({ type: 'AWAIT_PROMISE', promise});
14 |     next(action);
15 | }
16 | 
17 | export default promiseWaiter;


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import { AppContainer } from 'react-hot-loader';
 4 | import Root from './containers/Root';
 5 | 
 6 | const rootEl = document.getElementById('root');
 7 | 
 8 | const render = Component =>
 9 |   ReactDOM.render(
10 |     <AppContainer>
11 |       <Component />
12 |     </AppContainer>,
13 |     rootEl
14 |   );
15 | 
16 | 
17 | render(Root);
18 | 
19 | if (module.hot) module.hot.accept('./containers/Root', () => render(Root));


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const fs = require('fs');
 3 | 
 4 | const appDirectory = fs.realpathSync(process.cwd());
 5 | 
 6 | function resolvePath(relativePath) {
 7 |       return path.resolve(appDirectory, relativePath);
 8 | }
 9 | 
10 | module.exports = {
11 |     context: resolvePath('src/'),
12 |     appIndexJs: resolvePath('src/index.js'),
13 |     appStyle: resolvePath('src/styles/main.scss'),
14 |     appHtml: resolvePath('public/index.html'),
15 |     vendor: ['react', 'react-dom'],
16 |     appBuild: resolvePath('build'),
17 |     serverRendererJs: resolvePath('src/serverRenderer.js'),
18 |     server: resolvePath('server')
19 | }


--------------------------------------------------------------------------------
/src/containers/Root.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import App from './App';
 4 | 
 5 | import { Provider } from 'react-redux';
 6 | import BrowserRouter from 'react-router-dom/BrowserRouter'
 7 | import configureStore from 'redux/configureStore';
 8 | 
 9 | import transit from 'transit-immutable-js';
10 | 
11 | // deserialize the JSON to Immutable
12 | const preloadedState = window.__PRELOADED_STATE__ ? transit.fromJSON(window.__PRELOADED_STATE__) : undefined;
13 | 
14 | const store = configureStore(preloadedState);
15 | 
16 | console.log(store);
17 | const Root = () => (
18 |   <Provider store={store}>
19 |     <BrowserRouter>
20 |       <App/>
21 |     </BrowserRouter>
22 |   </Provider>
23 | );
24 | 
25 | export default Root


--------------------------------------------------------------------------------
/src/redux/configureStore.js:
--------------------------------------------------------------------------------
 1 | import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
 2 | import promiseMiddleware from 'redux-promise-middleware';
 3 | import promiseWaiter from 'helpers/promiseWaiter';
 4 | 
 5 | import modules from './modules';
 6 | 
 7 | 
 8 | const composeEnhancers = process.browser ? (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose) : compose;
 9 | 
10 | export default function configureStore(initialState) {
11 |   const store = createStore(modules, initialState, composeEnhancers(applyMiddleware(promiseWaiter, promiseMiddleware())));
12 | 
13 |   if (module.hot) {
14 |     // Enable Webpack hot module replacement for reducers
15 |     module.hot.accept('./modules', () => {
16 |       const nextRootReducer = require('./modules');
17 |       store.replaceReducer(nextRootReducer);
18 |     });
19 |   }
20 | 
21 |   return store;
22 | }


--------------------------------------------------------------------------------
/src/containers/routes/Home.js:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import Hello from 'components/Hello';
 3 | import * as sample from 'redux/modules/sample';
 4 | import { connect } from 'react-redux';
 5 | import { bindActionCreators } from 'redux';
 6 | 
 7 | 
 8 | class Home extends Component {
 9 |     componentWillMount() {
10 |         const { SampleActions } = this.props;
11 |         SampleActions.fetchData({
12 |             text: 'hello'
13 |         });
14 |     }
15 |     
16 |     render() {
17 |         const { status } = this.props;
18 | 
19 |         return (
20 |             <div>
21 |                 <Hello name="home"/>
22 |                 { JSON.stringify(status.sample.get('result')) }
23 |             </div> 
24 |         )
25 |     }
26 | }
27 | 
28 | export default connect(
29 |     state => ({
30 |         status: {
31 |             sample: state.sample
32 |         }
33 |     }),
34 |     dispatch => ({
35 |         SampleActions: bindActionCreators(sample, dispatch)
36 |     })
37 | )(Home);


--------------------------------------------------------------------------------
/config/webpack.config.server.js:
--------------------------------------------------------------------------------
 1 | const paths = require('./paths');
 2 | const webpack = require('webpack');
 3 | 
 4 | process.env.NODE_ENV = 'development';
 5 | 
 6 | module.exports = {
 7 |     context: paths.context,
 8 |     entry: [paths.serverRendererJs],
 9 |     target: 'node',
10 |     output: {
11 |         path: paths.server,
12 |         filename: 'renderer.js',
13 |         libraryTarget: "commonjs2"
14 |     },
15 |     module: {
16 |         rules: [
17 |             {
18 |                 exclude: [
19 |                     /\.(js|jsx)$/,
20 |                     /\.json$/
21 |                 ],
22 |                 loader: 'ignore',
23 |             },
24 |             {
25 |                 test: /\.js$/,
26 |                 exclude: [/node_modules/],
27 |                 use: [{
28 |                     loader: 'babel-loader',
29 |                     options: { presets: ['react-app'] }
30 |                 }],
31 |             },
32 |         ],
33 |     },
34 |     resolve: {
35 |         modules: [
36 |             paths.context,
37 |             'node_modules'
38 |         ]
39 |     }
40 | };
41 | 


--------------------------------------------------------------------------------
/src/containers/routes/RoutesAsync.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function asyncRoute(getComponent) {
 4 |   return class AsyncComponent extends React.Component {
 5 |     static Component = null;
 6 |     mounted = false;
 7 | 
 8 |     state = {
 9 |       Component: AsyncComponent.Component
10 |     };
11 | 
12 |     componentWillMount() {
13 |       if ( this.state.Component === null ) {
14 |         getComponent().then(m => m.default).then(Component => {
15 |          AsyncComponent.Component = Component;
16 |           if ( this.mounted ) {
17 |             this.setState({Component});
18 |           }
19 |         })
20 |       }
21 |     }
22 | 
23 |     componentDidMount() {
24 |       this.mounted = true;
25 |     }
26 | 
27 |     componentWillUnmount() {
28 |       this.mounted = false;
29 |     }
30 | 
31 |     render() {
32 |       const {Component} = this.state;
33 | 
34 |       if ( Component !== null ) {
35 |         return <Component {...this.props} />
36 |       }
37 |       return null; // or <div /> with a loading spinner, etc..
38 |     }
39 |   }
40 | }
41 | 
42 | export const Home = asyncRoute(() => System.import('./Home'));
43 | export const Foo = asyncRoute(() => System.import('./Foo'));
44 | export const Bar = asyncRoute(() => System.import('./Bar'));


--------------------------------------------------------------------------------
/src/redux/modules/sample.js:
--------------------------------------------------------------------------------
 1 | import { createAction, handleActions } from 'redux-actions';
 2 | import createPromiseAction from 'helpers/createPromiseAction';
 3 | import { Map } from 'immutable';
 4 | import pender from 'helpers/pender';
 5 | 
 6 | const SOMETHING_DO = 'sample/SOMETHING_DO';
 7 | const DATA_FETCH = 'sample/DATA_FETCH';
 8 | 
 9 | function fakeFetch(payload) {
10 |     return new Promise(resolve => {
11 |         setTimeout(()=>{
12 |             resolve({ result: payload });
13 |         }, 500);
14 |     });
15 | }
16 | 
17 | export const doSomething = createAction(SOMETHING_DO);
18 | 
19 | export const fetchData = createPromiseAction({
20 |     type: DATA_FETCH,
21 |     promiseCreator: fakeFetch
22 | });
23 | 
24 | const initialState = Map({
25 |     pending: Map({
26 |         fetchData: false
27 |     }),
28 |     something: null,
29 |     result: null
30 | });
31 | 
32 | export default handleActions({
33 |     // sample action handler
34 |     [SOMETHING_DO]: (state, action) => {
35 |         return state.set('something', 'done');
36 |     },
37 | 
38 |     ...pender({
39 |         type: DATA_FETCH,
40 |         name: 'fetchData',
41 |         onFulfill: (state, action) => {
42 |             return state.set('result', action.payload.result);
43 |         }
44 |     })
45 | 
46 | }, initialState);


--------------------------------------------------------------------------------
/src/containers/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | import Router from 'react-router-dom/BrowserRouter'
 4 | import Route from 'react-router-dom/Route'
 5 | import Link from 'react-router-dom/Link';
 6 | import * as Routes from './routes/Routes';
 7 | 
 8 | // import asyncComponent from 'helpers/async-component';
 9 | 
10 | // const Home = asyncComponent(() =>
11 | //   System.import('./routes/Home').then(module => module.default)
12 | // );
13 | // const Foo = asyncComponent(() =>
14 | //   System.import('./routes/Foo').then(module => module.default)
15 | // );
16 | // const Bar = asyncComponent(() =>
17 | //   System.import('./routes/Bar').then(module => module.default)
18 | // );
19 | 
20 | class App extends Component {
21 |     render() {
22 |         return (
23 | 
24 |                 <div>
25 |                     <ul>
26 |                         <li><Link to="/">Home</Link></li>
27 |                         <li><Link to="/foo">Foo</Link></li>
28 |                         <li><Link to="/bar">Bar</Link></li>
29 |                     </ul>
30 |                     <hr />
31 |                     <Route exact path="/" component={Routes.Home} />
32 |                     <Route path="/foo" component={Routes.Foo} />
33 |                     <Route path="/bar" component={Routes.Bar} />
34 |                 </div>
35 | 
36 |         );
37 |     }
38 | }
39 | 
40 | export default App;
41 | 


--------------------------------------------------------------------------------
/src/helpers/pender.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Transforms action type to ACTION\_TYPE\_[PENDING, FULFILLED, REJECTED]
 3 |  * 
 4 |  * @param {string} type 
 5 |  * @returns {object} actions
 6 |  */
 7 | const actionize = (type) => {
 8 |     return {
 9 |         PENDING: `${type}_PENDING`,
10 |         FULFILLED: `${type}_FULFILLED`,
11 |         REJECTED: `${type}_REJECTED`
12 |     }
13 | }
14 | 
15 | /*
16 |     usage:
17 |     handleActions({
18 |         ...pender({
19 |             type: SOMETHING,
20 |             onFulfill: (state, action) => {
21 |                 return state;
22 |             },
23 |             onReject: (state, ction) => {
24 |                 return state;
25 |             }
26 |         })
27 |     })
28 | */
29 | 
30 | 
31 | /**
32 |  * Creates Promise Handlers
33 |  */
34 | const pender = ({
35 |     type,
36 |     name,
37 |     onFulfill = (state) => state, // in case function not given 
38 |     onReject = (state) => state
39 | }) => {
40 |     const actionized = actionize(type);
41 | 
42 |     return {
43 |         [actionized.PENDING]: (state, action) => {
44 |             return state.setIn(['pending', name], true);
45 |         },
46 |         [actionized.FULFILLED]: (state, action) => {
47 |             return onFulfill(state, action).setIn(['pending', name], false);
48 |         },
49 |         [actionized.REJECTED]: (state, action) => {
50 |             return onReject(state,action).setIn(['pending', name], false);
51 |         }
52 |     }
53 | }
54 | 
55 | export default pender;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "react-webpack2-skeleton",
 3 |     "version": "1.0.0",
 4 |     "description": "Get started with React with Webpack2",
 5 |     "main": "index.js",
 6 |     "license": "MIT",
 7 |     "scripts": {
 8 |         "start:dev": "webpack-dev-server --config config/webpack.config.dev.js",
 9 |         "start": "node server",
10 |         "build": "rimraf build && webpack --config config/webpack.config.js",
11 |         "build:server": "webpack --config config/webpack.config.server.js"
12 |     },
13 |     "devDependencies": {
14 |         "babel-core": "^6.23.1",
15 |         "babel-loader": "^6.3.2",
16 |         "babel-plugin-transform-class-properties": "^6.23.0",
17 |         "babel-plugin-transform-object-rest-spread": "^6.23.0",
18 |         "babel-plugin-transform-regenerator": "^6.22.0",
19 |         "babel-plugin-transform-runtime": "^6.23.0",
20 |         "babel-preset-latest": "^6.22.0",
21 |         "babel-preset-react": "^6.23.0",
22 |         "babel-preset-react-app": "^2.1.1",
23 |         "babel-runtime": "^6.23.0",
24 |         "css-loader": "^0.26.2",
25 |         "extract-text-webpack-plugin": "^2.0.0",
26 |         "html-webpack-plugin": "^2.28.0",
27 |         "ignore-loader": "^0.1.2",
28 |         "node-sass": "^4.5.0",
29 |         "postcss-loader": "^1.3.2",
30 |         "react-hot-loader": "next",
31 |         "rimraf": "^2.6.1",
32 |         "sass-loader": "^6.0.2",
33 |         "style-loader": "^0.13.2",
34 |         "url-loader": "^0.5.8",
35 |         "webpack": "^2.2.1",
36 |         "webpack-dev-server": "^2.4.1"
37 |     },
38 |     "dependencies": {
39 |         "express": "^4.15.0",
40 |         "immutable": "^3.8.1",
41 |         "react": "^15.4.2",
42 |         "react-dom": "^15.4.2",
43 |         "react-redux": "^5.0.3",
44 |         "react-router-dom": "next",
45 |         "redux": "^3.6.0",
46 |         "redux-actions": "^1.2.2",
47 |         "redux-promise-middleware": "^4.2.0",
48 |         "transit-immutable-js": "^0.7.0",
49 |         "transit-js": "^0.8.846"
50 |     }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/serverRenderer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOMServer from 'react-dom/server'
 3 | import { StaticRouter } from 'react-router'
 4 | import App from 'containers/App';
 5 | 
 6 | import { Provider } from 'react-redux';
 7 | import configureStore from 'redux/configureStore';
 8 | import transit from 'transit-immutable-js';
 9 | 
10 | const renderApp = (context, store, location) => ReactDOMServer.renderToString(
11 |     <Provider store={store}>
12 |       <StaticRouter location={location} context={context}>
13 |         <App/>
14 |       </StaticRouter>
15 |     </Provider>
16 | );
17 | 
18 | const renderPage = (html, preloadedState) => {
19 |   return `
20 |     <!DOCTYPE html>
21 | 
22 |     <head>
23 |         <meta charset="utf-8">
24 |         <meta name="viewport" content="width=device-width,initial-scale=1">
25 |         <title>React App</title>
26 |         <link href="static/css/main.css" rel="stylesheet">
27 |     </head>
28 | 
29 |     <body>
30 |         <div id="root">
31 |           ${html}
32 |         </div>
33 |           <script>
34 |             // WARNING: See the following for security issues around embedding JSON in HTML:
35 |             // http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations
36 |             window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
37 |         </script>
38 |         <script type="text/javascript" src="static/js/vendor.js"></script>
39 |         <script type="text/javascript" src="static/js/main.bundle.js"></script>
40 |     </body>
41 | 
42 |     </html>
43 |   `
44 | }
45 | 
46 | const renderer = (req, res, next) => {
47 | 
48 |   // skips static directory
49 |   if(req.path === '/favicon.ico' || req.path.split('/')[1] === 'static') return next();
50 | 
51 |   // This context object contains the results of the render
52 |   const context = {}
53 | 
54 |   const store = configureStore();
55 |   const location = req.url;
56 | 
57 |   renderApp(context, store, location);
58 | 
59 |   // context.url will contain the URL to redirect to if a <Redirect> was used
60 |   if (context.url) {
61 |     res.writeHead(302, {
62 |       Location: context.url
63 |     })
64 |     res.end()
65 |   } else {    
66 |     Promise.all(store.getState().promise).then(
67 |       () => {
68 |         // serialize the store, except the promise reducer (transit cannot handle it)
69 |         store.getState().promise = [];
70 |         var serialized = transit.toJSON(store.getState());
71 |         res.write(renderPage(renderApp(context, store, location), serialized));
72 |         res.end();
73 |       }
74 |     ).catch(
75 |       (error) => {
76 |         console.log(error);
77 |         res.status(400);
78 |         res.end();
79 |       }
80 |     )
81 | 
82 |   }
83 | }
84 | 
85 | module.exports = renderer;


--------------------------------------------------------------------------------
/config/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const paths = require('./paths');
  2 | const webpack = require('webpack');
  3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  4 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
  5 | 
  6 | process.env.NODE_ENV = 'production';
  7 | 
  8 | module.exports = {
  9 |     context: paths.context,
 10 |     entry: [paths.appIndexJs,  paths.appStyle],
 11 |     output: {
 12 |         path: paths.appBuild,
 13 |         filename: 'static/js/[name].bundle.js'
 14 |     },
 15 |     module: {
 16 |         rules: [
 17 |             {
 18 |                 exclude: [
 19 |                     /\.html$/,
 20 |                     /\.(js|jsx)$/,
 21 |                     /\.(css|scss)$/,
 22 |                     /\.json$/
 23 |                 ],
 24 |                 loader: 'url',
 25 |                 query: {
 26 |                     limit: 10000,
 27 |                     name: 'static/media/[name].[hash:8].[ext]'
 28 |                 }
 29 |             },
 30 |             {
 31 |                 test: /\.js$/,
 32 |                 exclude: [/node_modules/],
 33 |                 use: [{
 34 |                     loader: 'babel-loader',
 35 |                     options: { presets: ['react-app'] }
 36 |                 }],
 37 |             },
 38 |             {
 39 |                 test: /\.css$/,
 40 |                 loader: ExtractTextPlugin.extract({
 41 |                     fallback: 'style-loader',
 42 |                     use: [
 43 |                         {
 44 |                             loader: 'css-loader',
 45 |                             options: {
 46 |                                 importLoaders: 1
 47 |                             }
 48 |                         },
 49 |                         {
 50 |                             loader: 'postcss-loader',
 51 |                             options: {
 52 |                                 plugins: function () {
 53 |                                     return [
 54 |                                         require('autoprefixer'),
 55 |                                         require('cssnano')
 56 |                                     ];
 57 |                                 }
 58 |                             }
 59 |                         }
 60 |                     ]
 61 |                 })
 62 |             },
 63 |             {
 64 |                 test: /\.scss$/,
 65 |                 loader: ExtractTextPlugin.extract({
 66 |                     fallback: 'style-loader',
 67 |                     use: [
 68 |                         {
 69 |                             loader: 'css-loader',
 70 |                             options: {
 71 |                                 importLoaders: 1
 72 |                             }
 73 |                         },
 74 |                         {
 75 |                             loader: 'postcss-loader',
 76 |                             options: {
 77 |                                 plugins: function () {
 78 |                                     return [
 79 |                                         require('autoprefixer'),
 80 |                                         require('cssnano')
 81 |                                     ];
 82 |                                 }
 83 |                             }
 84 |                         },
 85 |                         'sass-loader'
 86 |                     ]
 87 |                 })
 88 |             }
 89 |         ],
 90 |     },
 91 |     plugins: [
 92 |         // Generates an `index.html` file with the <script> injected.
 93 |         new HtmlWebpackPlugin({
 94 |             inject: true,
 95 |             template: paths.appHtml,
 96 |             minify: {
 97 |                 removeComments: true,
 98 |                 collapseWhitespace: true,
 99 |                 removeRedundantAttributes: true,
100 |                 useShortDoctype: true,
101 |                 removeEmptyAttributes: true,
102 |                 removeStyleLinkTypeAttributes: true,
103 |                 keepClosingSlash: true,
104 |                 minifyJS: true,
105 |                 minifyCSS: true,
106 |                 minifyURLs: true
107 |             }
108 |         }),
109 |         new ExtractTextPlugin('static/css/[name].css'),
110 |         new webpack.optimize.CommonsChunkPlugin({
111 |             name: 'vendor',
112 |             filename: 'static/js/vendor.js',
113 |             minChunks: 2,
114 |         }),
115 |         new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
116 |         new webpack.optimize.OccurrenceOrderPlugin(),
117 |         new webpack.optimize.UglifyJsPlugin({
118 |           compress: {
119 |             screw_ie8: true,
120 |             warnings: false
121 |           },
122 |           mangle: {
123 |             screw_ie8: true
124 |           },
125 |           output: {
126 |             comments: false,
127 |             screw_ie8: true
128 |           }
129 |         }),
130 |         new webpack.NormalModuleReplacementPlugin(
131 |             /^\.\/routes\/Routes$/,
132 |             './routes/RoutesAsync'
133 |         )
134 |     ],
135 |     resolve: {
136 |         modules: [
137 |             paths.context,
138 |             'node_modules'
139 |         ]
140 |     }
141 | };
142 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | const paths = require('./paths');
  3 | const webpack = require('webpack');
  4 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  5 | 
  6 | module.exports = {
  7 |     context: paths.context,
  8 |     entry: [
  9 |             'react-hot-loader/patch', 
 10 |             'webpack-dev-server/client?http://0.0.0.0:3000', 
 11 |             'webpack/hot/only-dev-server', 
 12 |             paths.appIndexJs,
 13 |             paths.appStyle,
 14 |     ],
 15 |     output: {
 16 |         path: paths.appBuild,
 17 |         filename: 'static/js/[name].bundle.js',
 18 |         publicPath: '/'
 19 |     },
 20 |     module: {
 21 |         rules: [
 22 |             {
 23 |                 exclude: [
 24 |                     /\.html$/,
 25 |                     /\.(js|jsx)$/,
 26 |                     /\.(css|scss)$/,
 27 |                     /\.json$/
 28 |                 ],
 29 |                 loader: 'url',
 30 |                 query: {
 31 |                     limit: 10000,
 32 |                     name: 'static/media/[name].[hash:8].[ext]'
 33 |                 }
 34 |             },
 35 |             {
 36 |                 test: /\.js$/,
 37 |                 exclude: [/node_modules/],
 38 |                 use: [
 39 |                     {
 40 |                         loader: 'babel-loader',
 41 |                         options: {
 42 |                             // same configuration with react-app preset,
 43 |                             // except the babel-plugin-syntax-dynamic-import, which collides with react-hot-loader
 44 |                             // (it is not necessary in webpack2)
 45 |                             presets: [
 46 |                                 ["latest", {
 47 |                                     "es2015": {
 48 |                                         "modules": false
 49 |                                     }
 50 |                                 }],
 51 |                                 "react"
 52 |                             ],
 53 |                             plugins: [
 54 |                                 // class { handleClick = () => { } }
 55 |                                 'transform-class-properties',
 56 |                                 // { ...todo, completed: true }
 57 |                                 ['transform-object-rest-spread', { useBuiltIns: true }],
 58 |                                 // Polyfills the runtime needed for async/await and generatorss
 59 |                                 ['transform-runtime', {
 60 |                                     helpers: false,
 61 |                                     polyfill: false,
 62 |                                     regenerator: true,
 63 |                                     moduleName: path.dirname(require.resolve('babel-runtime/package'))
 64 |                                 }],
 65 |                                 ['transform-regenerator', {
 66 |                                     // Async functions are converted to generators by babel-preset-latest
 67 |                                     async: false
 68 |                                 }],
 69 |                                 // react-hot-loader (remember, always put this at the last)
 70 |                                 "react-hot-loader/babel"
 71 |                             ]
 72 |                         }
 73 |                     }
 74 |                 ],
 75 |             },
 76 |             {
 77 |                 test: /\.css$/,
 78 |                 use: [
 79 |                     'style-loader',
 80 |                     {
 81 |                         loader: 'css-loader',
 82 |                         options: {
 83 |                             importLoaders: 1
 84 |                         }
 85 |                     },
 86 |                     {
 87 |                         loader: 'postcss-loader',
 88 |                         options: {
 89 |                             plugins: function () {
 90 |                                 return [
 91 |                                     require('autoprefixer')
 92 |                                 ];
 93 |                             }
 94 |                         }
 95 |                     }
 96 |                 ],
 97 |             },
 98 |             {
 99 |                 test: /\.scss$/,
100 |                 use: [
101 |                     'style-loader',
102 |                     {
103 |                         loader: 'css-loader',
104 |                         options: {
105 |                             importLoaders: 1
106 |                         }
107 |                     },
108 |                     {
109 |                         loader: 'postcss-loader',
110 |                         options: {
111 |                             plugins: function () {
112 |                                 return [
113 |                                     require('autoprefixer')
114 |                                 ];
115 |                             }
116 |                         }
117 |                     },
118 |                     'sass-loader'
119 |                 ]
120 |             }
121 |         ],
122 |     },
123 |     plugins: [
124 |         new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }),
125 |         new webpack.NamedModulesPlugin(),
126 |         new webpack.HotModuleReplacementPlugin(),
127 |         // Generates an `index.html` file with the <script> injected.
128 |         new HtmlWebpackPlugin({
129 |             inject: true,
130 |             template: paths.appHtml
131 |         })
132 |     ],
133 |     resolve: {
134 |         modules: [
135 |             paths.context,
136 |             'node_modules'
137 |         ]
138 |     },
139 |     devServer: {
140 |         contentBase: paths.context,
141 |         port: 3000,
142 |         hot: true,
143 |         inline: false,
144 |         historyApiFallback: true
145 |     },
146 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React-webpack2-skeleton
  2 | 
  3 | React-webpack2-skeleton is a Universal React boilerplate that uses Webpack2. 
  4 | 
  5 | ## Features 
  6 |  - Webpack2 with url-loader, sass-loader, css-loader, babel-loader
  7 |  - react-hot-loader@3.0.0
  8 |  - react-router@4.0.0 
  9 |    - Code splitting
 10 |    - Server rendering with express
 11 |  - redux
 12 |    - [Duck structure](https://github.com/erikras/ducks-modular-redux) is used in this project
 13 |    - Async actions are handled by redux-promise-middleware
 14 |    - ImmutableJS is used in the reducers
 15 |    - `transit-immutable-js` is used to serialize / deserialize the Immutables 
 16 |    - [Redux DevTool](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko) is enabled
 17 | 
 18 | Demo: https://react-skeleton-wkygtzffmg.now.sh/ (There's nothing special with the demo page. It is just to check code splitting & server-side rendering is working, by using developer tool.
 19 | 
 20 | 
 21 | > **NOTE**
 22 | > Babel configuration is same as create-react-app  
 23 | > Code splitting only works in production mode
 24 | > 
 25 | 
 26 | ## Requirement
 27 | 
 28 | - Node `^6.0.0`
 29 | - yarn `^0.20.0` or npm `^3.0.0` 
 30 | 
 31 | ## Getting started
 32 | 
 33 | First, clone the project:
 34 | 
 35 | ```bash
 36 | $ git clone https://github.com/velopert/react-webpack2-skeleton.git <project-name>
 37 | $ cd <project-name>
 38 | ```
 39 | 
 40 | ### Branches
 41 | 
 42 | Just in case you do not need some features, different branches are provided in this project.
 43 | 
 44 | | Branch | Description                                     |
 45 | |--------|-------------------------------------------------|
 46 | | light  | Pure react project environment with SCSS loader |
 47 | | hmr    | React-hot-loader                                |
 48 | | router | React-router, server render, code-splitting     |
 49 | 
 50 | ```bash
 51 | $ git checkout <branch>
 52 | ```
 53 | 
 54 | Then, install the dependencies. It is recommended to use Yarn, (because it is blazing fast). You can still use npm as well.
 55 | 
 56 | ```bash
 57 | $ yarn install # or npm install
 58 | ```
 59 | 
 60 | ## Script usage
 61 | 
 62 | You can execute the scripts below by `yarn run <script>` or `npm run <script>`.
 63 | 
 64 | | Command        | Description                                                   |
 65 | |----------------|---------------------------------------------------------------|
 66 | | start:dev      | Starts webpack development server; served at `localhost:3000` |
 67 | | start          | Starts production server; served at `localhost:8080`          |
 68 | | build          | Bundles the source in `~/build` directory                     |
 69 | | build:server   | Bundles the source to server renderer in `~/server` directory |
 70 | 
 71 | ## Directory structure
 72 | 
 73 | ```
 74 | - config               # webpack configuration files
 75 | - public               # directory for index.html
 76 | - server               # server render
 77 | - src                  # application source code 
 78 | ----- components       # directory for presentational components
 79 | ----- containers       # directory for container components
 80 | ----- helpers          # directory for various needed for async stuff
 81 | ----- styles           # directory for application styles (in scss format)
 82 | --------- base         # global styles
 83 | --------- components   # styles for each components
 84 | ```
 85 | 
 86 | ## How To
 87 | ### Create a Promise Action
 88 | In this boilerplate, async actions are handled by `redux-promise-middleware`. And there are some useful helpers that are provided in `helpers` directory that makes handling async actions much more easier.
 89 | 
 90 | First, if you have never used `redux-promise-middleware`, you might want to check their [documentation](https://github.com/pburtchaell/redux-promise-middleware/blob/master/docs/introduction.md) to see how this middleware works.
 91 | 
 92 | What this basically does is it automatically dispatches actions for `PENDING`, `FULFILLED`, `REJECTED` when a promise is dispatched.
 93 | 
 94 | For example, when following action gets dispatched: 
 95 | ```javascript
 96 | {
 97 |   type: 'FOO',
 98 |   payload: {
 99 |     promise: new Promise()
100 |  }
101 | ```
102 | 
103 | The middleware will process the promise, and it will dispatch a pending action.
104 | ```javascript
105 | {
106 | 	type: 'FOO_PENDING'
107 | }
108 | ```
109 | 
110 | When it is successfully done, it will dispatch a fulfilled action
111 | ```javascript
112 | {
113 | 	type: 'FOO_FULFILLED',
114 | 	payload: { 
115 | 		// ... resolved value
116 | 	}
117 | }
118 | ```
119 | 
120 | Or, if there is an error, it will dispatch a rejected action
121 | ```javascript
122 | {
123 | 	type: 'FOO_REJECTED',
124 | 	error: true
125 | 	payload: { 
126 | 		// ... rejected value
127 | 	}
128 | }
129 | ```
130 | 
131 | Let's suppose you have a `getPage(n)` function that retrieves the **n** th page:
132 | ```
133 | function getPage(n) {
134 | 	return axios.get('/page/' + n);
135 | }
136 | ```
137 | 
138 | Then, the ordinary way to create a async action creator is:
139 | ```javascript
140 | const getPage = (n) => ({
141 |   type: 'PAGE_GET',
142 |   payload: api.getPage(n)
143 | });
144 | ```
145 | I wanted to make the code simpler, so I created a `createPromiseAction` module. The code below is identical with the code above.
146 | ```javascript
147 | export const getPage = createPromiseAction({
148 |     type: 'PAGE_GET',
149 |     promiseCreator: api.getPage
150 | });
151 | ```
152 | If there is more than one parameter, just make it into an object, like:
153 | ```javascript
154 | function getPage({username, n}) {
155 | 	return axios.get(`/page/${username}/${n}`);
156 | }
157 | ```
158 | 
159 | ### Understand the DUCK structure for redux
160 | Rather than separating actionTypes, actionCreators, reducers in separated file, duck structure aims to put them in a single file.  `redux/modules/sample.js` is the sample of redux duck structure.
161 | 
162 | When you create them, just remember 
163 |  - actions are prefixed, as `sample/SOMETHING_DO`, by doing this, you can use a duplicated action names in different reducers.
164 |  - when you name the action, put the nouns at the front and verbs at the back. For example: `MEMO_ADD`, `MEMO_REMOVE`, or `MODAL_OPEN`. It makes you easier to group the actions with same prefixes.
165 |  - when you create the actionCreators, put the verbs at the front and nouns at the back. For example: `addMemo`, `removeMemo`, `openModal`. It just makes more sense. Also, remember to `export` the action creators so that it can be imported from other modules, or components by `import * as sample from './sample';`
166 | 
167 | `handleActions` is used to handle the actions rather than using `switch ... case...` This function is provided from `redux-actions`. I recommend you to read through their [documentation](https://github.com/acdlite/redux-actions) before you use this. It makes your code more readable, and also fixes the scope issue. For example, you can use `const` or `let` for different actions in a same reducer.)
168 | 
169 | > You don't have to follow these  rules above, it is just to make the life easier. If you find this is complicated, you can do it on your own way.
170 | 
171 | ### Using Immutable for reducer
172 | The combination of ImmuableJS and Redux is blazingly awesome. Check how it simple it is when it comes to handling the actions.
173 | ```
174 |     [SOMETHING_DO]: (state, action) => {
175 |         return state.set('something', 'done');
176 |     },
177 | ```
178 | This code above is similar as:
179 | ```
180 | 	[SOMETHING_DO]: (state, action) => {
181 | 		return {
182 | 			...state,
183 | 			something: 'done'
184 | 		};
185 | 	},
186 | ```
187 | When the data inside the store gets more complex, Immutable reveals it's true value. Here's another example
188 | ```
189 | 	[EXAMPLE]: (state, action) => {
190 | 		return state.set(['something', 'inside'], true);
191 | 	}
192 | ```
193 | is similar to:
194 | ```
195 | 	[EXAMPLE]: (state, action) => {
196 | 		return {
197 | 			...state,
198 | 			something: {
199 | 				...something,
200 | 				inside: true
201 | 			}
202 | 		}
203 | 	}
204 | ```
205 | 
206 | ### Handling Async Actions
207 | Here's the fun part, when `redux-promise-middleware` is used, following code is an ordinary way to handle the async actions:
208 | ```
209 | 	[DATA_FETCH + "_PENDING"]: (state, action) => { ... },
210 | 	[DATA_FETCH + "_FULFILLED"]: (state, action) => { ... },
211 | 	[DATA_FETCH + "_REJECTED"]: (state, action) => { ... },
212 | ```
213 | I found the way above is annoying, because you have to create 3 action handlers every time you handle an async action.
214 | So I created a helper module called `pender`, which makes this process much easier.
215 | 
216 | First, you have to create a `pending` Map in the initialState of the reducer, and put a boolean value that has the same name as the action creator.
217 | ```
218 | const initialState = Map({
219 |     pending: Map({
220 |         fetchData: false
221 |     }),
222 |     ...
223 | });
224 | ```
225 | 
226 | Now, we are gonna use the `pender`. What this does is it creates an array of three action handlers automatically when you pass the object. When it is pending, it will set the `pending.fetchData` to `true`, and when it is done, it will set to `false`. It also allows you to do other stuffs after changing the pending value. When action handlers array is created, you can spread the array inside the parameter object for the `handleActions`.  This makes the code more readable.
227 | 
228 | 
229 | ```javascript
230 | export default handleActions({
231 |     ...pender({
232 |         type: DATA_FETCH,
233 |         name: 'fetchData',
234 |         onFulfill: (state, action) => {
235 |             return state.set('result', action.payload.result);
236 |         }
237 |         ,// onReject: (state, action) => { ... }
238 |     })
239 | 
240 | }, initialState);
241 | ```
242 | `onFullfill` and `onReject` can be omitted. In that situation, it will change the pending value only.
243 | 
244 | ### Connecting the component to redux
245 | Check out the `src/containers/routes/Home` Component. To universally fetch the data, you have to dispatch an async action from `componentWillMount` By doing so, the `promiseWaiter` middleware will stack the promise into the `promise` reducer. Then, the server will wait for those promises to finish before it responds to the browser.
246 | 
247 | ### Asynchronously Load the routes
248 | If you asynchronously load the routes, you can do the **code splitting**! Code splitting is only enabled in production mode. Every time you create a new route, you have to edit the `containers/routes/Routes` file first. You just need to re-export the routes. This is used only for the development mode. (I disabled the code splitting in the development mode because not only it is not needed, but also collides with the react-hot-loader.
249 | 
250 | Then, edit the `container/routes/RouteAsync`. This is the magic happens.  You can asynchronously load the routes by following code:
251 | ```javascript
252 | export const Home = asyncRoute(() => System.import('./Home'));
253 | ```
254 | Webpack is configured to use this file only in the production mode. 
255 | (Check out webpack.NormalModuleReplacementPlugin  config of the `config/webpack.config.js` file)
256 | 
257 | ## References
258 | 
259 | - https://medium.com/modus-create-front-end-development/webpack-2-tree-shaking-configuration-9f1de90f3233#.an4fk0m9d
260 | - http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/
261 | - https://www.codementor.io/reactjs/tutorial/redux-server-rendering-react-router-universal-web-app
262 | 
263 | ## Questions?
264 | If you have any issues, feel free to post the issues. Pull Requests are welcomed. 


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