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

Run in development mode

> npm run start-dev-client

It runs dev server with HMR and opens Browser

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

Build server

> npm run build-prod-server

It builds server.bundle.js in production mode

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