13

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

mechnicov
  • 12,025
  • 4
  • 33
  • 56
Ronats
  • 179
  • 1
  • 1
  • 10
  • This article can help you add Bootstrap to Rails 7. [How to add bootstrap in rails 7](https://rutikkpatel.medium.com/how-to-add-bootstrap-in-rails-7-b7993c40e86) – Rutik Patel Apr 15 '23 at 14:27
  • @RutikPatel the question is about esbuild. And you don't need any external "frontend" gems. Only [jsbundling-rails](https://github.com/rails/jsbundling-rails) and [cssbundling-rails](https://github.com/rails/cssbundling-rails). BTW Bootstrap is out-the-box in rails 7. It is more native and maintainable way to setup frontend libraries – mechnicov Jun 19 '23 at 21:03

4 Answers4

26

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

mechnicov
  • 12,025
  • 4
  • 33
  • 56
  • 1
    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: https://www.youtube.com/watch?v=ql-Ng6OeI-M – Alberto T. Mar 21 '22 at 18:14
  • 3
    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"`. – Alex Jun 18 '23 at 01:42
  • Bro, I love you! – Rafael Gomes Francisco Jul 04 '23 at 04:13
19

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.

Jussi Hirvi
  • 565
  • 3
  • 6
  • 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? – Huzaifa Saifuddin May 15 '22 at 11:22
  • 1
    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. – Jussi Hirvi May 15 '22 at 12:52
  • 1
    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: "https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js", preload: true But this is not a good solution. – Huzaifa Saifuddin May 15 '22 at 14:49
  • 4
    rails 7 use yarn, no needs to add bootstrap and jquery gems – Carlos Fagiani Jr Aug 09 '22 at 01:42
0

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'
ali-p-q
  • 9
  • 3
-1

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

Nayan Gupta
  • 1
  • 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. – Ronats Jan 31 '23 at 14:04