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

This article can help you add Bootstrap to Rails 7. How to add bootstrap in rails 7 — Rutik Patel
– Rutik Patel, Commented Apr 15, 2023 at 14:27
@RutikPatel the question is about esbuild. And you don't need any external "frontend" gems. Only jsbundling-rails and cssbundling-rails. BTW Bootstrap is out-the-box in rails 7. It is more native and maintainable way to setup frontend libraries — mechnicov
– mechnicov, Commented Jun 19, 2023 at 21:03

mechnicov · Accepted Answer · 2022-01-31 11:51:16Z

38

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

answered Jan 31, 2022 at 11:51

mechnicov

16.2k5 gold badges48 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alberto T. Over a year ago

As the answer shows, because of JavaScript hoisting it's important to use and import a separate file and not put the three jQuery lines directly in application.js (as I did initially), as described here: youtube.com/watch?v=ql-Ng6OeI-M

Alex Over a year ago

this should be the accepted answer, currently all other answers are using import-maps which has nothing to do with esbuild, and the worst offenders are using gem "jquery-rails".

freshop Jan 30 at 1:55

Wow excellent explanation. I NEVER would have thought I needed a separate file. JS is crazy. sprockets, webpacker, esbuild... I'll never understand

Jussi Hirvi · Accepted Answer · 2022-05-15 12:55:31Z

26

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.

edited May 15, 2022 at 12:55

answered May 7, 2022 at 18:10

Jussi Hirvi

7656 silver badges6 bronze badges

4 Comments

Huzaifa Saifuddin Over a year ago

Thanks for your solution Jussi, it was exactly what I was looking for, although now any changes I make in the file 'app/assets/stylesheets/application.scss' I have to precompile the assets again. Any idea why?

Jussi Hirvi Over a year ago

It seems that Rails 7 prefers precompiled assets to uncompiled versions, even when the precompiled ones are old. I would call it buggy behavior. Clearing the precompiled assets helped for me. Do rails assets:clobber, and remember NOT to precompile them anymore. BTW, I removed the recommendation to precompile the assets from my answer.

Huzaifa Saifuddin Over a year ago

Thanks, Jussi. I am not sure as this calls for a new question in SO but I am trying to add 'gem 'jquery-validation-rails'' in my application, but don't know how exactly to go about it. I tried following the same steps above but didn't work. The workaround I found which worked was doing this in importmap.rb pin "jquery_validate", to: "cdn.jsdelivr.net/npm/[email protected]/dist/…", preload: true But this is not a good solution.

Carlos Fagiani Jr Over a year ago

rails 7 use yarn, no needs to add bootstrap and jquery gems

ali-p-q · Accepted Answer · 2022-12-26 22:52:54Z

I managed to get it working. I am using the following versions of ruby and rails:

// Gemfile
ruby '3.1.3'
gem 'rails', '~>7.0.4'

I am using the following gems to add Bootstrap (which allow me to invoke standard bootstrap classes and color variables in my .scss files):

// Gemfile
gem 'bootstrap-sass', '~> 3.4', '>= 3.4.1'
gem 'bootstrap-will_paginate', '~>1.0.0'

With the following application.js configuration:

// javascript/application.js
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = true
import "controllers"

import 'jquery'

import * as bootstrap from 'bootstrap'
window.bootstrap = bootstrap

Using .scss stylesheets (including renaming application.css to application.scss) and adding the following imports to my custom.scss stylesheet that uses bootstrap standard classes and color variables:

// custom.scss
@import "bootstrap-sprockets";
@import "bootstrap";

As well as adding the following lines to importmap.rb:

// config/importmap.rb
pin "jquery", to: "https://code.jquery.com/jquery-3.6.0.min.js", preload: true
pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true

And the following line to manifest.js

// config/manifest.js
//= link bootstrap.min.js

Notice that (as far as I understand it) Rails 7 works without wepback (and without needing to use something like esbuild) thanks to the following gems, which I believe are default (but are also listed in my Gemfile):

// Gemfile
gem 'sprockets-rails', '~> 3.4', '>= 3.4.2'
gem 'importmap-rails', '~> 1.1', '>= 1.1.5'
gem 'stimulus-rails'
gem 'turbo-rails'
gem 'will_paginate', '~>3.1.8'

Nayan Gupta · Accepted Answer · 2023-01-30 12:42:09Z

0

I was facing same problem. What I did based on this link

In Gemfile add gem

gem 'jquery-rails'

In application.js add

import "jquery"
import "jquery_ujs"

In config/importmap.rb

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

Here is my github repo link where I've implement basic code for jQuery

answered Jan 30, 2023 at 12:42

Nayan Gupta

11

1 Comment

Ronats Over a year ago

You can create a new file under like app/javascript/abc.js, and pin it in the importmap with file name, pin "abc". Then you can call using <%= javascript_import_module_tag("abc") %> anywhere in the project.

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related