Yet Another React Boilerplate with Material-UI

Introduction

This is a boilerplate to make it easier developing websites using React with hot-realoading and redux monitoring on webpack 2 and using Material-UI components.

Example screenshots:

Features

• React boilerplate with ES6 JSX support.
• Webpack 2.
• Webpack loaders included: css, less, json.
• Local styling enabled to prevent global css rules messing all style.
• Material-UI
• Router with redux history synchronization.
• Redux DevTools enabled for monitoring.

Will be added

• Tests with mocha
• Generating docs and docs

Setup

• Install latest node & npm versions depending on your system.
• To install project dependencies either:
  • Suggested: - install yarn globally with npm install yarn -g - install project dependencies with yarn install
  • or not suggested: npm install

yarn ensures you are using packages the same with deployed and tested version.

Development

npm run dev to run in test mode with hot reloading and a nice dashboard showing it's state. npm run lint to eslint code

Notes:

• All class selectors in style files will be replaced with path unique class names that can be accessed with imported variable. See pages/home.less with and note that .home is given to files with style.home variable.
• If you really want global style with classes use :global(.my-global-class) notation.

Useful extensions

• Redux DevTools: Allows you to monitor changes in redux store.
• React DevTools: For chrome allows you to inspect React components.

Example usage of Redux DevTools:

Production

Static deployment: npm run build will generate a dist folder with all necessary files. Please note that if you will use static deployment redirect all non-static file requests to index.html React router will handle 404 messages.

Serving over node: npm start (does build itself no need to run build separately)

If you want to change the port modify start script or use PORT=MY_PORT node server.prod.js after build.

Project Structure

• src: holds source files for react. If you add react files outside of this folder you might need to tweak webpack.config.js
• lib: is for nodejs server libraries.
• conf: is for general purpose server configurations like nginx.
• static: is where all static files should be put. All these files will be copied to build folder (defaults to dist). This includes index.html served by node server. All these files can be accessed with urls like /img/icon-16x16.png.