This lesson will go over the new jsbundling-rails gem and some of the pros and cons of using this gem. The role of jsbundling-rails is to provide installers to set up esbuild, rollup, or webpack to allow bundling. After your bundler of choice is set up, your bundled output will use
app/assets/builds to hold the bundle output at which you can refer to it using the standard asset pipeline approach.
- How to use a bundler with an import map based Rails app.
- Understand why you might decide to use JS bundling.
- Why you would use JS bundling over import maps.
- Some of the downsides of using JS Bundling.
- Why Webpacker was used for Rails 6.
- What are the JS bundling options.
Before we introduce utilizing jsbundling-rails let’s introduce a powerful new command with yarn.
yarn build --watch
rails server in another terminal as well. You will notice when you enter the command that the program will still be running and say
[watch] build finished, watching for changes....
./bin/dev which will start the
yarn build --watch and
rails server at the same time. That means not having to switch between terminal windows for developing. In development mode the command
First ensure that you have Yarn and Node installed. Run
yarn -v and
node -v in the terminal. Both of these should return a number indicating the version.
rails new testapp
Add the jsbundling-rails gem to your Gemfile.
Then run the command below in the terminal within your Rails application folder.
Remember the three options for the bundler are esbuild, rollup and webpack and you pick only one.
You should now see this error and a few other ones but don’t fear!
It’s quite explicit in the issue. Resolve is just a fancy word for saying the bundler wasn’t able to do anything with this import. Which makes sense as our testapp was set up initially with import maps instead of with esbuild or another bundler. Now let’s see if we can resolve this in our
yarn add @hotwired/turbo-rails
Now let’s run the build command.
yarn run build
The error is gone which means esbuild was able to resolve it since it was properly formatted. However that still leaves the
✘ [ERROR] Could not resolve "controllers". Let’s see if we can solve that too! Remember what we said earlier about this error
✘ [ERROR] Could not resolve "@hotwired/turbo-rails". We need to download the appropriate package so that esbuild can bundle it. Go ahead and enter the command below!
yarn add stimulus
Now let’s run
yarn run build in the terminal. Woah! We still get the error below despite adding the stimulus package for esbuild. What gives?
Remember we ran this with import maps so the setup is different. Let’s go back into our
import "./controllers" to
Now when we run
yarn run build we should get the proper outcome! Now that we have walked through how to install a Rails app with import maps let’s make our life a little bit easier and set it up with jsbundling-rails!
Go ahead and enter the below command.
rails new myapp -j <replace the text and <> with your bundler choice>
Let’s walk through an example with esbuild. In the terminal entering this command will start the Rails app creation process.
rails new bundling -j esbuild
When running the build app you will see different output than the output shown in the Rails installation lesson. You should see something like this at the end.
info email@example.com: The CPU architecture "x64" is incompatible with this module. [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 1 new dependency. info Direct dependencies └─ @firstname.lastname@example.org info All dependencies └─ @email@example.com
A key difference here is that within the terminal output you will see more output as well as that info output from esbuild as this command is ran. Let’s take a look at the results for our Rails application.
package.json file that is where our script build is kept. Here you will see the command that was run by Rails when building app. Going into the
index.js file. That command is
With that you will be able to add your controllers to the bundling process and use them. However make sure you run this command or else not all controllers will be included.
yarn add bootstrap
You would then be able to reference it within your pack file and now be able to use it!
While you may come across this in the wild it is important to note that Rails 7 does not use it any longer and replaces it with jsbundling-rails. If you want to use bundling make sure to use one of the bundlers listed earlier in the lesson.
This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.
This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.