Step-by-Step Guide to Install Bootstrap in Rails 7

The advent of Rails 7 has brought a myriad of new tools to the disposal of developers. One such indispensable tool is Bootstrap, which can significantly expedite the app development process. This comprehensive guide will aid you in assimilating Bootstrap into Rails 7, be it for a new project or an existing one.

There exist two predominant methods for Bootstrap implementation. However, it should be noted that the latter doesn’t function flawlessly as expected.

Method 1: Fresh Start

If you’re initiating a new project, the procedure is rather straightforward. The flags “-j esbuild –css bootstrap” can be used to effortlessly incorporate Bootstrap and Javascript bundling in a new Rails 7 application, an approach that operates flawlessly.

This method installs both the “cssbundling-rails” and “jsbundling-rails” gems, generating the necessary configuration. Consequently, you’ll have a functional system with both CSS and Javascript working via esbuild.

Method 2: Established Project

For projects originally built with import maps (the default in Rails 7), the switch to Bootstrap and a Javascript bundler like “esbuild” isn’t as seamless. The initial step involves the installation of the CSS bundling-rails gem and leveraging the installer that the gem provides to generate the necessary configuration.

bundle add cssbundling-rails

./bin/rails css:install:bootstrap

The installer performs various tasks including creating a builds folder, linking it in the manifest file, and removing the application.css file, among others.

Despite these efforts, using a Bootstrap component like the Navbar may still present issues, like non-functional drop-downs, due to the absence of a Javascript bundler setup. This is where the “jsbundling-rails” gem and “esbuild” bundler come into play.

$ esbuild app/javascript/*.* –bundle –sourcemap –outdir=app/assets/builds –public-path=assets

✘ [ERROR] Could not resolve “controllers”

    app/javascript/application.js:3:7:

      3 │ import “controllers”

        │        ~~~~~~~~~~~~~

        ╵        “./controllers”

Use the relative path “./controllers” to reference the file “app/javascript/controllers/index.js”.

Without the leading “./”, the path “controllers” is being interpreted as a package path instead.

1 error

node:child_process:866

    throw err;

    ^

Error: Command failed: /Users/cezar/Work/ror/bootstrap/node_modules/esbuild-darwin-arm64/bin/esbuild app/javascript/application.js –bundle –sourcemap –outdir=app/assets/builds –public-path=assets

    at checkExecSyncError (node:child_process:828:11)

    at Object.execFileSync (node:child_process:863:15)

    at Object.<anonymous> (/Users/cezar/Work/ror/bootstrap/node_modules/esbuild/bin/esbuild:209:28)

    at Module._compile (node:internal/modules/cjs/loader:1099:14)

    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)

    at Module.load (node:internal/modules/cjs/loader:975:32)

    at Function.Module._load (node:internal/modules/cjs/loader:822:12)

    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)

    at node:internal/main/run_main_module:17:47 {

  status: 1,

  signal: null,

  output: [ null, null, null ],

  pid: 94418,

  stdout: null,

  stderr: null

}

Node.js v17.8.0

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

However, some leftover code from import maps may cause compatibility issues with the “jsbundling-rails” gem.

Installation Resolution

To rectify these issues, the first step is the installation of the “turbo-rails” and “stimulus” packages.

yarn add @hotwired/turbo-rails

yarn add @hotwired/stimulus

The import path in the “application.js” file is then adjusted and the old stimulus imports removed. 

— a/app/javascript/application.js

+++ b/app/javascript/application.js

-import “controllers”

+import “./controllers”;

— a/app/javascript/controllers/index.js

+++ b/app/javascript/controllers/index.js

-import { application } from “controllers/application”

–

-// Eager load all controllers defined in the import map under controllers/**/*_controller

-import { eagerLoadControllersFrom } from “@hotwired/stimulus-loading”

-eagerLoadControllersFrom(“controllers”, application)

–

-// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)

-// import { lazyLoadControllersFrom } from “@hotwired/stimulus-loading”

-// lazyLoadControllersFrom(“controllers”, application)

+import { application } from “./application”;

Other modifications include removing the “javascript_importmap_tags” helper from the application layout file since it’s no longer needed and unlinking the other javascript folders, leaving only the “builds” folder and the images folder in the manifest.

— a/app/assets/config/manifest.js

+++ b/app/assets/config/manifest.js

 //= link_tree ../images

-//= link_tree ../../javascript .js

-//= link_tree ../../../vendor/javascript .js

 //= link_tree ../builds

Now, when observing the Navbar in the browser, it appears the same, but the drop-downs are functional.

Summary

In conclusion, the integration of Bootstrap in Rails 7 can greatly enhance your app development process. Despite some initial hurdles with established projects, this guide demonstrates that with the right commands and troubleshooting, the Bootstrap-Rails 7 combination can be an asset to developers.

Leveraging the advantages of these tools can pave the way for the creation of more dynamic, responsive, and user-friendly web applications.