Ask A Question

Notifications

You’re not receiving notifications from this thread.

Install Bootstrap with Webpack with Rails 6 Beta

Shawn Wilson asked in Javascript

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 bootstrap@4.3.1 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!

Reply

A++++++

Reply

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()
Reply

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

Reply

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!

Reply

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...

Reply

Help me.
Follow your instructions.
In DevTools Chrome errors

What could be the problem????

Reply

@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

Reply

@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";

Reply

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 bootstrap@4.3.1 jquery popper.js to my Procfile or somewhere when deploying to Heroku?

Reply

@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
Reply

Hi,
tired every option here and some more. Heroku is still not deploying. Same error precompiling assets fail. Does anyone have any other suggestions? I'm open to other server options too. Need something temp short term.

Reply

Hello,
I was able to get Bootstrap working with this method but I've run into a problem where my changes to the css files were overridden by some .scss files. Is there a 'main' css/scss file in my rails app that I can use to modify my app?

Reply

yarn remove popper.js

followed by

yarn add @popperjs/core

solved the console error for me.

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 81,842+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.