{"id":16347910,"url":"https://github.com/iroy2000/react-reflux-boilerplate-with-webpack","last_synced_at":"2026-03-15T08:38:32.205Z","repository":{"id":26810543,"uuid":"30269068","full_name":"iroy2000/react-reflux-boilerplate-with-webpack","owner":"iroy2000","description":"React + Reflux + CoffeeScript + Stylus Boilerplate with Webpack","archived":false,"fork":false,"pushed_at":"2016-10-26T06:47:43.000Z","size":2203,"stargazers_count":159,"open_issues_count":0,"forks_count":17,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-01T22:38:38.697Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iroy2000.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-03T22:53:09.000Z","updated_at":"2023-08-12T16:53:54.000Z","dependencies_parsed_at":"2022-06-27T10:17:05.807Z","dependency_job_id":null,"html_url":"https://github.com/iroy2000/react-reflux-boilerplate-with-webpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/iroy2000/react-reflux-boilerplate-with-webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iroy2000%2Freact-reflux-boilerplate-with-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iroy2000%2Freact-reflux-boilerplate-with-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iroy2000%2Freact-reflux-boilerplate-with-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iroy2000%2Freact-reflux-boilerplate-with-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iroy2000","download_url":"https://codeload.github.com/iroy2000/react-reflux-boilerplate-with-webpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iroy2000%2Freact-reflux-boilerplate-with-webpack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30539312,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-15T07:17:37.589Z","status":"ssl_error","status_checked_at":"2026-03-15T07:17:31.738Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T00:46:57.582Z","updated_at":"2026-03-15T08:38:32.191Z","avatar_url":"https://github.com/iroy2000.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Friendly Note\n\nI have lately created a more recent version -  [React Redux Boilerplate](https://github.com/iroy2000/react-redux-boilerplate).\n\nThe main technologies in that repo are `React`, `Redux`, `ES6`, `PostCSS` and `Webpack`.  And if you are interested in and wanted to learn more about those technologies, please feel free to navigate to [React Redux Boilerplate](https://github.com/iroy2000/react-redux-boilerplate).\n\n\n# React Reflux Workflow Boilerplate\n\n\"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.\n\n## Features\n\n* React\n* React Router\n* Reflux ( Refactor of Flux )\n* ES6 ( Harmony ) | if you use .js or .jsx extension\n* CoffeeScript | if you use .coffee extension\n* CJSX ( Coffee JSX ) | if you use .cjsx extension\n* LoDash  ( Lightweight version of Underscore )\n* Stylus ( CSS pre-processor )\n* JEET ( Grid system for Stylus )\n* Rupture ( Media Query support for Stylus )\n* Jest ( Testing framework for React app )\n* Browser Live Reload during development\n* CSS / HTML / JS minification / Image optimization when built\n* JS code duplication removal during built\n* Optional TDD task to perform auto testing when file changes\n\nIf you are interested, please read the __package.json__ file for all installed modules / plugins.\n\nFeel free to contribute or fork it if you find this repo could help the community.\n\n## Benefits\n* During development, it will immediately shows up in browser without refreshing\n* When you build it, it will dedub and optimize JS, HTML and image assets for you ( production quality )\n* It also comes with TDD option tasks, will run your test whenever you touch your application files\n* Minimal setup time and allow you to invest into things that matters\n* Everything automatic, you just care about development, nothing else \\o/ Yeah ?!\n\n### About the demo code in this repo\nEven though this repo is about the workflow boilerplate and how to make your life easier during development,\nthe 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.\n\nDemo online  http://iroy2000.github.io/\n\n### Installation\n\nYou must have npm installed gloablly before running the following command :-\n\n```sh\n$ npm install --global gulp\n$ npm install\n```\n\n__Yes, that's it!!__ You don't like that??\n\n### First Run\n\n```sh\n$ gulp dev\n```\n\nThen you should see something similar in your terminal\n\n```sh\n[23:06:33] Requiring external module coffee-script/register\n[23:06:34] Using gulpfile ~/labs/react-reflux-boilerplate-with-webpack/gulpfile.coffee\n[23:06:34] Starting 'css'...\n[23:06:34] Starting 'copy-assets'...\n[23:06:34] Starting 'webpack-dev-server'...\n[23:06:34] [webpack-dev-server] http://localhost:8888\n[23:06:34] Finished 'webpack-dev-server' after 22 ms\n[23:06:35] all files 17.62 kB\n[23:06:36] Finished 'css' after 1.39 s\n[23:06:36] all files 52.8 kB\n[23:06:36] Finished 'copy-assets' after 1.77 s\n[23:06:36] Starting 'dev'...\n[23:06:36] Finished 'dev' after 8.02 ms\n\n```\n\nNow open your broswer and go to 'localhost:8888/'\n\n\n### Commands\n\nThere are two ways of starting and building, but the Gulp way has more tasks defined :)\n\nYou need to run the following command in the project root, where is the same directoy as package.json\n\n__The Node way__\n\n```sh\n$ npm start  // start a dev server\n$ npm build  // build a production version\n$ npm test   // run Jest cli\n```\n\n__The Gulp way__\n\n```sh\n$ gulp dev  // start a dev server\n$ gulp tdd // start a dev server with automatic test running\n$ gulp build  // build a production version\n$ gulp test   // run test manually\n$ gulp clean  // in case you need to clean the public folder\n```\n\nPlease see __Gotcha__ section if you run into problems :/\n\n### Folder Structure\n\n* src/       - where all the source code live\n* assets/    - where all static assets live\n* public/    - production level code after you run 'build' command\n* \\__test\\__/  - all your tests go to this directly\n\n__Note__ : assets/ and src/ will be compiled into public/ folder when you run build command\n\n\n### Suggested Workflow\n\nAfter you check out the repo, I will usually do the following :-\n\n1. Run 'gulp dev'  ( or npm start )\n2. If you prefer TDD, do 'gulp tdd' instead\n3. Go your browser and go to 'localhost:8888'  ( port is configurable )\n4. Make code changes\n5. Watch your code changes reflect on browser without refreshing\n6. Repeat your development steps\n\nOnce you are ready to deploy, do the following :-\n\n1. Run 'gulp clean' in case your built has old css\n2. Run 'gulp build' when you want to generate production level code\n\nThat's very easy, isn't it?\n\n### Extra Note\n\nIf you want to update the npm modules, execute the following commands, it will update all the modules for you.\nBe careful though, if your application has dependencies on certain version, it might break your code ~  \\o/ Yeah!\n\n```sh\nnpm install -g npm-check-updates\nnpm-check-updates -u\n```\n\nIf your OS complains cannot find gulp, please try to install gulp globally instead\n\n```sh\nnpm install --global gulp\n```\n\n### Gotcha\n1) There is a tricky part about JEST in node and in gulp.\n\nWhile using the 'npm test' works fine,  running 'gulp test' will fail because of node harmony flag\n\nSo please do yourself a favor by adding the following line to your .profile or .bashrc\n\n```sh\nalias gulp='node --harmony `which gulp`'\n```\n\nNow it should both works :)\n\n\n2) There is a user reporting when he tries to run the test, he sees an error like the following :-\n\n```sh\n[14:03:47] Starting 'test'...\nWaiting on 1 test...Segmentation fault\n```\n\nIf you see this error, seems like it is related to your node version. It is an known issue that Jest doesn't support\nReact in `NodeJS v0.12.x`.  For more information, you can look at the origin reported issue here :-\n\nhttps://github.com/iroy2000/react-reflux-boilerplate-with-webpack/issues/4\n\n### WTFPL License\n    - Please refer to [WTFPL](http://www.wtfpl.net/ \"WTFPL\") for more license information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firoy2000%2Freact-reflux-boilerplate-with-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Firoy2000%2Freact-reflux-boilerplate-with-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Firoy2000%2Freact-reflux-boilerplate-with-webpack/lists"}