React-CSR-Template

This is a React based client side rendering boilerplate.

In client side rendering (CSR), you are completely running ReactJS on the browser. The initial HTML rendered by the server is a placeholder and the entire UI is rendered in the browser once all your scripts load.

Github page

It's common components are bucketed into groups of Atoms and Molecules, based loosely on Brad Frost’s Atomic Web Design principles.

Atoms are the basic building blocks of our web interfaces, while Molecules are singular pieces of functionality comprised of Atoms, and Organisms are relatively complex, distinct sections of web interfaces make up of groups of Atoms and Molecules.

Advantages of CSR

• No Full Page Reload Required: Client-side rendering avoids making unnecessary requests for a full page when only a portion of the page has changed. This is especially helpful in a world that’s increasingly browsing via mobile networks with high latency. It makes sure fast website rendering after the initial load.

• Lazy Loading: Client-side rendering supports lazy loading sections of your application to save bandwidth & speed initial load. For example, you can load additional records, images, and ads as the user scrolls down, or as the user changes their search parameters, all without performing a full post-back.

• Rich Interactions: Client-side rendering supports rich, animated interactions, transformations, and transitions. Fade a row out on delete, or fade a dialog into view.

• Easy Deployments: Static files are easy to deploy. You don’t necessarily need to perform a monolithic build to generate new binaries when a small change occurs.

When you should not consider CSR

• If high SEO (Search engine optimisation) is essential to increase the visibility of the web application to the users of a search engine.

• If you need faster initial loading. Then CSR is not recommended. Server side rendering could be a wise approach.

Demo

To see the demo of this template, click here

Primary Tech stack

• React: The primary UI library
• Redux: Redux data flow
• React-redux: Integrating React with Redux data flow
• Redux-thunk: Redux middleware to support asynchronous operations
• Redux-persist: Persist and rehydrate a redux store.
• Redux-pack: Redux library to extend various stages (start, success, error, finish, always) of API calling
• React-loadable: Code splitting
• React-router-dom: SPA routing
• SASS: CSS pre-processor
• Axios: Javascript library to make rest API call
• React-helmet: React library to change header metadata and title
• Node-sass: SASS CSS pre-processor
• Jest: Testing framework and test runner for unit test cases
• Enzyme: React component testing utility
• Webpack: Webpack module bundler

Features of this template

• Complete UI architecture
• Centralised HTTP(S) request and response interceptor
• Progressive web app (PWA)
• Webpack based module bundler
• Production and development ready boilerplate code
• Internationalization or localization support with English and German language
• Used React context to implement Internationalization
• Offline support with service worker
• Code splitting with react-loadable
• Redux data flow
• React hooks
• Hot module reloading (HMR) for local development
• React memo to stop redundant rendition
• Error boundary to catch unexpected UI errors
• Modular and functional programming paradigm used
• Common and extensible config
• EsLint for maintaining uniform coding standards
• CSS pre-processor
• Centralised color variables
• Test case setup with Jest
• Redux extension for better local debugging
• Proxy setup to counter CORS issues if any
• Editor config for maintaining the similar coding indentation even if various editors are used across the team

Quick start: How to run this template

First clone project and install dependencies

$ mkdir ProjectName && cd ProjectName
$ git clone https://github.com/amit040386/react-csr-template [YOUR APP NAME]
$ cd [YOUR APP NAME]
$ npm install

Navigate to News API and grab your API key.

Find config/default.js in root folder and update API Key.

{
  API_KEY: 'enter-your-api-key'
}

To run on local

$ npm run start

Default port number is 7009

NOTE: To change the port, create a .env in root folder and add your port number as follows.

PORT=4566

or change the port number in this file: server/util/port.js

NOTE: If any new locale texts are added, please re-execute the npm start command

Unit Testing

Use the following commands to execute the test cases

$ npm run test

Deployment

Deployment build

$ npm run build

You can deploy this project to:

Heroku

Steps to follow:

$ heroku create $APP_NAME --buildpack mars/create-react-app
$ git add .
$ git commit -m "Start deploying create-react-app in heroku"
$ git push heroku master
$ heroku open

You can do all these from Heroku dashboard as well.

Setting up proxy in Heroku deployment, if required

Setting up proxy is required when an API call is made to a different domain. For example, your app is deployed in Heroku domain and you are trying to call the API from https://myexample.abc.com domain. Then the CORS issue would surface to block the response. To counter that CORS issue, proxy setup is required.

These are the steps to be followed while setting up the proxy for the Heroku deployment.

1. Go to Heroku dashboard. Click on settings tab and add this buildpack https://github.com/heroku/heroku-buildpack-static.git

2. There is a file named, static.json file in the root folder. Change the route and origin url as per your requirement.

3. In package.json file, "proxy" property has already been added. This is required for the local development. Please change the proxy url accordingly.

4. Comment out the baseURL property of axios instance in /src/api/apiinterceptor.js file. Though it has already been commented out in this template. This is necessary to make it work.

What if I don't need this proxy setup

If you don't need proxy setup then make a couple of changes in the template as mentioned below.

• Delete static.json file from the root folder
• Remove "proxy" code snippet from server/index.js file.
• Uncomment the baseURL property while creating the axios instance in /src/api/apiinterceptor.js file.

How should I check heroku deployment logs

• Open your terminal and type this: heroku logs --tail --app your_app_name

License

This project is licensed under the MIT license, Copyright (c) 2019 Amit Pal. For more information see LICENSE.md.