Building the combined file is done with Webpack3. Because itsa-react-server need different build files for the serverside rendered pages and the ajax pages, there are 2 different webpack config files.

webpack.config.views.js
webpack.config.chunks.js

There is also a 3rd webpack configuration file, that can be used to render react components that are not needed for the web app, but for rendering serverside html:

webpack.config.static-component.js

All files lie in the root of your project.

Web app files

webpack.config.views.js

This file is for serverside rendered views. The files generated here are basically src/page-template.jsx whereas each view (src/views) gets injected inside <div id="view-container">.

You should not mess too much with this file or it will break the functionality of itsa-react-server. However, you might want to change this file if you need custom plugins f.e.

webpack.config.chunks.js

This file is for client side rendered components. These are the views, as they get downloaded by the client through Ajax. These files do not contain src/page-template.jsx or any css module.

You should not mess too much with this file or it will break the functionality of itsa-react-server. However, you might want to change this file if you need custom plugins f.e.

webpack.config.static-component.js

Static build files with webpack.config.static-component.js

Building static html files can be handy if you need to rendering serverside html for usage like html-email or html-pdf. You can create React Components and use external css, just like creating React Components for your web app. However, they get build by webpack separately, so you can use the chunks and build css later on yourself.

The folders that should be handled by webpack this way, need to be defined inside manifest.json:

Setting up manifest.json

    "static-components-dir": [
        "email-templates",
        "pdf-templates"
    ]
}