abhionlyone/react-boilerplate-1

A slightly opinionated yet dead simple boilerplate for ReactJS, Webpack 4 and React Router v4

A slightly opinionated yet dead simple boilerplate for ReactJS, Webpack 4, and React Router v4.

---

Table of Contents

• Live Demo
• Features
• Getting Started
• Custom Configuration

Live Demo

http://mikechabot.github.io/react-boilerplate/dist

Pretty landing page located here

---

Features

Build Process

• Built with webpack 4
• Supports ES6 via Babel transpiling

State Management

• redux-entity for domain entity management
• redux-thunk for asynchronous actions
• redux-logger for capturing actions

Routing

• react-router v4 for client-side routing

HTTP

• Customizable, Promise-based HTTP support via Axios
• Utilizes a a generic data service to easily fetch data
• Example of implementing the data service

Styling

• Supports SCSS & SASS syntax
• Browser compatibility via autoprefixing and normalize.css
• Bulma for out-of-the-box styling
• glamorous for CSS-in-JS styling

Develop & Deploy

• Environmental configurations for both webpack and redux
  • Dev: webpack-dev-server with React Hot Loader. redux-logger enabled
  • Prod: Express server with redux-logger disabled

Testing

• Tested with Mocha and Chai
• Coverage support via Istanbul
• react-addons-test-utils for component testing
• Sinon.JS for mocking, stubbing & spying

---

Getting Started

1. $ git clone https://github.com/mikechabot/react-boilerplate.git
2. $ npm install
3. Launch environment:
   • Production: $ npm start
   • Development: $ npm run dev

   Available at http://localhost:3060

4. Build assets for production:
   • $ npm run build:prod
5. Execute tests:
   • $ npm test

---

Custom Configuration

Use cross-env or a comparable library/command to set the ENV_CONFIG_PATH to the path of your JSON configuration file:

$ cross-env ENV_CONFIG_PATH=/path/to/config.json npm start

Note: This path is made available to Webpack only, however the contents of the file are stamped on a global variable during the build process (process.env.APP_CONFIG, see webpack.config.js), which is then accessible via the ConfigService.

If your configuration is loaded successfully, you can expect to see the following indicator during startup:

** Using custom configuration located at "/path/to/config.json" **

Example

Using configuration file @ D\:\_workspaces\foo.json

mikec@Krait MINGW64 /d/_workspaces/react-boilerplate (master)
$ cross-env ENV_CONFIG_PATH="D\:\_workspaces\foo.json" npm start

> [email protected] start D:\_workspaces\react-boilerplate
> npm run prod

> [email protected] prod D:\_workspaces\react-boilerplate
> npm run build:prod && npm run start-server

> [email protected] build:prod D:\_workspaces\react-boilerplate
> cross-env NODE_ENV=production webpack --progress --colors

** Using custom configuration located at "D:\_workspaces\foo.json" **

Hash: 32bbf23a46e7ac19741a
Version: webpack 3.5.5
Time: 8711ms
         Asset     Size  Chunks                    Chunk Names
     bundle.js   563 kB       0  [emitted]  [big]  main
css/bundle.css  1.68 kB       0  [emitted]         main
    index.html  1.58 kB          [emitted]