Post

Video Summary: How to use Bootstrap with CSSBundling Rails (GoRails, Chris Oliver)

Posted Updated
By Mitch Craver 2 min read

This post is a video summary post from Chris Oliver at GoRails.com. In this video, Chris walks through using esbuild and CSSBundling with Bootstrap in Rails 7. I found this super helpful when getting started with Rails 7 in a webpacker-less life.

To get thing started off, run this command in the terminal (replacing [app_name] with the name of your app for testing):

1

rails new [app_name] -j esbuild --css bootstrap

The -j flag is used to specify the JavaScript bundler and the -css flag specifies the CSS framework you want to use.

Package.json

The package.json file contains two new additions:

  • esbuild setup in “scripts” section to compile the JavaScript
  • sass command that compiles the bootstrap css file

Procfile.dev

The procfile.dev file is the new way of running your Rails app with CSS and jsbunding (runs rails server and yarn command via the foreman gem to build your CSS and JavaScript)

Now, instead of just running the rails server all by itself, all three of the commands found in the Procfile will run at the same time. This is accomplished by running bin/dev instead of rails server.

Stylesheets

App > Assets > Stylesheets > application.bootstrap.scss imports bootstrap (standard sass import)

The Builds directory is the final directory where the js files will be housed.

In the terminal, running yarn run build:css runs the sass command that will compile the CSS file. It outputs the file to the App > Assets > Builds folder as application.css. Open the file and take a look–all of the CSS has been compiled and included in this file.

Checking Boostrap Compilation

Copying some sample code from the Bootstrap docs, you will find that the CSS is applied to the page and the JavaScript functions as expected. Chris used the navbar example. When the button in the navbar was clicked, the dropdown menu works right away.

Some of the bootstrap features do not work out of the box. Chris talks about the tooltip JavaScript functionality. Adding an event listener in JavaScript that watches for “turbo:load” and the code snippet from the tooltip doc page fixes this issue.

As a bit of final “testing”, the viewport meta tag is added so that the browser can share its breakpoints in order for the CSS responsiveness to kick in.

Website References

video-summary, rails
ruby rails css-bundling esbuild GoRails
This post is licensed under CC BY 4.0 by the author.