kyleamathews/coffee-react-quickstart

Quickstart for building React single page apps using Coffeescript, Gulp, Webpack, and React-Router

Coffee React Quickstart

Quickstart for creating React.js web applications.

It has a number of nice goodies baked in including:

• Live reloading for both CSS and Javascript! This really speeds up development. Live reloading is powered by the Webpack module bundler and react-hot-loader projects.
• Write your JSX in Coffeescript thanks to coffee-react-transform.
• Amazing URL-driven-development (UDD) with the react-router project.
• Uses Gulp for building CSS and Javascript. Run gulp watch for rebuilding css/js on the fly while developing and gulp build to create minified versions for deploying to production.
• Includes sensible element stylings and several useful Sass plugins:
  • Susy: best-of-breed grid system.
  • modular-scale: easily create pleasing modular type scales.
  • Sassy Buttons: flexible button styling.
  • Breakpoint: Super simple media queries.

Install dependencies

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 gulp installed globally to run the coffeescript gulpfile: npm install -g gulp

Development

Run in the root of your directory: npm run watch

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!

Production build

To build for production, simply run gulp build

Demo

Try out the example app included with this quickstart: http://kyleamathews.github.io/coffee-react-quickstart/

coffee-react-quickstart's Issues

No ruby version

Any chance for a repo without any ruby dependencies?

Trying to adapt gulp & webpack without using coffeescript

I am trying to replace browserify with webpack in order to get react-hot-loader working in my dev setup. Since I am already using gulp and want to stick with it for production build reasons I found this quickstart, since its also using gulp. I tried to adapt it a little bit in order to match my current setup.

2 Main differences, my development source code lives in "src" and my target of building and then serving with the webserver is "build"

I have attached my current gruntfile and webpack.config:
https://gist.github.com/KeKs0r/78ce47ba2e74c4135fc0

One thing which I see is with my gulp server command, only the webdev dev server command is executed, which somehow is not building my main.js. My main javascript file is only build when using "webpack:build-dev", which is then taking 15s.

I thought the watch command alone should spin up a fully working server. Or do I need to manually build everytime beforehand?

Also when I build manually beforehand I end up in errors in webpack with this command:
if ("production" !== process.env.NODE_ENV)
since process.env is undefined.

jsx files and harmony flag

I cannot require .jsx files (from other projects like material-ui). Am I doing something wrong?
Also is there a way to enable ES6 conversion both for .js and .jsx files? (again, I need this because other packages like flux use it).
Thank you for this great project BTW.

Any plans to support Coffeescript 2.x?

Coffeescript 2 now compiles to ES6, and supports JSX, and much more: http://coffeescript.org/announcing-coffeescript-2/

If anyone wants to take on converting this starter kit to Coffeescript 2, it might be helpful to look at this other starter kit, which already supports it: https://github.com/smith-chris/react-coffee-starter

Create a "lib" directory for non-react coffeescript modules?

Plain coffeescript style?

Should this project also provide examples of how to write without a jsx transform?

e.g.

React = require 'react'
E = React.createElement
N = null
Link = require('react-router').Link
RouteHandler = require('react-router').RouteHandler

# Provides global navigation for app e.g. the "Hello | Styleguide" at the top.
module.exports = React.createClass
  displayName: 'HelloWorld'
  render: ->
    E 'div', N,
      E 'header', N,
         E 'Link', to: "hello", 'Hello'
         '|'
         E 'Link', to: "styleguide", 'Styleguide'
         "| whee" if showWhee
         "#{i} " for i in [1..10]
         E 'RouteHandler'

Misc changes to make

• variables scss file
• trigger reloading css when scss build finished
• include empty main.css so webpack doesn't error when trying to require it https://github.com/isaacs/node-touch touch.sync

Webpack's reload is broken.

Just tried installing it locally/fresh and it seems like reloading on changes to .cjsx files is broken. I've had to re-run npm start to see changes.

Add react-router w/ basic routing

E.g between the readme + styleguide

Move index.html to an assets directory

The gulpfile should be modified to just copy everything in assets straight over to public.

There is a problem with npm install when using node 4.x

The bug is in contextify, and I worked around the problem with the help of this comment:

brianmcd/contextify#180 (comment)

I opened this in case anybody else comes across this problem.

When this bug is fixed and a new release made, this issue should be closed.

Integrate react-hot-loader

question: is there a reason you compiled sass using gulp

Is there a specific reason why you preferred building css using gulp instead of the webpack? or your implementation of cannot be done on webpack?

missing server.coffee

Hi,

I took the server.coffee from your flickr example and it works nicely here, but right now npm start will fail since it's not in this repo. Just a note that you probably want to move it over.

Thanks so much for this code, it let me dive into the deep end of react / coffeescript.

Might I need to add a file loader?

Do images seem to work just fine for you? If so, I’ll do more investigation…

ERROR in ./src/images/sprites@2x/icons-s91a7691adc.png
Module parse failed: /Users/username/Repos/guidebook/gears3fe/src/images/sprites@2x/icons-s91a7691adc.png 
Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/css-loader!./public/main.css 2:40778-40842 2:41665-41729 2:42557-42621 2:43452-43516

Add form css + example to styleguide

Having trouble integrating React.Backbone into this version

Hey Kyle,

I updated my code to match yours, but can’t seem to include React.Backbone into the project anymore. This worked just fine with the ~ July 11 version of quickstart.

Help/thoughts welcome (although certainly not your responsibility — sorry if this issue is in poor form)

Check out this branch to see the problem. And note that React 0.11 seems compatible with React.Backbone.

You may remove NoErrorsPlugin with React Hot Loader 1.3.0

React Hot Loader 1.3.0 fixes a problem that caused NoErrorsPlugin to be necessary. In fact now errors thrown on module level shouldn't prevent future hot reloading of the same file after you fix the problem.

Please update to RHL 1.3.0, and remove NoErrorsPlugin from Webpack configuration.
Thanks!

Add styleguide

Based on http://bricolage.io/styleguide/

CSS replacement doesn't work

If I run "gulp watch" and then edit any of the SCSS files, the edits do not come through until a cjsx file is edited

Radness.

Just wanted to let you know that after weeks of searching, this is the only boilerplate that actually hotloads react and injects css. Fantastic work, dude.

Move product webpack settings out of the gulpfile to a webpack.production.config.js file

Support CSS sourcemaps during development

The autoloader seems to be breaking CSS sourcemap support.

I'm not sure it's possible actually with the default css loader :(

See webpack/webpack#214

Perhaps we could write a custom loader that pulls in both the compiled css + its generated sourcemap.

See also, the inline approach:
appleboy/gulp-compass#63