Skip to main content

Install Bootstrap with Webpack with Rails 6 Beta

Javascript • Asked by Shawn Wilson

For those of you who are going to give Rails 6 Beta a test run here is how I have installed Bootstrap 4.3.1 and configured with Webpack

Step 1:
yarn add [email protected] jquery popper.js

Step 2:
in config/webpack/environment.js add the following:

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

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

module.exports = environment

Step 3:
in app/javascript/packs/application.js add the following:

import 'bootstrap'
import './src/application.scss'

step 4:
create the following folder app/javascript/packs/src and create the file 'application.scss and place @import '~bootstrap/scss/bootstrap';

This should get bootstrap 4 up and running with Rails 6 Beta and webpack!



I've been working on getting Bootstrap 4 up and running with Rails 6 Beta 3 and have a simple Popper.js I am testing, that still isn't firing. I noticed in webpack\environment.js I had another version of this different from yours. Can you explain why you have append instead of prepend

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

Neither solution has worked for me yet, so just wondering where I am going off the Rails so to speak.

My application.js currently has the following:

import 'bootstrap/dist/js/bootstrap.bundle'
import 'jquery/dist/jquery.slim'
import 'popper.js/dist/esm/popper'

require("@rails/ujs").start()
require("@rails/activestorage").start()

hey Guillermo (hope i spelled that right).

im not gonna lie, im not a webpack expert by any stretch. This guide was pieced together by me over a few days of struggling to get it set up and loading boot strap.

ill collect the best explained stack questions and post them here


Updated:
Rails 6 with Bootstrap and configured with Webpack

Step 1:
yarn add bootstrap jquery popper.js

Step 2:
in config/webpack/environment.js add the following:

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

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

module.exports = environment

Step 3:
in app/javascript/packs/application.js add the following:

require("bootstrap/dist/js/bootstrap")

note: doesn't need to import jquery , popper once initialized as webpacker plugin

step 4:
in app/assets/stylesheets/application.css add the following:
@import "bootstrap/scss/bootstrap";
or
*= require bootstrap/scss/bootstrap
note: rails-sass can pick file from node modules
This get bootstrap 4 up and running with Rails 6 Beta and webpack!


Hi Guys, this is great. I came across a recent issue with webpacker not compiling and hence creating issues. This is the github discussion:

https://github.com/rails/webpacker/issues/2109

basically in your babel.config.js swap from corejs: 3 to corejs:false anywhere it appears.

this solved my frustration...


Help me.
Follow your instructions.
In DevTools Chrome errors

What could be the problem????


@Recker Swartz : You the MVP. Been trying to deploy to Heroku with OP's setup, however it wouldnt load Bootstrap when deploying, although works on localhost.
Now it loads properly and I can also define when it should load in relation to other stylesheets in application.css


@Daniele Deltodesco
Hi. I was just able to fix this. Heroku doesn't seem to mix well with Webpack as it tries to find bootstrap/scss/bootstrap in the app/assets/stylesheets folder. You have to point the import out of the folder to node_modules where Bootstrap stored in.

Make sure that your app/assets/stylesheets/application.css is renamed to application.css.scss and change @import "bootstrap/scss/bootstrap"; to @import "../../../node_modules/bootstrap/scss/bootstrap.scss";


Locally it works, but when I push the code to Heroku the assets are not precompiled. No CSS or JS present apparently.

Do I need to add yarn add [email protected] jquery popper.js to my Procfile or somewhere when deploying to Heroku?


@Ivan, no, not during deploy. You should already have done that so they're added to your package.json. The assets:precompile step will make sure they're installed during deploy.

Heroku does need you to add the node buildpack alongside the ruby buildpack so you can use yarn.

heroku buildpacks:add heroku/nodejs
heroku buildpacks:add heroku/ruby

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.