Isomorphic rendering is achieved with the use of the Universal Webpack helper library, which is essentially a Webpack configuration generator that transforms the client-side Webpack configuration to a server-side Webpack configuration by utilizing the Webpack param target: node which makes the output code suitable for Node.js. What this means in practise is that, on the server we can:

• transform React components written jsx to js,
• use ES6 features using the babel-loader,
• import images and other assets using the file-loader

Universal webpack requires some configuration which is explained in detail by the author, but here is the gist of the setup. As aforementioned, universal-webpack transforms the client-side webpack configuration to a server-side compatible configuration. To do that, universal-webpack introduces webpack/webpack.config.client.babel.js and webpack/webpack.config.server.babel.js, both of which are using the main webpack configuration (webpack/webpack.config.js) ¹

It is used for client side builds instead of webpack/webpack.config.js, however internally it's using the latter.

The serverConfiguration() function takes the client-side Webpack configuration and tunes it a bit for server-side usage (target: "node"). It also receives as a parameter the webpack/universal-webpack-settings.js configuration file (read here) in order to produce the server-side build.

It defines the output file that will be generated by webpack (server-side bundle), based on the input file defined in the same file, using the client-side webpack configuration. Notice that the input file defined in webpack/universal-webpack-settings.js must export a function.

In our case the input file is the bin/www.entry.js, which is the default bin/www file generated by the express generator when a new ExpressJs project is created, but slightly modified so that it exports a function, as required by the serverConfiguration() function of universal-webpack.

The output file is the public/build/bin/www.entry.js and is used by the start-server.js sciprt, which is essentially the startup file for the server-side. This is the file that will be used by our Node server, not the bin/www.entry.js file.

This is the startup file for the server-side. It's used by our Node server to launch the website.

This is just a wrapper file around start-server.js, that requires the latter and essentially tells webpack to enable ES6. Calling start-server.js will basically call the function exported from bin/www.entry.js, that is the input file defined in the webpack/universal-webpack-settings.js configuration file (see above).

In our setup, this file is used by the Node server to launch the website, but it could be easily omitted.

But how are all of these files used so that Isomorphic Rendering is achieved? The concept is the same both in the production and development environment but there some are differences that will be explained in the following sections.

There are 3 main processes that participate in the Isomorphic Rendering.

1)ServerWebpackBuilder: A webpack process that uses the webpack/webpacker.config.server.babel.js configuration to compile the server code and output the server-side build that will be used by our Node server.

1)ClientWebpackBuilder: A webpack process that uses the webpack/webpacker.config.client.babel.js configuration file to compile the client code and output the client-side build that will be used by the web browser.

1)NodeServer: The Node server, managed by PM2 that will use the output of the first process to launch the website.

• The 3 above processes run in a serial manner
• The NodeServer is starting when the ServerWebpackBuilder is done compiling the server-side bundle
• The client side code is uglified and minimized
• The Webpack ExtractTextPlugin plugin is used to remove the compiled SASS code from the client-side bundle and create the public/main.css file

@TODO

• The 3 above processes run in a serial manner
• The ServerWebpackBuilder, ClientWebpackBuilder and NodeServer run in parallel. However, the NodeServer is delayed by the sleep.js script to make sure that it will start only when the server-side build is ready.
• The ServerWebpackBuilder is always remaining in watch mode. When a file imported by assets/main.jsx, which is the root client file, changes, webpack recompiles the server-side build
• When the server-side build recompiles, a new version of the public/build/bin/www.entry.js file is created. This file is monitored by the NodeServer via PM2, which causes the NodeServer to restart.
• The ClientWebpackBuilder is actually the WebpackDevServer that always remains in watch mode. When a file imported by assets/main.jsx, which is the root client file, changes, webpack recompiles the client-side build
• When the WebpackDevServer compiles the client-side code, no output file is generated. Instead, all of the compiled code is in-memory. The WebpackDevServer listens at 0.0.0.0:3001 for any requests. When public/build/bin/www.entry.js is requested, or any other file residing under public/build, ExpressJs proxies the request to the WebpackDevServer to serve the requested resource.
• The Webpack ExtractTextPlugin plugin is not used in development mode, instead webpack adds the css inline in the page using a script tag

In orer to prepare the development environment, issue the following command in bash:

docker exec -it inkinisis_app_1 npm run dev

The above command will compile the server build, launch the WebpackDevServer and start the NodeJs server via PM2 by loading the server build.

The following image shows a breakdown of the subcommands issued by the above command.

This project follows the coding style guide defined by the AirBnb Javascript Style Guide.

• The main script can be found at /assets/main.jsx
• The REACT component that defines all REACT routes is the RouterComponent defined at /inkinisis/assets/js/IndexView.jsx
• The REACT component that renders the main page of the app is the IndexPage defined at /inkinisis/assets/js/IndexPage.jsx
• Every component that mounts to a DOM element should be named using the keyword View as suffix, e.g IndexView.jsx
• Every component that represents a page should be named using the keyword Page as suffix, e.g IndexPage.jsx
• In case a file exports a single class/function, it should be named after the structure it exports

The SASS code is structured following the 7-1 architecture pattern. More info can be found in the README file at /assets/sass

• There are two main layout files:
  • /views/layout.hbs The layout file contains the DOM element that serves as the mount point of the main View REACT component, that is the IndexView
  • /views/layout_landing.hbs The layout file is only used in the landing page of the app

¹When babel is used in the filename of the webpack configuration, webpack is notified in order to understand ES6 syntax