Upgrading old Rails 4.0 to Rails 6 with webpacker and React.js

It has been a while since I worked with ruby on rails… for the past couple of years, my main focus programming language is javascript. Node.js in the backend, and React on the frontend. so let’s start how we update our old rails app into the latest Rails app with React.

1. Upgrading Rails

update your rails version inside Gemfile:

gem 'rails', '~> 6.0'

and run bundle update rails

2. Setup Webpacker

In your Gemfile

# Gemfile
gem 'webpacker', '~> 5.x'

then run:

bundle && bundle exec rails webpacker:install

Once your webpacker is setup. you are ready to put the bundle pack, you can say a pack is the entry point of your main js file. so all the js file required by rails views should be put inside packsfolder. and put inside your views /layouts/application.html.erb

<%= javascript_pack_tag 'application' %>

by default, this will refer to /app/javascript/packs/application.js, you can change this path inside webpacker.yml by changing the source_entry_path

3. Setup React with Webpacker

initialize react application with webpacker :

rails webpacker:install:react

it will install all related dependency using yarn

4. Build your React Component

I prefer to mount all my component into a single div, so I put empty div inside my /layouts/application.html.erb

<div id="root"></div>

then inside my packs/application.js

Done, and you ready to go build your React app inside Ruby on rails application