How to install bootstrap 4.3 on a Rails 6 app using Webpack
And learn how to serve assets through Webpack in the process
If you are new to this world of having Webpack inside Rails, and have no idea how to manage dependencies through it, don’t worry, you came to the right place.
While building a new project I decided to try Rails 6.0.0.beta2 and all its glorious new features. One problem that I stumbled upon was how to install css and js packages through Webpacker, instead of the usual process that I was accustomed to, using a gem.
In this tutorial I’ll guide you through the process of installing bootstrap on a brand new Rails 6.0.0.beta2 project, but you can still use pretty much the same steps with an existing Rails ≥ 5.2 project.
Let’s start by creating a brand new app.
rails new my_awesome_app
Now we need to tell our app to serve our css and js assets through Webpack. Let’s start by creating a new css manifest inside our
Note: In an existing app, you’ll have to import all your current css to the folder we created above, and import them through the newly created manifest file.
Now, let’s import the file we just created in our js manifest.
The last step is to tell Rails to start using Webpack. To do that, open the
application.html.erb file and make the following change to it.
# app/views/layouts/application.html.erb<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Here we replaced the
Webpacker will now watch for any change in our assets, and compiles them when we refresh the page. This may cause our page to load slightly slower in development, but thankfully there’s a way around it.
2. Setup Foreman (Optional)
If you, like me, are not comfortable with losing those precious extra milliseconds waiting for your page to load every time you make a change to your assets, don’t worry, we can use Foreman with
webpacker-dev-server to "bring back" real-time compilation.
If you’ve never used foreman before, you can read more about it here. Let’s start by installing it, like any other gem.
gem install foreman
Next, let’s create a
Procfile.dev file in the root of our app, and add the following content to it.
Note: I’m assuming you are using Puma as your web server, since it’s the default for new Rails apps.
# Procfile.devweb: bundle exec puma -C config/puma.rb
All we have to do now is start Foreman, and it will create the two processes we declared above in a single terminal window.
foreman start -f Procfile.dev
There we go! Now our assets will compile automatically when we make any changes to them, and we won’t have to waste those precious extra miliseconds waiting for our page to load after every change.
3. Add your package
Finally, let’s install bootstrap and its required dependencies, jquery and popper.
yarn add firstname.lastname@example.org jquery popper.js
We also need to add them as plugins, so let's go ahead and add these lines to our
# config/webpack/environment.js...const webpack = require('webpack')
Popper: ['popper.js', 'default']
You might be wondering, how do I know what to add in my
application.scss files? That's a great question, and since you are reading this, you won't have to waste your time trying to google it and getting nowhere, like I did.
node_modules/bootstrap/dist folder, or we can hand-pick the resources we are going to use in our app.
I'm going to show you how to do the second option since it allows you to have more control over the installation process. Create a new file in your
bootstrap_custom.js with the following content.
And link it in your
Now you can adjust
Let's do the same thing for our css.
And create the file
bootstrap_custom.scss inside our
And you can do the same thing we did before, you can choose which parts of their css you want to add to your project.
Note: Do not change the order of the scss imports (at least the top ones) or you'll get all sorts of errors.
Also, note that we didn’t had to add the
node_modules part of the path to the import because Webpack already knows where to look for them.
And that’s it! Bask in the glory of your newly installed package and start spreading those