React Material Starter Kit

The PRD really sttarted kit for ReactJs with hot module replacement (HMR) for rapid development.

React (16.x)
Webpack (4.x)
Hot Module Replacement (HMR) using React Hot Loader (4.x)
Babel (7.x)
JSS this is Css in Jss, the powerfull tool to develop Css using Js. The tool is using natively by Material UI.
LESS for style-sheet development. if you don't want to use Jss.
Jest - Testing framework for React applications
Image Loader to loading and minify the images.
Redux Manage the Component states.
Redux-Thunk The middle-ware of Redux
Redux-toolbelt A set of tools for quicker, easier, less verbose and safer Redux development by welldone-software.
request-promise and request for WebApi communication.
ESLINT for Javascript and ReactJs coding best practises.
Code quality (linting) for JavaScript and LESS/CSS.
This project also using babel-runtime and babel-plugin-transform-runtime to speperate the commonns functions to the other modules to reduce the size of the js files. Refer here for details.

The tool to convert Css to Jss here and to LESS here in case you don't like Jss.

Original Source Code

Based on the best practises of the Single-Page-Application development with NodeJS. I added the nice font-end component Material-Dashboard-React and Redux store integration.

Beside of that I also developped some useful compoment as Message box, Notification to make the Started-kit to be a Production ready SPA kit.

Support Features

1. async/await

It is using babel-regenerator-runtime to transform the async and await functions to Promise.

//Transform from
function getDataFromServer() {
  return Promise((resolve, reject) => {
    loadDataFromServer()
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

//To
async function getDataFromServer() {
  try {
    return await loadDataFromServer();
  } catch (error) {
    throw error;
  }
}

Installation

Clone/download repo
npm install
Replace the CodeCov.io token to your one in the package.json file.
Run npm start to run the project.

Usage

Development

npm run start-dev

Build app continously (HMR enabled)
App served @ http://localhost:8080

Production

npm run start-prod

Build app once (HMR disabled)
App served @ http://localhost:3000

Webpack Bundle Analysis

npm run start-analysis

Analysis served @ http://localhost:8888

New Compoments

Message Box and Notification: Allow to show Info, Confirm, Success and Error message and notification. Refer to the MessageBox in Views folder so sample that using Redux store to manage the state.

Environment Supports

Docker Support

Build Image docker build.
Build and Tag the image docker image build . -f sm-react-docker-nginx/Dockerfile -t [YOUR_ID]/react-materialui-started-kit:latest. Example docker image build . -f sm-react-docker-nginx/Dockerfile -t baoduy2412/react-materialui-started-kit:latest.
Push inage to Docker hub docker push [YOUR_ID]/react-materialui-started-kit:latest Example docker push baoduy2412/react-materialui-started-kit:latest.

The application will running port 80 and 443 in Docker. The image can be found in Docker hub here.

However if you are not using Docker just simply remove the submodule sm-react-docker-nginx There is no impact to the application.

IIS Support

The Web.config file in sm-react-iis had been added for IIS hosting purpose. This file should be copy along with all files in dist folder when hosting in IIS.

However if you are not hosting this app in IIS just simply remove the submodule sm-react-iis There is no impact to the application.

Azure Service Fabric Support

All stuffs in sm-react-service-fabric folder are using for Azure Service Fabric hosting purpose.

The C# project inside this folder will copy all files from dist folder to wwwroot folder and host them as a static side in Azure Service Fabric.

Currently, I'm using .Net Core 2.1 to make the project is flexible enough to host on any platforms.

When build the Service Fabric application it will copy all files in dist folder to wwwroot folder. So ensure you run the npm build before deploy the Service Fabric app.

However if you are not using Service Fabric just simply remove the submodule sm-react-service-fabric There is no impact to the application.

Node Js Hosting

There is a sub module contains the Express.js configuration to host the application in the Node Js environment. The application will running port 3000 and 3001 in NodeJs and the port is configurable in the Js file.

If you are not using Node Js hosting just simply remove the submodule sm-react-node-express There is no impact to the application. But, please note that the npm run start-prod is using this submodule to hosting the dist folder as a static side. Please be considered before removing this module.

GZIP and SSL

The GZIP and SSL had been applied for all hosting environments above.

All commands

Command	Description
`npm run start`	Build app continuously (HMR enabled) and serve @ `http://localhost:8080`
`npm run start-prod`	Build app once (HMR disabled) and serve @ `http://localhost:3000`
`npm run start-analysis`	Build and start Webpack Bundle Analyser @ `http://localhost:8888`
`npm run build`	Build app to `/dist/`
`npm run test`	Run tests
`npm run lint`	Run JavaScript and LESS linter
`npm run lint:js`	Run JavaScript linter
`npm run lint:less`	Run LESS linter
`npm rum test-ci`	Run Jest test and upload code to CodeCov.io

xuantuannguyen/React-MaterialUI-Starter-Kit