React Redux-Saga universal application

This boilerplate example allows you to create React universal application:

• server-side rendering for the first launch with API data fetching (and if JS is disabled), SPA in other cases
• show ajax loaders for request progress
• handle API request errors

JS Off (server-side render)	JS On (client-side render)

Why this boilerplate?

• all new packages used (react v16, react-router v4)
• modern approach used - redux, redux-saga, react-router v4
• created using officiall recomendation for server-side rendering from redux and react-router
• one routing file
• no blink efect once bundle.js is loaded
• minimall eforts for making page server-rendering - just add method for data loading
• SEO-friendly as well

Installation

> git clone https://github.com/gzoreslav/react-redux-saga-universal-application.git
> cd react-redux-saga-universal-application
> npm i

Note: You may have to install nodemon and babel-cli globally

> npm i nodemon -g
> npm i babel-cli -g

How to develop, build and launch?

There are few options for launch:

• Run in development mode and check server rendering - shows all application's opportunities (server-side rendering for the first launch with fetchind data from the server using API), working as the SPA after the firs launch
• Run in development mode - use this options for developing
• Build for production and run - build client and server bundles, start node server

Run in development mode and check server rendering

> npm run start-dev-iso

It builds app.bundle.js in dev mode and runs dev universal server with HMR and opens Browser

Name	Value
Port	3030
Open Browser	no
Build client.bundle.js	yes, in dev mode
Copy resources (fonts, css, images, etc.) to dist	yes
Build server.bundle.js	no
HMR for client.bundle.js	yes
HMR for server.bundle.js	yes
Server Rendering	yes

Run in development mode

> npm run start-dev-client

It runs dev server with HMR and opens Browser

Name	Value
Port	auto
Open Browser	yes
Build client.bundle.js	no
Copy resources (fonts, css, images, etc.) to dist	no
Build server.bundle.js	no
HMR for client.bundle.js	yes
HMR for server.bundle.js	no
Server Rendering	no

Build for production

You have to build client first and build server then.

Build client

> npm run build-prod-client

It builds app.bundle.js in production mode and copies resources to dist folder

Name	Value
Port	-
Open Browser	no
Build client.bundle.js	yes, in prod mode
Copy resources (fonts, css, images, etc.) to dist	yes
Build server.bundle.js	no
HMR for client.bundle.js	no
HMR for server.bundle.js	no
Server Rendering	-

Build server

> npm run build-prod-server

It builds server.bundle.js in production mode

Name	Value
Port	3030
Open Browser	no
Build client.bundle.js	no
Copy resources (fonts, css, images, etc.) to dist	no
Build server.bundle.js	yes, in prod mode
HMR for client.bundle.js	no
HMR for server.bundle.js	no
Server Rendering	yes

Launch server

> npm run start-prod-iso

It launch server.bundle.js built in the previous steps

How to deploy

1. Install dependencies

Copy package.json to the server

> npm install

NOTE: We do steps above, because node_modules are not included into built server.bundle.js. So, that's why we need node_modules folder on the server.

2. Build client and server

> npm run build-prod-client
> npm run build-prod-server

3. Copy built content to the server

Copy dist folder to the server

3. Launch node server

> npm run start-prod-iso

What new?

v5.x.x

• handle API fetch errors
• clean up code, refactoring
• separate reducers

v4.x.x

• added request processing metadata (ajax loading status, e.g. gif spinners)
• fixed webpack stuff for client dev mode

v3.x.x

• added image details route with appropriate redux, routing, actions, etc. stuff
• fixed helper package https://www.npmjs.com/package/react-redux-saga-server-side-render-helper

v.2.x.x

• added styling, supporting bootstrap v3 styling
• added select image action
• client/server rendering methods moved to the separate package https://www.npmjs.com/package/react-redux-saga-server-side-render-helper
• added Not Found main menu link to show 404 route error handle
• clean up package.json - removed unused packages

Credits

• https://redux.js.org/docs/recipes/ServerRendering.html
• https://reacttraining.com/react-router/web/guides/server-rendering
• https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-1
• https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-2

Sending Feedback

I am always open to your feedback.

License

This software is distributed under an MIT licence.

Copyright 2017-2018 © Zoreslav Goral