[Webpacker] Summary of how to install Bootstrap and jQuery in Rails 6.0

How to install Bootstrap and jQuery in Rails

--The old method using Gem --Method using Webpacker from 6.0

There are two, but this time we will adopt the * latter *.

Reference target person

--Those who want to use bootstrap and jQuery with Rails6.0

environment

$ rails -v
Rails 6.0.3.1
$ ruby -v
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-darwin19]

Manage packages with Webpaker

$ yarn install jquery popper.js bootstrap

In Rails, Bootstrap depends on packages called jQuery and popper.js, so install them together. Also, packages are installed under the ** node_modules directory **.

Introducing bootstrap

Webpack settings

config/webpack/environment.js


const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment

It is set to load jQuery and popper in advance. By doing this, you don't have to bother to read with ** require or @import **.

Load javascript made by bootstrap

app/javascripts/packs/application.js


require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('bootstrap/dist/js/bootstrap.min.js')

Load bootstrap CSS

app/assets/stylesheets/application.scss


 *= require bootstrap/dist/css/bootstrap.min.css
 *= require_tree .
 *= require_self

Bootstrap should be loaded before ** self-written css (* = require_self) **.

Introduction of jQuery

load jQuery

app/javascript/packs/application.js


require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require('bootstrap/dist/js/bootstrap.min.js')

Usage

Load your own JavaScript file

new.html.erb


<div>
  //abridgement
  <%= javascript_pack_tag 'users/new' %>
</div>

Make the js file available by calling the users / new.js file under the javascript / packs directory.

Recommended Posts

[Webpacker] Summary of how to install Bootstrap and jQuery in Rails 6.0
How to use JQuery in js.erb of Rails6
[Ruby on Rails] How to install Bootstrap in Rails
Enable jQuery and Bootstrap in Rails 6 (Rails 6)
How to install Bootstrap in Ruby
How to introduce jQuery in Rails 6
How to install Swiper in Rails
How to deploy jQuery in your Rails app using Webpacker
Install Webpacker and Yarn to run Rails
How to delete large amounts of data in Rails and concerns
Summary of how to select elements in Selenium
Method definition location Summary of how to check When defined in the project and Rails / Gem
Summary of frequently used commands in Rails and Docker
[Rails] How to install devise
Summary of how to implement default arguments in Java
[Rails] How to install simple_calendar
[Rails] How to install reCAPTCHA
How to install Docker in the local environment of an existing Rails application [Rails 6 / MySQL 8]
[Rails] How to define macros in Rspec and standardize processing
Super easy in 2 steps! How to install devise! !! (rails 5 version)
How to install PHP 7.4 and SQL Server drivers in CentOS 7.7
How to deploy jQuery on Rails
[Rails] How to write in Japanese
How to deploy Bootstrap on Rails
[Rails] How to install ImageMagick (RMajick)
[Rails] How to install Font Awesome
How to install JavaScript library "select2" that makes multiple selections of selectbox fashionable in Rails 6.0
[Rails] How to get the URL of the transition source and redirect
How to install the language used in Ubuntu and how to build the environment
How to get boolean value with jQuery in rails simple form
[Ruby on Rails] "|| =" ← Summary of how to use this assignment operator
How to implement search functionality in Rails
How to change app name in rails
How to use custom helpers in rails
How to insert a video in Rails
[java] Summary of how to handle char
Summary of how to write annotation arguments
Summary of hashes and symbols in Ruby
How to use MySQL in Rails tutorial
[rails] How to configure routing in resources
[Java] [Maven3] Summary of how to use Maven3
How to implement ranking functionality in Rails
How to use credentials.yml.enc introduced in Rails 5.2
What to do and how to install when an error occurs in DXRuby 1.4.7
How to change the maximum and maximum number of POST data in Spark
(For beginners) [Rails] Time saving tech! How to install and use slim
[For Rails beginners] Summary of how to use RSpec (get an overview)
JDBC promises and examples of how to write
[java] Summary of how to handle character strings
[Rails] Introduction of pry-rails ~ How to debug binding.pry
Summary of how to create JSF self-made tags
[Rails] How to use select boxes in Ransack
How to install Titan2D (v4.2.0) in virtual environment
How to translate Rails into Japanese in general
How to prevent direct URL typing in Rails
How to separate .scss by controller in Rails
How to conditionally add html.erb class in Rails
How to implement a like feature in Rails
How to easily create a pull-down in Rails
How to build API with GraphQL and Rails
How to Install Oracle JDK 1.8 in Ubuntu 18.04 LTS?