OUTDATED PLEASE HAVE A LOOK FOR NEWER OPTIONS
⚡ Isomorphic JS - Server Side Rendering, Code Splitting and Hot Module Reloading ⚡
💭 What is it?
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 that page on the server and sends it back to the client. The code is bundled into chunks on build time which are requested by the client when needed for that route.
When in development mode the express server handles a request and uses the
configuration as middleware to listen for file changes, build then and push them to the client.
v 15.5.0 version is used in this project with PropTypes being inside its own library. The React code is using ES6 and dividing components into presentation components and container components.
React Router 4
The React Router 4 routes are just components, which define the composition of UI.
Used for code splitting.
Hot Module Loader 3
Replace changed modules in the real time. React Hot Loader 3 is in beta, but fixes several issues and is needed in case React Router 4 is used. This projects does HMR of Components, Containers, Styles, Sagas and Reducers
Manages initial render of the content (SSR)
Middleware which can be mounted in an express server to serve the latest compilation of your bundle during development. This uses webpack's Node API in watch mode and instead of outputting to the file system it outputs to memory.
Alternative to webpack-dev-server but instead of starting a server itself it allows you to mount it in an existing / custom express server alongside webpack-dev-middleware.
The implementation of Redux Saga was made with the help of Universal React Saga. The axios library was replaced by fetch and sagas fitting into modules were moved there.
First install the dependencies, in the root directory of this project run.
For Development run
npm run development
This will start a development server on
localhost:8080 that utilizes hot module
reloading for both React components and redux reducers.
For Production run
npm run build && npm run production.
This will build all your assets and write them to a
/build file in the root directory of this project. The script will then start up a express server on
localhost:8080 that will utilize server side rendering and route based code splitting.
Hot Module Reloading does not work with
System.import, as such there are two route sources.
- The first one
src/universal/routes/sync.jsis for static routes (no code splitting) that is for the development environment to work nicely with React Hot Loader 3
- The second route source
src/universal/routes/async.jsxis for asynchronous routes (Code splitting using System.import).