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 packs folder. 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
Top comments (0)