What about using React-Router Dynamic Routing?

[sunkant]

As we are building large sites, loading all pages in one js file would be unrealistic.

As this project is a comprehensive boilerplate for react-redux-SSR, what about adding the feature of Dynamic Routing (https://github.com/reactjs/react-router/blob/master/docs/guides/DynamicRouting.md) to some pages/routes? It is supposed to support huge apps.

It does not mean changing the routes bottom-up, but only making a part of the routes dynamically load, to show the possibility of lazily loading a part of js file.

It would make this project more comprehensive.

[oyeanuj]

+1 on this.

Seeing how https://github.com/mxstbr/react-boilerplate does it could be a good starting point.

[sunkant]

@oyeanuj Thanks a lot for the recommendation!

[mmahalwy]

See: https://github.com/quran/quran.com-frontend/blob/develop/src/routes.js

[sunkant]

Hi @mmahalwy, thanks for the recommendation! will check it out.

Any one has done dynamic routing in this project?

[mmahalwy]

@skywalkerlucas that repo is based off of this project.

[sunkant]

@mmahalwy thanks

[vhpoet]

@Lucas-Qi here, I've implemented dynamic routing on a project based on this boilerplate. https://github.com/interledgerjs/ilp-kit/blob/master/src/routes.js

[bertho-zero]

We can do a cool thing with webpack 2, allows the dynamic splitting code, and as promise.

[isaachinman]

@vhpoet It's been awhile, but do you remember how you got around require.ensure executing server-side and throwing errors? Very interested if anyone has a dynamic-routes solution working on this boilerplate.

[bertho-zero]

You can use this line for polyfill require.ensure:

if (typeof require.ensure !== 'function') require.ensure = (deps, cb) => cb(require);

[vhpoet]

@isaachinman I think it was this line https://github.com/interledgerjs/ilp-kit/blob/master/webpack/webpack-isomorphic-tools.js#L14.

[isaachinman]

@vhpoet So you weren't implementing any kind of polyfill like @bertho-zero is suggesting?

[vhpoet]

@isaachinman that's exactly what that line does. Check the docs.

[isaachinman]

Hah, whoops. Cheers for such a quick response!

[shubhamarora]

I am trying to do code splitting on the basis of routes. So I have changed my route declaration to following:

<Route name="NAME" path='PATH' component={COMPONENT} >
    <IndexRoute name="NAME " getComponent={(location, callback)=>{
        require.ensure([], function() {
            callback(null, require('./containers/cont/view.js'));
        })
    }}/>
</Route>

I start getting below error after this:

[webpack-isomorphic-tools] [error] asset not found: ./src/styles/core.scss
[1] ----
[1] ==> 💻  Open http://localhost:8084 in a browser to view the app.
[0] ./src/components/__tests__/InfoBar-test.js
[0] Module not found: Error: Cannot resolve module 'components/InfoBar/InfoBar.scss' in /src/components/__tests__
[0] resolve module components/InfoBar/InfoBar.scss in /src/components/__tests__
[0]   looking for modules in /src
[0]     resolve 'file' or 'directory' InfoBar/InfoBar.scss in /src/components
[0]       resolve file
[0]         /src/components/InfoBar/InfoBar.scss doesn't exist
[0]         /src/components/InfoBar/InfoBar.scss.json doesn't exist
[0]         /src/components/InfoBar/InfoBar.scss.js doesn't exist
[0]         /src/components/InfoBar/InfoBar.scss.jsx doesn't exist
[0]       resolve directory
[0]         /src/components/InfoBar/InfoBar.scss doesn't exist (directory default file)
[0]         /src/components/InfoBar/InfoBar.scss/package.json doesn't exist (directory description file)
[0]   looking for modules in /node_modules
[0]     /node_modules/components doesn't exist (module as directory)
[0] [/src/components/InfoBar/InfoBar.scss]
[0] [/src/components/InfoBar/InfoBar.scss.json]
[0] [/src/components/InfoBar/InfoBar.scss.js]
[0] [/src/components/InfoBar/InfoBar.scss.jsx]
[0] [/node_modules/components]
[0]  @ ./src/components/__tests__/InfoBar-test.js 68:17-59
[0] ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader?browsers=last 2 version!./~/sass-loader?outputStyle=expanded&sourceMap!./src/styles/sa_components.scss
[0] Module build failed:
[0]     color: $subtitle-color;
[0]           ^
[0]       Undefined variable: "$subtitle-color".
[0]       in /src/styles/sa_components.scss (line 10, column 12)
[0] Error:
[0]     color: $subtitle-color;
[0]           ^
[0]       Undefined variable: "$subtitle-color".
[0]       in /src/styles/sa_components.scss (line 10, column 12)
[0]     at options.error (/node_modules/node-sass/lib/index.js:292:26)
[0]  @ ./src/styles/sa_components.scss 4:14-305 13:2-17:4 14:20-311
[0] ./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader?browsers=last 2 version!./~/sass-loader?outputStyle=expanded&sourceMap!./src/styles/post_bootstrap_overrides.scss
[0] Module build failed:
[0]       font-size: $paragraph-font;
[0]                 ^
[0]       Undefined variable: "$paragraph-font".
[0]       in /src/styles/post_bootstrap_overrides.scss (line 109, column 18)
[0] Error:
[0]       font-size: $paragraph-font;
[0]                 ^
[0]       Undefined variable: "$paragraph-font".
[0]       in /src/styles/post_bootstrap_overrides.scss (line 109, column 18)
[0]     at options.error (/node_modules/node-sass/lib/index.js:292:26)
[0]  @ ./src/styles/post_bootstrap_overrides.scss 4:14-316 13:2-17:4 14:20-322
[0] [webpack-isomorphic-tools/plugin] [error] Module "./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader?browsers=last 2 version!./~/sass-loader?outputStyle=expanded&sourceMap!./src/styles/post_bootstrap_overrides.scss" has no source. Maybe Webpack compilation of this module failed. Skipping this asset.
[0] [webpack-isomorphic-tools/plugin] [error] Module "./~/css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!./~/postcss-loader?browsers=last 2 version!./~/sass-loader?outputStyle=expanded&sourceMap!./src/styles/sa_components.scss" has no source. Maybe Webpack compilation of this module failed. Skipping this asset.

Anyone having any idea, why it would be happening? @oyeanuj @vhpoet