I absolutely busted my first Proof-of-Concept rails application because I integrated React after the initial project start and webpacker was new to rails and I had no idea what was going on. I put the project on hold and moved down other avenues on the infrastructure side. This post covers me going back into the project and adding react to the older Rails project. I ended up having a few issues, but overame them and still actively develop within this project.
Newer versions of Rails come out of box with webpacker. Thank you DHH.
Someone wrote a medium post about integrating react into a rails 5.0 project, and I found it helpful as I myself was in a similiar situation. I have since upgraded to Rails 6.0.0 and haven’t had any problems with integrating react!
Why Webpacker
I saw webpacker as a necessary tool for managing Javascript packages within my Rails applications as well as it was being pushed by the rails developers. Webpacker allowed me to install React with ease compared to my last rails project where I used a gem to manage my React version. The react-rails gem caused too much trouble for me and I knew it would be easier to manage packages with webpacker instead.
Getting Familiar with Webpacker
Webpacker & Containers & Configuring the Container
In a development environment RAILS_ENV=development ./bin/webpack-dev-server for the development environment front end compiler with the RAILS_ENV=development rails s command to run the rails server.
Compiling was broken for a bit, but I got it configured with an NPM install of some updated babel libraries. My application didn’t like two version of Babel (v6 and v7). This continues to raise the occasional error.
This Babel Parsing Errors SO link got me all configured with mismatched babel versions and fixed my application environment. Getting more into my development environment, I reinstalled webpacker on my MacOS with rails webpacker:install and webpacker-rails with rails webpacker:install:react. Installing react on the older rails application was somewhat of a mess and I ended up spending a massive amount of time configuring the .jsx and react parts, but it was worth it to add react to a part of the application where jQuery would have been just as good. (LOL)
Image
I still haven’t configured the docker image, but right now it is currently broken. I shouldn’t have as many problems with the image now that I have my development environment configured. Most of the configuration with the image is ensuring the correct commands are run and libraries are installed.
Links While Debugging
- https://github.com/rails/webpacker#webpack-configuration
- https://webpack.js.org/guides/getting-started/
- https://github.com/rails/webpacker/blob/master/docs/troubleshooting.md
- https://samuelmullen.com/articles/embracing-change-rails51-adopts-yarn-webpack-and-the-js-ecosystem/
- https://github.com/rails/webpacker/issues/2024#issuecomment-483376636
- https://github.com/rails/webpacker/blob/master/docs/troubleshooting.md#cant-find-hello_reactjs-in-manifestjson
- https://webpack.js.org/concepts/manifest/
- https://github.com/rails/webpacker#custom-rails-environments
- Install Babel Core
- https://medium.com/react-on-rails/free-tutorial-how-to-use-react-with-webpacker-and-rails-5-1-92af8e8d9d63
- https://stackoverflow.com/a/53603695
Update
The proof-of-concept that I “busted” is now back in line and on track with where I wanted it to be. The development environment was configured properly and everything is looking good.