Repository files navigation

Universal JS: -JavaScript that can run on both the server and client (or any other JS platform for that matter) !

Hot Module Reloading: -Replaces modules that have been changed in real time while preserving the state.

Server Side Rendering: -Renders Pages on the initial for fast page loads and search engine optimization

Code Splitting: -Split code into bundles so that code is asynchronously loaded by the client.

The Basic setup goes like this...

An express server handles a request, renders the page on the server, then sendsit back to the client. The code is bundled into chunks on build time which are requestedby the client when needed for that route.

When in development mode, the express server handles a request and uses thewebpack.config.development.jsconfiguration as middleware to listen for file changes, build, then and push them to the client.

This project is an updated version ofthis project. With the biggest updates being migrations toReact Router 4 andHot Module Reloading 3

The main goal of this project remains the same; A simple and no BS approach to aUniversal JS, Server Side Rendering, Code Splitting and Hot Module Reloading usingthe following technologies:

• React
• Redux
• React Router 4
• Webpack 2
• Hot Module Reloader 3
• Babel
• Express
• webpack-dev-middleware
• webpack-hot-middleware
• immutablejs

First install the dependencies in the root directory of this project run.npm install

ForDevelopment runnpm run development

This will start a development server onlocalhost:8080 that utilizes hot modulereloading for both React components and Redux reducers.

ForProduction runnpm run build && npm run production.

This will build all your assets and write them to a/build folder in the root directory of this project. The script will then start an express server onlocalhost:8080 that will utilize server side rendering and route based code splitting.

Hot Module Reloading does not work withSystem.import, as such there are two route sources.

• The first onesrc/universal/routes/static.js is for static routes (no code splitting) that is for the development environment to work nicely withReact Hot Loader 3
• The second route sourcesrc/universal/routes/async.js is for asynchronous routes (Code splitting using System.import).