Awesome Open Source
Awesome Open Source

React starter kit

Stop the madness of learning new and fancy task runner/build system that comes every few months. Also use es6 modules.

You might be interested in angular boilerplate which also uses npm as task runner.

Table of Contents

TODO

Install

Clone this repo and inside the directory run

npm i

Windows installation errors

If you got error when building some native modules on Windows

  • Install Microsoft Build Tools 2013 ([No need for the entire visual studio)[http://stackoverflow.com/questions/14278417/cannot-install-node-modules-that-require-compilation-on-windows-7-x64-vs2012/31987161#31987161))
  • update internal node-gyp (don't just install it globally)
  • Set msvs_version if you have more than one version of compiler installed

More about it:

Run

npm run dev

Workflow

  • Open your browser at http://localhost:8888.
  • Edit index.js, i.e. add another input, save
  • Watch how content in the browser changes without refreshing browser, thanks to livereactload.

Design choices

browserify instead of asynchronous module loader

Because you need full runtime when using jspm or others.

Alternative to one build file is to use babel in browser, but node_modules/babel-core/browser.min.js is 1305 KB.

For Node we can use bootstrap.js from https://www.airpair.com/javascript/posts/using-es6-harmony-with-nodejs

var System = require('es6-module-loader').System;

System.import('./index').then(function(index) {
    index.run(__dirname);
}).catch(function(err){
    console.log('err', err);
});

npm scripts instead of gulp, grunt, webpack as a task runner/build system

no need for grunt/gulp/gloop/glugle/gleffy/gloran/whatever task runner comes out next week

_facildeabrir

How to use npm and browserify

Webstorm and source maps

I (with some help) found a work-arround for successfully using browserify source maps from IntelliJ: http://stackoverflow.com/questions/31070112/enable-javascript-debugging-with-intellij-and-source-maps

https://github.com/substack/node-browserify/issues/1233#issuecomment-123302577

Run commands concurrently

Use concurrently, parallelshell failed me on hackwaw. There is also npm-run-all.

npm i concurrently

On Windows you need to use double-quotes to avoid confusing the argument parser:

  "scripts": {
    "dev": "concurrently \"npm run watch\" \"npm run reactload\" \"npm run http-server\""
  },

Use --raw to preserve colors.

http://stackoverflow.com/questions/30950032/how-can-i-run-multiple-npm-scripts-in-parallel

npm scripts + browserify instead of webpack

Webpack seems like an amazing tool, and does present some great features (hot module replacement, code splitting, sync vs. async requires, etc). However, it does not promote code re-use in the way that NPM and Browserify does. It encourages a “whole new way” of writing modules and often requires manually-maintained config files. - http://mattdesl.svbtle.com/browserify-vs-webpack

Browserify can do all of that with just a few commands or plugins. And be way less verbose too.

  • Split files? The factor-bundle plugin.
  • Watch files? Watchify or many many other options.
  • Compile to JS? Plugins - Babel or CoffeeScript are really common.
  • CSS? Yup, browserify-css plugin for that.
  • Feature flags? Yup, plus it doesn't use a non-standard syntax but instead process.env flags. Envify is much nicer of a solution.
  • Multiple Entry points? See point 1. Easy.
  • Optimizing common code. Same as before. Factor-bundle takes care of it.

Source

no global dependencies in package.json

To use local dependencies in command line, alias it in package.json

"scripts": {
    "http-server": "http-server"
}

And then use it like this npm run http-server or use without aliasing first node_modules/.bin/http-server.

CSS and PostCSS

Why not cssnext?

it's time to think about deprecating cssnext

In the future postcss-cli will not be needed, cmd line will be included in postcss.

colorguard

Remeber to use colorguard before postcss-custom-properties, because when you have unused properties with colors, they will be stripped out and you won't see any warnings.

NODE_ENV: production vs development

Windows

You can set NODE_ENV on windows as well:

set NODE_ENV=production
npm run env:windows

Or using npm scripts (don't put space before &&):

"env:windows": "set NODE_ENV=development&& node env.js",

Best practices

Use environmental variables rather than config file with grouping, because that is more language-independent and scales better when you add more deploys over app lifetime. http://12factor.net/config

Also don't set NODE_ENV to any default like this:

var environment = process.env.NODE_ENV || 'development';

because either development code and env shouldn't be exposed or development code could mangle with production database, etc. https://www.reddit.com/r/node/comments/3e9f2f/processenvnode_env_undefined_should_it_default_to/.

Use prefix so you won't use some variable from different environment, i.e. previously you could set database=some_url. With prefix it would be development_database. Then read it in your application like this:

var database = process.env[process.env.NODE_ENV + '_database'];

It's better to source variables from command line or with node options then with some starting javascript file, because some tools like babel can use those env variables. If you use npm scripts that's prefered way.

Config format

.env

NODE_ENV=development
development_database=da
development_token=1231234123551341

Warning! Ensure there are unix line endings in .env or there may be problems.

How to source variables into environment

autoenv

https://awesomeopensource.com/project/kennethreitz/autoenv

Webstorm

In Webstorm11 there is a plugin for npm. Click gear icon > npm Settings. You can set single variables like NODE_ENV but it's better to source it from file using dotenv.

npm i --save-dev dotenv

Then in webstorm npm settings set Node options to -r dotenv/config.

By default it will read from .env file.

*nix

source it using script env.sh from this repository:

source env.sh
Windows cmd.exe

source it using script env.bat from this repository:

.\env.bat

Test it

Run it from console:

$ npm run check_env

> [email protected] check_env C:\Users\frolow\projects\react-starter-kit
> node check_env.js

process.env.NODE_ENV: development
database: da

or from Webstorm npm plugin.

Babel

It is up to you to ensure that the transform is not enabled when you compile the app in production mode. The easiest way to do this is to put React Transform configuration inside env.development in .babelrc and ensure you’re calling babel with NODE_ENV=production. See babelrc documentation for more details about using env option.

https://awesomeopensource.com/project/gaearon/react-transform-hmr

JSX

If you use jsx, you have to explicitly import react.

There are two rules in eslint that may be confusing:

To specify custom pragma:

'plugins': [
  'react'
],
"settings": {
  "react": {
    "pragma": "hJSX",  // Pragma to use, default to "React"
  }
},
"parser": "babel-eslint",

https://github.com/yannickcr/eslint-plugin-react/blob/master/README.md#configuration



Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,094,037
Webpack (23,724
Gulp (13,940
Grunt (10,354
Babel (7,991
Starter Kit (4,019
Postcss (3,404
Browserify (3,384
Npm Scripts (705