kyleamathews/coffee-react-quickstart

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

coffee-react-quickstart's Issues

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

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

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

Add react-router w/ basic routing

E.g between the readme + 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.

Integrate react-hot-loader

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

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.

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

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?

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.

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!

No ruby version

Any chance for a repo without any ruby dependencies?

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'

Add styleguide

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

Add form css + example to styleguide

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

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.

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

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.

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 index.html to an assets directory

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

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.