codylindley/react-app-dawn

A React app boilerplate with the minimal parts (Babel, Webpack 2, Linters etc...) with a priority of simplicity, configurability, and maintainablity.

react-app-dawn

It is likley the case that using one of the boilerplates list below is more than adequite for the average developer working on an average React app.

• http://reactboilerplate.com
• redux-easy-boilerplate

This isn't a slight of the boilerplates or average developers. Both get the job done just fine in most situations.

However, a time will come when knowing the details of all aspects of a development stack will be required. When this happens you'll need something that is more boilerplate and less application seed. That is React App Dawn.

Installation:

1. Install Node (v7.0.0) & npm (Use NVM to run v7.0.0 or install latest Node/npm)

2. Install global npm packages. Run from a terminal:

$ npm i [email protected] [email protected] eslint stylelint browser-sync rimraf -g

3. Install local npm packages. Download this repo, cd into the repo directory from a terminal and run:

$ npm install

4. Start up a sever and server the hello world app. Run:

$ npm run start:dev

(This will open the app up in your default web browser at localhost:8080)

npm CLI scripts:

npm run [name:name]	Description (read comments in package.json for more details)
npm run start:dev	Start webpack dev server, serve src directory at localhost:8080 using hot reloading
npm run build	Create a build version (bundle, lint, minify etc..) of src, place that in the build directory
npm run start:prod	Start browser-sync, serve build directory at localhost:3000
npm run lint:js	lint all js files in src directory
npm run lint:css	lint all css file sin src directory

Broad description of tools used (including implementation deails):

Node Version Manager

• Node Version Manager is used to manage which version of node is used for this app.
• the .nvmrc defines the current version of node.

Webpack 2

• Webpack 2 is used to take es2015 modules and translate them into a chunked format that can run in web browsers.
• The configuration file for webpack is webpack.config.babel.js.
• By using babel in the name of the file the file, webpack.config.babel.js, it will be babalized before running.

JS via Babel

• Webpack uses Babel to transform latest, stage0, and react code to ES5 code.

Polyfill Browser DOM and JS features

• The index.html page uses polyfill.io to fill any missing modern browser features (e.g. DOM & JS)

Linting

• Use eslint and stylelint linters, configured from files found in linters directory.

CSS

• Use postCSS, nextCSS, and CSS Modules

Conventions used:

• Keep webpack config to a small single file that deals with both dev and production.
• Own the JavaScript and CSS linter rules (starting point taken from eslint-config-airbnb and stylelint-config-standard)
• Don't place unecessary configurations in package.json that can be contained in there own configuration file (e.g. .babelrc, .nvmrc, .eslintrc, .stylelintrc).
• Linting happens during development in the developers editor and at build time.