What Happened to Using Gems?!
Before we cover how to setup Bootstrap 4 in Rails 6, I want to take a look at what has changed. In previous versions of Ruby on Rails, setting up Bootstrap was as adding a gem. You would then import or include the stylesheets and JavaScript files, and you could move on with your project. This changed in Rails 6, however, as we now have access to Webpacker.
Using Webpacker instead of Sprockets has its advantages and disadvantages, of course. You might prefer not having hundreds of dependencies and a bloated node_modules folder. That said, I’m a big fan of having it baked into Rails now, and it’s the hand we’ve been dealt.
You could still add the files on your own and handle things with the Rails asset pipeline of course. I don’t like clickbait though, so this tutorial is going to focus on using Webpack. Because, you know, that’s what the title said we would be doing.
I've Also Covered This Topic on YouTube!
This video covered the setup process for Bootstrap 4 in Rails 6. It was made as a follow-up to a previous video on the channel made for Rails 5. In that video I covered using the Rails assets pipeline and adding a navbar. If you’re interested, I’ll include a link to the Rails 5 tutorial here as well.
Create the Home Page & Add Bootstrap and its Dependencies
We’re going to work off the assumption that Bootstrap 4 is being added to a blank Rails 6 application. Because of this, we’ll need to generate a pages controller with a home action. After we generate it, we’ll set the home page as the root path. Then we’ll add Bootstrap, jQuery, and Popper.js using Yarn.
# In Your Terminal Run:
rails g controller pages home
yarn add bootstrap jquery popper.js
Afterwards, you can navigate to your routes.rb to set the root path of your application to be the home page.
Rails.application.routes.draw do
# Add this line
root to: 'pages#home'
# You can leave this one if you want
get 'pages/home'
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
At this point, if you start your server you should at the very least see your home page. You should not see anything Bootstrap working, however. The reason is we still haven’t hooked up any of the files we just added. Although Yarn adds the files, we still need to tell Rails where they are!
Making Webpack and Rails 6 Recognize Bootstrap 4
Now we’ll need to add some aliases and set up our webpack environment. Although this code seems a little daunting, you only need to do it once per application. Afterwards you can largely forget about the code and move on to the important features.
To start, head over to your app/config/webpack/environment.js file and add the required aliases.
// This was already here.
const { environment } = require('@rails/webpacker')
// These are the lines you need to add.
const webpack = require('webpack')
environment.plugins.append('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
// This was also here already.
module.exports = environment
Next, you’ll need to navigate to app/javascript/packs/application.js to import Bootstrap. This is the new location of your JavaScript files. You should no longer have a folder inside of app/assets named JavaScript. That’s okay though, because from in here we can create the JavaScript app of our dreams! Jokes aside, add these last two lines at the bottom of this snippet to your application.js file.
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
// These are the lines you need to add.
import 'bootstrap';
import './stylesheets/application.scss';
The final thing we’ll need to do is create this stylesheets folder and the application.scss file. After we do these two things, Bootstrap 4 will be setup in our Ruby on Rails 6 application.
Finally, create a folder inside of app/javascript/packs and call it stylesheets. Inside of that stylesheets folder, create a file called “application.scss”. And finally, from inside of that application.scss file, add the following:
@import "~bootstrap/scss/bootstrap";
Closing Thoughts
If you made it this far, then I hope I’ve been a help. I’d also like to thank you for your time, because I know these padded blog posts can be a pain. Unfortunately that’s what gets the SEO rank up though! Hopefully some of this site’s tools, like the Table of Contents plugin, and my organization made it easy to find what you needed.
I’m still new to blogging, and I’m trying to find a balance between respecting your time and my own. Hopefully you found this tutorial helpful. If you have any questions, feel free to ask down below and I’ll try to respond as soon as possible.
If you’re stuck trying to install Ruby on Rails on your Windows computer, I’ve posted two articles that might be of help. The first one will help you to install Linux on your Windows 10 PC. This is great for far more than Rails 6 development, but it will also make Rails a lot easier to deal with. The second one specifically covers installing Ruby on Rails 6 in this Windows Subsystem for Linux Version 2 installation. Hopefully these can help you out as well!
And finally, if you’re interested in seeing how to automate setting up Bootstrap and Devise by using a Rails Template, I’ve covered that too. I start off the article by showing how to use my template, and then I walk you through how to create your own. There’s a video tutorial included as well, so be sure to check that out! Until next time!
Related Posts
Add Devise And Bootstrap To Your Rails Project With One Click Using A Rails Template
4 replies on “Setup Bootstrap 4 in Rails 6 Using This Ruby On Rails 6 Tutorial”
thanks a lot man!
Hey, super happy that I was able to help. Thanks for letting me know it helped! The feedback means a lot.
Hi man I have an isssue here. If I try running $(‘#selector’).modal() It shows me error showing VM173:1 Uncaught TypeError: $(…).modal is not a function.
I followed everything as listed above
[…] Deanin along with Devise, or just click my name there. I’ve also covered adding Bootstrap 4 to Rails 6 on this blog before. So I’m definitely familiar with how much time could be […]