Rails 7: Options for Bootstrap, Turbo, Stimulus, and React and How to Load Javascript in Rails 7

Intermediate

Rails


For getting Bootstrap to work with Rails 7, you need to choose between ImportMap, JSBundling Rails, CSSBundling, and Shakapacker.

Start by choosing whether you want ImportMap-Rails, JSBundling, CSSBundling or Shakapacker app.

HOW DO I CHOOSE BETWEEN IMPORTMAPS, JSBUNDLING, and SHAKAPACKER?

ImportMapsJSBundlingShakapacker
Pros• Newest paradigm.

• Quickly/easily add importable JS to your app.
• Default for Rails 7
• Can use ESBuild, Webpack, or Rollup as the compiler.
• Can use ESBuild, a faster alternative to Webpack.
• A good, quick way to use node packages via Node Package Manager or Yarn.
• A good, quick way to get Typescript or JSX compiling with Babel.
• Offers a complete deployment & development pipeline for developing with Typescript and React (including JSX)
Cons• Only works for importable JS (Javascript or Typescript written as ES Modules.)
• Does not bundle or build compiled javascript (like something you would compile with Bable, e.g. Typescript/React)
• Does not offer a complete solution for building images within React or React-on-Rails apps.
• A complex tree of node dependencies can make your app unwieldy.
• Uses Webpack which is can be slow to compile with many npm dependencies.
• A complex tree of node dependencies can make your app unwieldy.

DO I WANT IMPORTMAP for my Rails 7 app with Bootstrap?

YES?

Rails 7: ImportMap-Rails with Bootstrap, Stimulus, Turbo (Long Tutorial).

Rails 7: ImportMap-Rails with Bootstrap, Stimulus, Turbo, (Quick Setup)

NO?

Want JSBundling instead? See Up & Running JS Bundling.

If you want Shakapacker, Shakapacker Setup.

Can I use Bootstrap or Tailwind with any paradigm?

Yes, Bootstrap or Tailwind will work with either ImportMap-Rails, JSBundling, or Shakapacker.

Can I use Turbo with any paradigm?

Yes, Turbo will work with either ImportMap-Rails, JSBundling, or Shakapacker.

Can I use Stimulus with any paradigm?

Yes, Stimulus will work with either ImportMap-Rails, JSBundling, or Shakapacker.

How much should I use the asset pipeline, Sprockets or Propshaft?

The asset pipeline (sprockets) remains the default Rails deployment paradigm for loading CSS through the stylesheet_link_tag Rails helper in your layout file, even through Rails 7.0, although it is being phased out in favor of Propshaft.

However, if you have a more React-style application tree with styles defined inline or in your JS code, you can use that paradigm instead if you are using Shakapacker.

Starting with Rails 7.0, you can upgrade from Sprockets to Propshaft, the next generation of Rails asset pipeline.

Can I use React and TypeScript with any paradigm?

No, React and Typescript will not work with ImportMap-Rails. Typescript can be easily added to a JSBundling app, as long as you add the Typescript watcher and reconfigure your Yarn script.

With modification and significant configuration, you can get React to work with JSBundling, but out of the box, it lacks the ability to smoothly pull in assets. Shakapacker comes ready to go for including assets in Javascript, works in tandem with the react-rails gem, and is an ideal React & TypeScript development environment on top of Ruby on Rails 7.

What if I have an API-only Rails app?

Then none of this matters because you do not need a frontend paradigm of any kind.

7 thoughts on “Rails 7: Options for Bootstrap, Turbo, Stimulus, and React and How to Load Javascript in Rails 7

  1. Bootstrap 5 no longer requires jQuery to function. Following instructions above for CDN, it will work with or without pinning jQuery!

    Great article!

    1. thank you I fixed this to remove jQuery and clarify. thanks for the feedback!

  2. Although popperjs/core is pinned there’s no mention of pinning just popper Shouldn’t popper be pinned to something?

Comments are closed.