Skip to content

React universal application with server-side rendering with data fetching

License

Notifications You must be signed in to change notification settings

gzoreslav/react-redux-saga-universal-application

Repository files navigation

React Redux-Saga universal application

GitHub package version Dependency Status devDependencies Status

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

v.2.x.x

Credits

Sending Feedback

I am always open to your feedback.

License

This software is distributed under an MIT licence.

Copyright 2017-2018 © Zoreslav Goral