React Redux-Saga universal application

[ GitHub package version ]()

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 _nodemodules are not included into built server.bundle.js. So, that's why we need _nodemodules 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

gzoreslav / react-redux-saga-universal-application

readme