How to install jQuery and bootstrap in rails 7 app using esbuild (without webpacker)

Question

I'm trying to create a rails app by installing bootstrap and jQuery. First I tried to create using

rails new name--css bootstrap

But its not working. So I did it with it manually.

I tried also using esbuild but at the case of printing in console it is not working. Here is a YouTube link which I tried.

So question is how to install jQuery in rails 7 app without using webpacker

The issue is that now bootstrap and JavaScript are working but not jQuery.

Here is my files looks like

// app/assets/stylesheet/application.scss

@import "bootstrap-sprockets";
@import "bootstrap";

// app/javascript/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap.min
// require turbolinks
//= require_tree .

# Gemfile

gem 'bootstrap-sass', '~> 3.3.7'
gem 'jquery-rails'
gem 'sass-rails'

After all these created a controller and add some basic bootstrap, JavaScript and jquery codes to test is it is working or not, but both the JavaScript and bootstrap are working. jQuery is working when adding ajax.googleapi link to the HTML page. But that's not a good practice to do.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

So question is how to install jQuery without using webpacker in rails 7 app.

And also tried to install by using

rails new app -j esbuild --css bootstrap
yarn add jquery

But it still not working in my case. Do any one have the solution

Answer 1

Here is a clean solution, based on this bootstrap tutorial. I used the same principle to add jquery. Sprockets is used for css files, and importmaps for js. Webpacker, node, yarn, etc. are not needed.

In Gemfile:

gem "jquery-rails"
gem "bootstrap"
gem "sassc-rails"

In app/assets/stylesheets/application.scss (note that the file suffix should be .scss, not .css; change the suffix if needed):

@import "bootstrap";

In config/initializers/assets.rb:

Rails.application.config.assets.precompile += %w( jquery.min.js jquery_ujs.js bootstrap.min.js popper.js )

In config/importmap.rb:

pin "jquery", to: "jquery.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true
pin "popper", to: "popper.js", preload: true
pin "bootstrap", to: "bootstrap.min.js", preload: true

In app/javascript/application.js:

import "jquery"
import "jquery_ujs"
import "popper"
import "bootstrap"

Install the gems, clobber the old assets, restart the server, and it should work.

Answer 2

And also tried to install by using

rails new app -j esbuild --css bootstrap

yarn add jquery

You start right! You just need some addition actions

Add to your app/javascript/application.js before JQuery libraries or JQuery scripts

import './add_jquery'

And create file app/javascript/add_jquery.js:

import jquery from 'jquery'
window.jQuery = jquery
window.$ = jquery

First line import library in local file (add_jquery.js)

Second and third lines make this library global

That's it

And you don't need jquery-rails and bootstrap-sass gems