ta2edchimp / react-app-dawn

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

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

However, a time will come when knowing the details off 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 & npm
  2. run > npm i webpack-dev-server@2.1.0-beta.9 webpack@2.1.0-beta.25 eslint stylelint browser-sync rimraf -g from a terminal
  3. Download this repo, cd into the repo directory from a terminal and run > npm install
  4. run > npm run start:dev this will open the app up in a 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.

Babel

Polyfill Browser DOM and JS features

Linting

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

Conventions used:

  • Keep webpack config to a small single file that deals with both dev and production.
  • Own the js 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

About

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


Languages

Language:JavaScript 98.8%Language:HTML 1.0%Language:CSS 0.2%