React Reflux Workflow Boilerplate
"React Reflux Workflow Boilerplate" is a workflow framework that make life easier for developers by providing a development and production ready build process framework out of the box.
- React Router
- Reflux ( Refactor of Flux )
- ES6 ( Harmony ) | if you use .js or .jsx extension
- CoffeeScript | if you use .coffee extension
- CJSX ( Coffee JSX ) | if you use .cjsx extension
- LoDash ( Lightweight version of Underscore )
- Stylus ( CSS pre-processor )
- JEET ( Grid system for Stylus )
- Rupture ( Media Query support for Stylus )
- Jest ( Testing framework for React app )
- Browser Live Reload during development
- CSS / HTML / JS minification / Image optimization when built
- JS code duplication removal during built
- Optional TDD task to perform auto testing when file changes
If you are interested, please read the package.json file for all installed modules / plugins.
Feel free to contribute or fork it if you find this repo could help the community.
- During development, it will immediately shows up in browser without refreshing
- When you build it, it will dedub and optimize JS, HTML and image assets for you ( production quality )
- It also comes with TDD option tasks, will run your test whenever you touch your application files
- Minimal setup time and allow you to invest into things that matters
- Everything automatic, you just care about development, nothing else \o/ Yeah ?!
About the demo code in this repo
Even though this repo is about the workflow boilerplate and how to make your life easier during development, the React and Reflux demo are also good if you want to learn those technologies. Feel free to send me message or open an issue if you have any questions.
Demo online http://iroy2000.github.io/
You must have npm installed gloablly before running the following command :-
$ npm install --global gulp $ npm install
Yes, that's it!! You don't like that??
$ gulp dev
Then you should see something similar in your terminal
[23:06:33] Requiring external module coffee-script/register [23:06:34] Using gulpfile ~/labs/react-reflux-boilerplate-with-webpack/gulpfile.coffee [23:06:34] Starting 'css'... [23:06:34] Starting 'copy-assets'... [23:06:34] Starting 'webpack-dev-server'... [23:06:34] [webpack-dev-server] http://localhost:8888 [23:06:34] Finished 'webpack-dev-server' after 22 ms [23:06:35] all files 17.62 kB [23:06:36] Finished 'css' after 1.39 s [23:06:36] all files 52.8 kB [23:06:36] Finished 'copy-assets' after 1.77 s [23:06:36] Starting 'dev'... [23:06:36] Finished 'dev' after 8.02 ms
Now open your broswer and go to 'localhost:8888/'
There are two ways of starting and building, but the Gulp way has more tasks defined :)
You need to run the following command in the project root, where is the same directoy as package.json
The Node way
$ npm start // start a dev server $ npm build // build a production version $ npm test // run Jest cli
The Gulp way
$ gulp dev // start a dev server $ gulp tdd // start a dev server with automatic test running $ gulp build // build a production version $ gulp test // run test manually $ gulp clean // in case you need to clean the public folder
Please see Gotcha section if you run into problems :/
- src/ - where all the source code live
- assets/ - where all static assets live
- public/ - production level code after you run 'build' command
- _test_/ - all your tests go to this directly
Note : assets/ and src/ will be compiled into public/ folder when you run build command
After you check out the repo, I will usually do the following :-
- Run 'gulp dev' ( or npm start )
- If you prefer TDD, do 'gulp tdd' instead
- Go your browser and go to 'localhost:8888' ( port is configurable )
- Make code changes
- Watch your code changes reflect on browser without refreshing
- Repeat your development steps
Once you are ready to deploy, do the following :-
- Run 'gulp clean' in case your built has old css
- Run 'gulp build' when you want to generate production level code
That's very easy, isn't it?
If you want to update the npm modules, execute the following commands, it will update all the modules for you. Be careful though, if your application has dependencies on certain version, it might break your code ~ \o/ Yeah!
npm install -g npm-check-updates npm-check-updates -u
If your OS complains cannot find gulp, please try to install gulp globally instead
npm install --global gulp
1) There is a tricky part about JEST in node and in gulp.
While using the 'npm test' works fine, running 'gulp test' will fail because of node harmony flag
So please do yourself a favor by adding the following line to your .profile or .bashrc
alias gulp='node --harmony `which gulp`'
Now it should both works :)
2) There is a user reporting when he tries to run the test, he sees an error like the following :-
[14:03:47] Starting 'test'... Waiting on 1 test...Segmentation fault
If you see this error, seems like it is related to your node version. It is an known issue that Jest doesn't support
NodeJS v0.12.x. For more information, you can look at the origin reported issue here :-
- Please refer to [WTFPL](http://www.wtfpl.net/ "WTFPL") for more license information.