search

KyleAMathews / coffee-react-quickstart

Quickstart for building React single page apps using Coffeescript, Gulp, Webpack, and React-Router
http://kyleamathews.github.io/coffee-react-quickstart
MIT License
254 stars 41 forks source link

Radness. #17

Closed VinSpee closed 9 years ago

VinSpee commented 9 years ago

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.

KyleAMathews commented 9 years ago

Lol! Hope it's helpful.

FWIW, I recently saw this compilation of starterkits so there are a handful of others if perhaps Coffeescript isn't your thing: https://docs.google.com/spreadsheets/d/1LoHsCf9F3cqgBzFtMthyVU56xnjexM5vigkmh2yWiJU/edit#gid=0

VinSpee commented 9 years ago

It's really helpful. I'll probably fork it and pop in postcss instead of sass, and break it up a bit / strip coffeescript out for my own use. How did you figure out to use map to plop the CSS back into the webpack stream? Nice solution.

KyleAMathews commented 9 years ago

Cool — just ran across postcss today actually. Looking forward to see what you come up with!

I'd seen/used the map trick in other gulp projects so was familiar with the idea. I was frustrated with Webpack not playing nice with other css processors so when I saw you could manually invalidate Webpack's cache, using map to invalidate Webpack immediately jumped to mind.

VinSpee commented 9 years ago

I'm trying to break this out into seperate files (ala https://github.com/vinspee/projectologist), but I'm having trouble figuring out how to share the devServer instance between the styles.js file (containing the styles task) and webpack.js (containing the webpack dev server task). Any ideas?

KyleAMathews commented 9 years ago

Put it in a separate module and require it?

VinSpee commented 9 years ago

Yeah, I tried that, but I think maybe gulp runs tasks in different processes or something? What exactly would go in the module, just an empty object?

— Sent from Mailbox

On Wed, Nov 12, 2014 at 7:38 PM, Kyle Mathews notifications@github.com wrote:

Put it in a separate module and require it?

Reply to this email directly or view it on GitHub: https://github.com/KyleAMathews/coffee-react-quickstart/issues/17#issuecomment-62822002

KyleAMathews commented 9 years ago

Create devServer and assign module.exports to it.

VinSpee commented 9 years ago

Here's my initial whack. CSS reloading still doesn't work. No idea why. It even triggers the "invalid" state, but doesn't inject the new css. https://github.com/VinSpee/webpacker any thought?

VinSpee commented 9 years ago

ehh i figured it out. I wasn't including my main stylesheet as an entry. lol.

KyleAMathews commented 9 years ago

Very nice looking changes! I might have to borrow some of your ideas :)