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.
- TODO
- Install
- Run
- Workflow
- Design choices
- es6 modules
- babel to use es6
- browserify to bundle modules
- livereactload for hot reloading (with babel6)
- uglifyify for minification
- exorcist for external map files
- npm scripts for task running
- compile with browserify and babelify to one file
bundle.js - no additional abstraction like grunt/gulp/webpack
- postcss
- react-pacomo
css modules - bundle splitting - browserify for webpack users
- isomorphic/universal/shared javascript with koa and flux/alt or relay
- eslint
- editorconfig
- license file
- tests using mocha/ava/react-unit
- some react router
- react-simpletabs or khan components
- rollup as es6 module bundler, another rollup example - source
- flow or typescript
- process manager instead of http-server: pm2, forever, nodemon
- NODE_ENV
- css lint: stylelint
- postcss-flexbugs-fixes
- postcss colorguard
Clone this repo and inside the directory run
npm i
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:
- http://stackoverflow.com/questions/20051318/npm-native-builds-with-only-visual-studio-2013-installed
- node-gyp versions
- https://github.com/nodejs/node-gyp
npm run dev
- 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.
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.
- https://github.com/ModuleLoader/es6-module-loader - 12.821 KB, addyosmani made 21 commits
- https://github.com/systemjs/systemjs - 40.457 kB
- https://github.com/caridy/es6-micro-loader
- Seed project for ES6 modules via SystemJS with ES6 syntax using Babel that lazy-load and bundle build with AngularJS https://github.com/Swimlane/angular-systemjs-seed
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);
});- http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/
- https://github.com/mattdesl/module-best-practices#task-running
no need for grunt/gulp/gloop/glugle/gleffy/gloran/whatever task runner comes out next week
- http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/
- http://blog.modulus.io/using-npm-scripts-to-build-asset-pipeline
- http://substack.net/task_automation_with_npm_run
- http://learnjs.io/blog/2014/02/06/creating-js-library-builds-with-browserify-and-other-npm-modules/
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
browserify/browserify#1233 (comment)
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.
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.
- css modules gives what webpack gives in future standard compliant way thanks to postcss
- browesrify + css modules
- browserify for webpack users
- http://www.joezimjs.com/javascript/no-more-global-npm-packages/
- http://stackoverflow.com/questions/14657170/installing-global-npm-dependencies-via-package-json/14657796#14657796
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.
- https://medium.com/@ddprrt/postcss-misconceptions-faf5dc5038df
- http://www.sitepoint.com/postcss-mythbusting/
- Atom plugin for linter https://github.com/AtomLinter/linter-stylelint
it's time to think about deprecating cssnext
In the future postcss-cli will not be needed, cmd line will be included in postcss.
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.
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",
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.
.env
NODE_ENV=development
development_database=da
development_token=1231234123551341
Warning! Ensure there are unix line endings in .env or there may be problems.
https://github.com/kennethreitz/autoenv
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.
source it using script env.sh from this repository:
source env.sh
source it using script env.bat from this repository:
.\env.bat
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.
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://github.com/gaearon/react-transform-hmr
If you use jsx, you have to explicitly import react.
There are two rules in eslint that may be confusing:
- Prevent missing React when using JSX https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md
- This option is deprecated, please use the shared settings to specify a custom pragma. If you are using the @jsx pragma this rule will mark the designated variable and not the React one https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md
To specify custom pragma:
'plugins': [
'react'
],
"settings": {
"react": {
"pragma": "hJSX", // Pragma to use, default to "React"
}
},
"parser": "babel-eslint",