Upgrade Ruby on Rails Project 101 — Phase 2 (Webpack)

My strategy of upgrade Ruby 2.6.6 => 3.0.2 and Ruby 5.2 => 6.0.

Special thanks for my cloud team member yun-tai, who did upgrade the RoR project with webpack and note everything at wiki.

In first phase we tried to upgrade for api only server, how if we have a view and need to use the webpack? (Because at Rails 5 the view doesn’t default support the webpack.)

But for Rails 7, the webpack has been retired. So sad.

Before we started, you can learn the Asset Pipeline to webpack by the articles below:

如何在 Rails 使用 Webpacker（上） | 高見龍

From the Asset Pipeline to Webpack

Step 1: Configuration

Add the webpacker in the Gemfile and bundle install it.

Add webpacker gem.

If you want to use any front-end framework, you can also install it.

Install the gem

Modify Some Settings

At the file app/views/layout/application.html.erb, webpack default has only one entrypoint, it means only ths one javascript_pack_tag. Other javascript_include_tag you can remove when you done with asset pipline or add entrypoint by your self.

Add foreman and Procfile

Our view is packaged by webpack, we can start the rails server and webpack-dev-server at the same time.

what webpack-dev-server to do is monitor the js file changed and complie.

Add foreman gem and install it.

Add Procfile

web and webpack name you can choose any you want. webpack default start and listen at the 3035 port, so only development environment need it. (preparing and production environment will compile before at deploy).

Start the Procfile

Warning: Using foreman, you can not use the binding.pry for debug.
Tips: Can setup multi Procfile file, ex: Procfile.dev. when start the project, just using the command foreman start -f Procfile.dev.

Step 2: Migration Custom Assets

Modify Folder Structure

We will move all asset file at origin asset folder to the javascript folder. You can reference official guide how to move them.

At application.js , add some import and export script we used.

We use export at here because in this project we customize many js files are independent (use for some view only), export them for all project to use.

For example:

common.js

_menu.html.erb

logout() function is not the global when packaged by webpack, so we need to do some slightly modify.

Add environment.js for export

Modify the common.js file to export the function

Export the common.js function

Modify _menu.html.erb file.

Modify _menu.html.erb

Combine the Ruby and Javascript, export all the js module at the index.js.erb file at the image folder and the stylesheet folder.

Modify index.js.erb at image folder

Modify index.js.erb at stylesheet folder

If the project using the SCSS, you can add a application.scss file to arrange all of them.

application.scss

Step 3: Migration 3rd Party Packages

Before we are not use the webpack for asset pipline, all the js packages are installed by gem. For webpack install, we need to checkout to use original js packages (here I choose jquery package for example).

It really annoys at this step.

Basic Rails Package

We can use the rails script and the package will auto change to javascript script.

In the application.js import and start them.

application.js

jquery

To let all js files applied jquery script (e.g. $ , jquery), we need to add some settings at application.js and environment cofig files.

application.js

environment.js

jquery-ui

This package is using for date picker.

yarn add jquery-ui

Add settings at application.js and application.scss .

application.js

application.scss

bootstrap-sass

bootstrap-sass is earlier Rails used for bootstrap package. Theoretically now the webpack can easier use bootstrap 4 / 5 for packaging. but style has a little different, so finally we decide install the bootstrap-sass .

yarn add bootstrap-sass

Add settings at application.js and application.scss .

application.js

application.scss

jquery-migrate

bootstrap-sass and newest jquery is not fully compatible, need to use jquery-migrate package to resolve the problem.

yarn add jquery-migrate

Add settings at application.js .

application.js

Step 4: Remove Unnecessary Elements

Remove unnecessary make you project not too fat. Here is some elements you may deleted.

• app/assets folder
• Gemfile frontend gem, and related config file, like: sass-rails , uglifier , turbolinks and bootstrap-sass .
• Some of js function at app/views.

Step 5: Modify Dockerfile

If your project deploy by docker image, you need to add some layers, for example:

Dockerfile