yes, i think that allows webpack use globally jQuery. but heroku assets:precompile error.
it working at my pc, i don’t know why.
should i add every library used in webpack.config.js to “dependencies” ?
e.g.
"dependencies": {
...
"babel-core": "^5.4.5",
"babel-loader": "^5.1.3",
"imports-loader": "^0.6.3",
"jquery": "^2.1.4",
"webpack": "^1.9.7"
...
},
@geminiyellow I think you’ve got some more debugging to do. We definitely publish the tutorial to heroku, so that’s fine.
You have a mistake in the article:
If you though Live Reload was cool, you’ll love this feature.
I think i should be ‘thought’.
Hi – Thanks for doing this! It’s quite a setup, and it almost works.
With the default settings, I get proper JSX compilation, except it doesn’t compile javascript generators to ES5 code. This works fine with Chrome, but fails with Safari.
I’m trying to move a project over from react-rails, which uses the “regenerator-runtime” code to allow generator use with ES5.
Any clues on this?
Thanks!
@YAChris Please check out https://github.com/shakacode/react_on_rails/. We’re making this way easier.
Also, be sure to follow the examples in https://github.com/shakacode/react-webpack-rails-tutorial/.
Hey Justin – thanks much! It’s working fine now. You guys rock! Keep up the good work!
Ha ha, oops, I lied, it doesn’t work. Turns out that there is some other code which is putting generators into the output, and I can’t figure out where they’re coming from (it’s not my code). Any clue on how to find out where (say) section 215 of the app/assets/javascripts/generated/client-bundle.js file comes from?
Hi @justin
I have one question regarding the last paragraph in https://github.com/shakacode/react-webpack-rails-tutorial#build-jscss-bundles. It says:
Observe how the bundles are automatically re-generated whenever your JSX changes.
But I can’t find the code that automatically re-generates the bundle or that automatically calls npm run build:dev. Can you please give me some advise on how to understand this?.. I know how the hot-module-reload works when requesting directly the Webpack Dev Server but not sure about how the bundles are automatically regenerated whenever I change the JSX
The other question I have is, how should I manage I18n? … Is there a way to integrate Rails I18n into this React+Webpack+Rails integration?
@hisa, Good questions!
During development, the Procfile.dev starts it off:
web: rails s -p 4000
client: sh -c 'rm app/assets/javascripts/generated/* || true && cd client && npm run build:dev:client'
server: sh -c 'cd client && npm run build:dev:server'
hot: sh -c 'cd client && npm start'
Then you look into the
https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/package.json#L30
"scripts": {
"build:dev:client": "webpack -w --config webpack.client.rails.config.js",
"build:dev:server": "webpack -w --config webpack.server.rails.config.js",
Note that webpack is called with option “-w” which means “watch”
That’s a great question. I’m guessing, not having done it with this setup, that you could do something like this:
We’d love to see a pull request example of how this can be done.
I created an issue to track this idea: Demonstrate how i18N could work with webpack and rails · Issue #120 · shakacode/react-webpack-rails-tutorial · GitHub
Thx for pointing me about the -w @justin.
About the I18n I was thinking that maybe a good approach would be to write a railsi18n-loader for Webpack that can read/load the config/locales/*.es.yml files (or any .yml file). I’d love to write it but currently I don’t have the time because of a project we just started, using the react_on_rails gem 
I hope I can contribute at least with ideas if not with code based on our experience using the gem.
Are there any common gotchas or setup problems with HMR that I should know about. I haven’t attempted any extensive debugging just yet, but I’ve installed, and reinstalled, the react-webpack-rails-tutorial from scratch with no modifications, and I can’t get the hot module replacement to work. Are there any browser dependencies I should know about? Common environmental problems?
The watcher recognizes the changes and rebuilds the bundle, but the browser isn’t responding. I’m not sure what to be looking for in the server logs (outside of the webpack rebuild) to indicate this is working. Any help would be greatly appreciated.
Be sure to be using https://github.com/shakacode/react-webpack-rails-tutorial, and start by using Procfile.hot.
Take a look at this.
HMR is in a lot of flux.
Hot Reloading in React
or, an Ode to Accidental Complexity: Article by Dan Abramov that sums up the issues.
Hi Shakacode community,
we were trying to get rails + react + webpack working within Docker (prod + dev env), do you guys have a best practice for this?
using react_on_rails but to few knowledge in webpack got super confusing and so we put it on hold (asking us if it is the right approach)
But trying two docker container (rails and webpack) with a shared volume where webpack compiles the bundle.js and rails can just use it, does not run yet either.
I googled everything so far for any best practice solutions but it seems as nobody has done that yet (until the end!1) which I can not believe. Docker + Rails + Webpack + React seems to be a perfect synergy.
Thank you for any respond,
Bjoern
1 note: there is a great tutorial from Kevin Robinson out there but it doesn’t go far enough for us.
@justin, wow thanks for such a fast reply!
Main issue to get rails, react and webpack running in a development docker container.
using the react-webpack-rails-tutorial. We tried to setup the whole app within docker. Unfortunatly we do get a:
"FATAL: Listen error: unable to monitor directories for changes."
Fixing via echo fs.inotify.max_user_watches=524288 | tee -a /etc/sysctl.conf && sysctl -p and using foreman start -f Procfile.static didn’t fix it.
using two docker container (webpack && rails app): we get swagger-ui.js?12e9:9Uncaught ReferenceError: Handlebars is not defined. Fixing via var Handlebars = require('handlebars/runtime.js'); or var Handlebars = require('handlebars'); does not solve the issue.
So again, the question is more for finding the best framework to setup a react + rails + docker application.
Thank you for any wing in the right direction.
best, bjoern
Can you please copy your question and result to a brand new topic?
I tend to use Heroku, so I really can’t help you with Docker advice. However, if you document your question well, I bet we’ll get you an answer.
I also suggest posting to Stack Overflow.
BTW, are you using handlebars instead of React?
