Coffee React Quickstart
Quickstart for creating React.js web applications.
It has a number of nice goodies baked in including:
- Write your JSX in Coffeescript thanks to coffee-react-transform.
- Amazing URL-driven-development (UDD) with the react-router project.
cult watchfor rebuilding css/js on the fly while developing and
cult buildto create minified versions for deploying to production.
- Includes sensible element stylings and several useful Sass plugins:
- <a href="http://susy.oddbird.net/">Susy</a>: best-of-breed grid system.
- <a href="https://github.com/Team-Sass/modular-scale">modular-scale</a>: easily create pleasing modular type scales.
- <a href="https://github.com/jhardy/Sassy-Buttons">Sassy Buttons</a>: flexible button styling.
- <a href="http://breakpoint-sass.com/">Breakpoint</a>: Super simple media queries.
Clone this repo and then after entering the new directory run
npm install and
bundle install. This will install the respective NPM and Ruby Gem dependencies.
You'll also need to have cult/gulp installed globally to run the coffeescript gulpfile:
npm install -g gulp cult
Run in the root of your directory:
This will watch the src directories and build on changes and placed the built css and js files in the public directory. It'll serve everything in the /public directory at localhost:8080
Then try editing
src/scripts/hello_world.cjsx and see your changes magically show up in your browser with no page reload!
If styles don't show up
cult watch and reload your browser.
The problem is that I have Webpack setup to package CSS for the browser but we're using Sass/Compass before Webpack. On the first run, the
public/main.css file is empty as Sass hasn't done its thing yet so Webpack requires an empty file and no styles show up in the browser. On the next start of
cult watch the
public/main.css file has been compiled by Sass so styles will now show up in the browser.
To build for production, simply run
Try out the example app included with this quickstart: http://kyleamathews.github.io/coffee-react-quickstart/