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?

	ImportMaps	JSBundling	Shakapacker
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?

If you have an API-only Rails app, you’ll have to decide if you want to deploy React (or your other frontend framework) on top of Rails or separately from your Rails app. “On top of” means your React code lives inside your Rails app folder (in app/javascript/), and gets deployed along with your Rails app. This is generally the best strategy for React-Rails apps.

Alternatively, you can deploy your React app completely separately from your Rails app, but this setup involves a lot of headaches around (1) timed deployments, (2) lack of end-to-end testing options, and (3) getting the CORS settings right. The headaches involved in split deployments are typically not worth the cost.