Rails 6 and jsbundling

In the future, there will be several ways to handle javascript in rails. If Rails 6 is in use, importmap is not available. It requires Rails 7. Therefore, jsbundling would be the best choice in general. Here are steps to create new Rails 6 application with jsbundling without webpacker.

Let’s start a new application without javascript

rails new test_app --database=postgresql --skip-javascript

Since there is no javascript, just run rails s to start the application. Once it works, we can add jsbuilding into Rails by following the instructions:

1. Add jsbundling-rails into Gemfile
2. run bundle install
3. run bundle exec javascript:install:esbuild

It creates manifest.js, application.js and even Profile.dev and install foreman.

For some reasons, I need to add build command to package.json myself like this:

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "esbuild": "^0.13.8"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --outdir=app/assets/builds"
  }
}

If you have an existing application to upgrade, you can replace webpacker gem with jsbundling-rails. And remove the following npm packages:

> yarn remove webpack-cli
> yarn remove webpack
> yarn remove @rails/webpacker
> yarn webpack-dev-server

You need to move app/javascript/pack/application.js to app/javascript/application.js. If it complains that it cannot find controllers, replace it with ./controllers inside app/javascript/application.js

You also need to remove javascript_pack_tag from application layout.

If you have ActionCable installed, chance that app/javascript/channels/index.js will failed due to lack of require.context from webpack. You can comment them out. You need to load the channel manually and I do not know a good solution yet.

You can also read this article, which includes setting right buildpack for heroku.