├── .editorconfig
├── client
├── containers
│ └── App
│ │ ├── style.scss
│ │ └── index.js
├── _variables.scss
├── components
│ ├── Toolbar
│ │ ├── index.js
│ │ └── toolbar.scss
│ ├── Header
│ │ ├── index.js
│ │ └── header.scss
│ └── List
│ │ ├── list.scss
│ │ ├── List.js
│ │ └── ListItem.js
├── index.ejs
├── pages
│ ├── Blog
│ │ └── index.js
│ ├── Home
│ │ └── index.js
│ ├── About
│ │ └── index.js
│ └── routes.js
├── index.js
├── general.scss
└── actions
│ ├── navigation.js
│ └── index.js
├── .gitignore
├── .babelrc
├── .eslintrc
├── README.md
├── package.json
├── webpack.config.js
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.js]
2 | indent_style=space
3 | indent_size=2
--------------------------------------------------------------------------------
/client/containers/App/style.scss:
--------------------------------------------------------------------------------
1 | .viewport {
2 | margin-top:2.4em;
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
2 | node_modules
3 | static
4 | .module-cache
5 | *.log*
6 | coverage
7 | __nogit
8 | .idea
9 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [["es2015", { "modules": false }], "react"],
3 | "plugins": ["transform-runtime"]
4 | }
5 |
--------------------------------------------------------------------------------
/client/_variables.scss:
--------------------------------------------------------------------------------
1 | $light: #e6e6e6;
2 | $dark: #4d4d4d;
3 | $white: #ffffff;
4 | $grey: #7d7d7d;
5 | $red: #ec3d2b;
6 | $blue: #113d92;
7 | $lightBlue: #258ce7;
--------------------------------------------------------------------------------
/client/components/Toolbar/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'react-router/es6';
3 | import './toolbar.scss';
4 |
5 | export default () => (
6 |
11 | );
12 |
--------------------------------------------------------------------------------
/client/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React Router + Webpack 2 + Dynamic Chunk Navigation
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/client/containers/App/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import Toolbar from 'components/Toolbar';
3 | import './style.scss';
4 |
5 | const App = (props) => (
6 |
7 |
8 | {props.children}
9 |
10 | );
11 |
12 | App.propTypes = {
13 | children: PropTypes.node
14 | };
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/client/pages/Blog/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Header from 'components/Header';
3 | import List from 'components/List/List';
4 |
5 | const listItems = [
6 | { title: 'One' },
7 | { title: 'Two' },
8 | { title: 'Three' },
9 | { title: 'Four' }
10 | ];
11 |
12 | export default () => (
13 |
14 |
15 |
16 |
17 | );
18 |
--------------------------------------------------------------------------------
/client/index.js:
--------------------------------------------------------------------------------
1 | import { render } from 'react-dom';
2 | import React from 'react';
3 | import Root from 'pages/routes';
4 | import 'general.scss';
5 |
6 | render(
7 | ,
8 | document.getElementById('root')
9 | );
10 |
11 | if (module.hot) {
12 | module.hot.accept('pages/routes', () => {
13 | const NewRoot = require('pages/routes').default;
14 |
15 | render(
16 | ,
17 | document.getElementById('root')
18 | );
19 | });
20 | }
21 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | extends:
2 | eslint-config-airbnb
3 |
4 | parser:
5 | babel-eslint
6 |
7 | settings:
8 | ecmascript: 6
9 |
10 | ecmaFeatures:
11 | jsx: true
12 | modules: true
13 | destructuring: true
14 | classes: true
15 | forOf: true
16 | blockBindings: true
17 | arrowFunctions: true
18 |
19 | env:
20 | browser: true
21 |
22 | rules:
23 | indent: 2
24 | func-style: 0
25 | func-names: 0
26 | comma-dangle: 0
27 | no-console: 0
28 | no-param-reassign: 0
--------------------------------------------------------------------------------
/client/pages/Home/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Header from 'components/Header';
3 | import List from 'components/List/List';
4 |
5 | const twoColListItems = [
6 | { title: 'One' },
7 | { title: 'Two' },
8 | { title: 'Three' },
9 | { title: 'Four' }
10 | ];
11 |
12 | export default () => (
13 |
14 |
15 |
16 |
17 | );
18 |
--------------------------------------------------------------------------------
/client/general.scss:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./variables";
3 |
4 | html, body {
5 | margin: 0;
6 | padding: 0;
7 | }
8 |
9 | body {
10 | font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
11 | background: $white;
12 | color: $dark;
13 | margin: 0 auto;
14 | -webkit-font-smoothing: antialiased;
15 | -moz-font-smoothing: antialiased;
16 | -ms-font-smoothing: antialiased;
17 | font-smoothing: antialiased;
18 | text-rendering: optimizeLegibility;
19 | }
20 |
--------------------------------------------------------------------------------
/client/components/Header/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import './header.scss';
3 |
4 | const { string } = PropTypes;
5 |
6 | const Header = ({ title, className }) => {
7 | const styles = `header-container ${className}`;
8 |
9 | return (
10 |
13 | );
14 | };
15 |
16 | Header.propTypes = {
17 | className: string,
18 | title: string
19 | };
20 |
21 | export default Header;
22 |
--------------------------------------------------------------------------------
/client/pages/About/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Header from 'components/Header';
3 | import List from 'components/List/List';
4 |
5 | const listItems = [
6 | { title: 'Expand me', content: 'Thank you' },
7 | { title: 'Click me', content: 'Saved me' },
8 | { title: 'Tap me', content: 'Hey, watch it!' },
9 | { title: 'Open me', content: 'I am free' }
10 | ];
11 |
12 | export default () => (
13 |
14 |
15 |
16 |
17 | );
18 |
--------------------------------------------------------------------------------
/client/components/Toolbar/toolbar.scss:
--------------------------------------------------------------------------------
1 | @import "client/variables";
2 |
3 | .navbar {
4 | background-color: $light;
5 | user-select: none;
6 | -webkit-user-select: none;
7 | position: fixed;
8 | position: -webkit-sticky;
9 | position: sticky;
10 | top: 0;
11 | height: 2em;
12 | line-height: 2em;
13 | width: 100%;
14 | z-index: 1000;
15 | padding: 0 1.5em;
16 | font-size: 1.2em;
17 |
18 | a {
19 | text-decoration: none;
20 | color: inherit;
21 | &:after {
22 | content: '\a0\b7\a0';
23 | }
24 | &:last-child:after {
25 | content: '';
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/client/components/Header/header.scss:
--------------------------------------------------------------------------------
1 | @import "client/variables";
2 |
3 | .header-container {
4 | background-color: $grey;
5 | padding: 10px;
6 | user-select: none;
7 | -webkit-user-select: none;
8 |
9 | .header-title {
10 | color: $white;
11 | margin: 0;
12 | font-size: 1.4em;
13 | }
14 |
15 | &.header-white {
16 | background-color: $white;
17 | .header-title {
18 | color: $dark;
19 | }
20 | }
21 | &.header-red {
22 | background-color: $red;
23 | }
24 | &.header-dark {
25 | background-color: $dark;
26 | }
27 | &.header-grey {
28 | background-color: $grey;
29 | }
30 | &.header-blue {
31 | background-color: $blue;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/client/actions/navigation.js:
--------------------------------------------------------------------------------
1 | import { menuSections } from 'data/menu.json';
2 |
3 | export const RECEIVE_MENU_SECTIONS = 'RECEIVE_MENU_SECTIONS';
4 | export const TOGGLE_MENU = 'TOGGLE_MENU';
5 | export const SELECT_MENU_SECTION = 'SELECT_MENU_SECTION';
6 |
7 | export function toggleMenu() {
8 | return (dispatch, getState) => dispatch({
9 | type: TOGGLE_MENU,
10 | menuVisible: !getState().navigation.menu.menuVisible
11 | });
12 | }
13 |
14 | export function loadMenuData() {
15 | return dispatch => dispatch({
16 | type: RECEIVE_MENU_SECTIONS,
17 | menuSections
18 | });
19 | }
20 |
21 | export function selectMenuSection(menuSection) {
22 | return dispatch => dispatch({
23 | type: SELECT_MENU_SECTION,
24 | menuSection
25 | });
26 | }
27 |
--------------------------------------------------------------------------------
/client/actions/index.js:
--------------------------------------------------------------------------------
1 | export const ADD_TRANSACTION = 'ADD_TRANSACTION';
2 | export const DELETE_TRANSACTION = 'DELETE_TRANSACTION';
3 | export const GET_TRANSACTION_GRID_FIELDS = 'GET_TRANSACTION_GRID_FIELDS';
4 | export const REQUEST_SUM = 'REQUEST_SUM';
5 |
6 | function createTransaction(transaction) {
7 | return {
8 | type: ADD_TRANSACTION,
9 | transaction
10 | };
11 | }
12 |
13 | export function deleteTransaction(id) {
14 | return {
15 | type: ADD_TRANSACTION,
16 | id
17 | };
18 | }
19 |
20 | export function requestSum(data) {
21 | return {
22 | type: REQUEST_SUM,
23 | data
24 | };
25 | }
26 |
27 | export function addTransaction(transaction) {
28 | return (dispatch, getState) => {
29 | const addedResult = dispatch(createTransaction(transaction));
30 | dispatch(requestSum(getState().transactions.transactions));
31 | return addedResult;
32 | };
33 | }
34 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Router Dynamic Route Loading w/ Webpack 2 Chunks
2 |
3 | Webpack 2 automatically splits routes in chunks (small bundles) and loads them on demand.
4 |
5 | [See the demo](https://budget.modus.app/)
6 |
7 | ## Contains
8 |
9 | - [x] [Webpack 2.2](https://webpack.github.io)
10 | - [x] [React 0.15](https://facebook.github.io/react/)
11 | - [x] [Babel 6.x](https://babeljs.io/)
12 |
13 | ## Features
14 |
15 | - [x] Tree shaking
16 | - [x] Code Splitting
17 | - [x] Hot Module Replacement
18 | - [x] ES6 Source debugging in Chrome with sourcemaps
19 | - [x] React Router
20 | - [x] Yarn-friendly
21 |
22 | ##System Requirements
23 | Before installing the dependencies, make sure your system has the correct Node and Npm versions, otherwise you will get errors.
24 |
25 | - Node 6.x.x
26 | - Npm 3.x.x
27 |
28 | ## Setup
29 |
30 | ```
31 | $ npm install
32 | ```
33 |
34 | ## Running
35 |
36 | ```
37 | $ npm start
38 | ```
39 |
40 | ## Build
41 |
42 | ```
43 | $ npm run build
44 | ```
45 |
--------------------------------------------------------------------------------
/client/pages/routes.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Router, browserHistory } from 'react-router/es6';
3 | import App from 'containers/App';
4 |
5 | function errorLoading(err) {
6 | console.error('Dynamic page loading failed', err);
7 | }
8 |
9 | function loadRoute(cb) {
10 | return (module) => cb(null, module.default);
11 | }
12 |
13 | const routes = {
14 | component: App,
15 | childRoutes: [
16 | {
17 | path: '/',
18 | getComponent(location, cb) {
19 | System.import('pages/Home')
20 | .then(loadRoute(cb))
21 | .catch(errorLoading);
22 | }
23 | },
24 | {
25 | path: 'blog',
26 | getComponent(location, cb) {
27 | System.import('pages/Blog')
28 | .then(loadRoute(cb))
29 | .catch(errorLoading);
30 | }
31 | },
32 | {
33 | path: 'about',
34 | getComponent(location, cb) {
35 | System.import('pages/About')
36 | .then(loadRoute(cb))
37 | .catch(errorLoading);
38 | }
39 | },
40 | ]
41 | };
42 |
43 | export default () => ;
44 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-router-dynamic-routes-webpack2",
3 | "version": "1.0.0",
4 | "private": true,
5 | "description": "React Router Dynamic Chunk Loading",
6 | "author": "Grgur Grisogono",
7 | "main": "index.js",
8 | "scripts": {
9 | "start": "webpack-dev-server --config webpack.config.js",
10 | "prod": "node build.js production server",
11 | "build": "node build.js production filesystem"
12 | },
13 | "license": "MIT",
14 | "devDependencies": {
15 | "babel-core": "6.16.0",
16 | "babel-loader": "6.2.7",
17 | "babel-plugin-transform-runtime": "6.15.0",
18 | "babel-preset-es2015": "6.18.0",
19 | "babel-preset-react": "6.22.0",
20 | "css-loader": "0.14.5",
21 | "extract-text-webpack-plugin": "2.0.0-beta.5",
22 | "file-loader": "0.8.5",
23 | "html-webpack-plugin": "2.26.0",
24 | "node-sass": "3.12.2",
25 | "sass-loader": "3.2.3",
26 | "style-loader": "0.13.1",
27 | "webpack": "2.2.0",
28 | "webpack-dev-server": "2.2.0"
29 | },
30 | "dependencies": {
31 | "babel-runtime": "6.22.0",
32 | "react": "15.4.2",
33 | "react-dom": "15.4.2",
34 | "react-router": "2.8.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/client/components/List/list.scss:
--------------------------------------------------------------------------------
1 | @import "client/variables";
2 |
3 | .list {
4 | width: 100%;
5 | -webkit-user-select: none;
6 | user-select: none;
7 | cursor: default;
8 |
9 | a {
10 | text-decoration: none;
11 | color: inherit;
12 | }
13 |
14 | .list-item {
15 | .title {
16 | display: -webkit-box;
17 | display: -webkit-flex;
18 | display: flex;
19 | min-height: 4em;
20 | padding: 0.5em 1em;
21 | border-right: 1px solid $light;
22 |
23 | .icon, .label, .arrow {
24 | display: inline-block;
25 | margin: auto 0;
26 | }
27 |
28 | .icon {
29 | float: left;
30 | }
31 |
32 | &:last-child {
33 | border-bottom: none;
34 | }
35 |
36 | .label {
37 | -webkit-box-flex: 1;
38 | -webkit-flex: 1;
39 | flex: 1;
40 | padding: 0 0.5em;
41 | }
42 |
43 | .arrow {
44 | font-family: Helvetica;
45 | float: right;
46 | color: $grey;
47 |
48 | -moz-transition: all 0.3s ease;
49 | -webkit-transition: all 0.3s ease;
50 | -o-transition: all 0.3s ease;
51 | transition: all 0.3s ease;
52 |
53 | &.show-false {
54 | display: none;
55 | }
56 | &.collapsible{
57 | font-size: 0.9rem;
58 | }
59 | &.expanded-true {
60 | -moz-transform: rotate(90deg);
61 | -webkit-transform: rotate(90deg);
62 | -o-transform: rotate(90deg);
63 | transform: rotate(90deg);
64 | }
65 | }
66 | }
67 |
68 | .content {
69 | overflow: hidden;
70 | transition: max-height 0.5s ease;
71 | border-bottom: 1px solid $light;
72 | padding-left: 1.5em;
73 | }
74 | }
75 |
76 | &.columns-2 {
77 | display: -webkit-box;
78 | display: -webkit-flex;
79 | display: flex;
80 | -webkit-flex-wrap: wrap;
81 | flex-wrap: wrap;
82 |
83 | .list-item {
84 | width: 50%;
85 | }
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/client/components/List/List.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import ListItem from './ListItem';
3 | import './list.scss';
4 |
5 | const { number, node, array, bool, string } = PropTypes;
6 |
7 | class List extends Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.state = { expanded: [] };
12 | }
13 |
14 | onSelectItem(index) {
15 | const { collapsible, singleExpand } = this.props;
16 |
17 | if (!collapsible) {
18 | return false;
19 | }
20 |
21 | let { expanded } = this.state;
22 | const expandedIndex = expanded.indexOf(index);
23 |
24 | if (expandedIndex > -1) {
25 | // collapse expanded item
26 | expanded = [
27 | ...expanded.slice(0, expandedIndex),
28 | ...expanded.slice(expandedIndex + 1)
29 | ];
30 | } else if (singleExpand) {
31 | expanded = [index];
32 | } else {
33 | expanded = [...expanded, index];
34 | }
35 |
36 | this.setState({ expanded });
37 | }
38 |
39 | showListItems() {
40 | const me = this;
41 | const { items, collapsible } = me.props;
42 | const { expanded } = me.state;
43 | const onSelectItem = me.onSelectItem.bind(me);
44 |
45 | return items.map((item, idx) => {
46 | const itemExpanded = !!(expanded.indexOf(idx) > -1);
47 | return ();
55 | });
56 | }
57 |
58 | render() {
59 | const { columns, children, className } = this.props;
60 | return (
61 |
62 | { this.showListItems() }
63 | { children }
64 |
65 | );
66 | }
67 | }
68 |
69 | List.propTypes = {
70 | columns: number,
71 | children: node,
72 | items: array,
73 | collapsible: bool,
74 | className: string,
75 | singleExpand: bool
76 | };
77 |
78 | List.defaultProps = {
79 | columns: 1,
80 | className: '',
81 | items: [],
82 | collapsible: false,
83 | singleExpand: true
84 | };
85 |
86 | export default List;
87 |
--------------------------------------------------------------------------------
/client/components/List/ListItem.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | const { string, any, bool, func, number, node } = PropTypes;
3 |
4 | class ListItem extends Component {
5 | constructor(props) {
6 | super(props);
7 |
8 | this.state = { expanded: false };
9 | }
10 |
11 | componentWillReceiveProps(props) {
12 | this.setState({
13 | expanded: props.expanded
14 | });
15 | }
16 |
17 | toggleContent() {
18 | const { expanded } = this.state;
19 | const { onSelectItem, index, onExpanded } = this.props;
20 | this.setState({
21 | expanded: !expanded
22 | });
23 |
24 | if (onSelectItem) {
25 | onSelectItem(index);
26 | }
27 |
28 | if (!expanded && onExpanded) {
29 | onExpanded(index);
30 | }
31 | }
32 |
33 | render() {
34 | const { expanded } = this.state;
35 | const {
36 | iconUrl,
37 | title,
38 | collapsible,
39 | showArrow,
40 | content,
41 | iconClassName,
42 | children
43 | } = this.props;
44 |
45 | const iconStyle = iconUrl ? { backgroundImage: `url('${iconUrl}')` } : {};
46 | const commonClassNames = `arrow show-${showArrow}`;
47 | const collapsibleClassNames = `${commonClassNames} collapsible expanded-${expanded}`;
48 | const contentStyle = { maxHeight: (expanded ? '50px' : '0px') };
49 | const toggleExpand = this.toggleContent.bind(this);
50 | const arrow = collapsible ? >
: undefined;
51 |
52 | return (
53 |
54 |
55 |
56 |
{ title || children }
57 | {arrow}
58 |
59 |
60 | { content }
61 |
62 |