After building a pretty big project with Meteor and React, I feel like this is a kickass combination that really deserve a lot of attention. However, there were a bunch of things that deeply bothered me:
- REALLY slow rebuild everytime I change something in any React component (I do SSR so maybe it was hurting while developing)
- Every React component were global variables (really?.. no comment)
- I was losing the state of my component on reload
- Everytime I wanted an NPM library I needed to wrap it with browserify to work both on client and server
I really feel like we should get a better control over the Meteor build. One little tool that can fix this is webpack:
- It has a really fast hot module reload
- It allows you to bundle modules using import/require so no more global variables
- You can bundle it with any NPM module
- You don’t loose your state
- You can get an awesome red box with the error that happened inside your component and as soon as you fix it the page work again with no refresh (most of the time)
I know somebody else made a project with webpack and hot-reload but I felt like it was a lot hackish. I took the opportunity of the new hot loader Dan Abramov did for Webpack (react-transform-webpack-hmr) and thew a new package:
If you would like to try it, go at https://github.com/thereactivestack/meteor-webpack-react-kickstart and all you need is clone the git to get started. You will be surprised how simple the boilerplate code is.
Let me know what you guys think of it. I feel like it should be more integrated within Meteor but I can go as far as it allows me to. However, I think it is key to keep an absolute control over the Webpack config. How do you guys think Meteor should handle this?