React-Material-Webpack boilerplate

The project serves as a starter kit for any ReactJS project. You can use this as a rapid prototyping alternative to create-react-app utility.

Live Demo 🍟

Features

• Comes with basic layout with Material UI
• Styling support with SCSS
• Basic server setup with express
• Storybook is configured so that you could write independant stories per component
• Support for error reporting using AirBrake
• Built-in support for TravisCI
• Contains handling of 404 error (page not found) paths
• Handles JS disabled on browser scenario**
• Prettier and ESLint configured with EditorConfig support
• Basic routing is configured to easliy add new routes.
• Skeleton for Redux is added for development and production mode stores with support for redux--dev-tools extension for easy adoption
• Barebone for testing with some added test cases
• Optimized bundle size
• Variaty of favicons for different devices and screen sizes configured
• Morever, CSP (Content Security Policy) and Meta Tags for Seach Engine Optiomization (SEO) are already configured.
• Hooks for precommit to lint code and prepush to run tests is added. And much more. 🔈

** To check the behavior, disable the Javascript in your browser once you have this project up and running.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

You will need to have following installed to use the software -

• npm / yarn
• node
• git

Setup

To get a copy of this project and start developing,

git clone https://github.com/pritam-patil/react-material-webpack-boiler.git
cd react-material-webpack-boiler
npm install

Running the project

To develop the project locally, you need only do -

npm install
npm run start

With hot reloading support, the app will start getting server on port 3000.

To run the production mode for deployment purposes, do -

npm run prebuild

dist directory would be created by running above command.

Running the tests

Enzyme-Jest is used as a testing library. To run tests, do -

npm run test

Run tests with coverage, do -

npm run test:coverage

Other Scripts

Serve the app using express server, run -

npm run serve

Express server will start on port 3000,

Run linter -

npm run lint

Fix the linting errors and write -

npm run lint:write

Run prettier -

npm run prettier

Run storybook -

npm run storybook

Your stories will start getting server on port 6006.

Build storybook -

npm run build-storybook

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning.

Authors

• Pritam Patil

License

This project is licensed under the MIT License - see the LICENSE.md file for details