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!
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)
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
- Install Babel Core
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.