Ruby on Rails 6 with Webpacker and Bootstrap
Complete step-by-step guide on setting up Bootstrap using Webpacker in Rails 6
What is Webpacker?
It’s essentially a gem that makes it easy for us to use Webpack in Rails applications.
FYI, i’ll be using webpack and webpacker interchangeable in this article unless clearly indicated.
Sprockets and/or Webpacker?
The first question that came to mind when I first started a new Rails 6 application. Both sprockets and webpacker comes as default. So, which should I use to manage my assets? Should I be using both?
Getting Started With Webpacker
Lets start off by creating a new Rails 6 application. I’m using version 6.0.0.rc1 on Ruby 2.6.2 as of this posting:
rails new helloworld
By default, it should generate your Rails application that comes with both the regular asset pipeline and the webpacker gem.
Asset pipeline files are stored under the
app/assets folder while webpack files are managed under the
stylesheet_link_tag (asset pipeline) and the application.js file using the
To make sure we have webpack working later, lets create a simple home page that we can use to demonstrate our setup. I’ll go ahead and dump all the controller, view and route code examples below in a single gist. I’ll be doing this throughout the article as well:
Start the rails server and you should see the following in your browser when visiting http://localhost:3000
Next, lets install Bootstrap as our front-end framework. We can install this either through the asset pipeline or webpack. Lets use webpack in this case. Run the following
yarn command to install Bootstrap along with 2 other libraries that Bootstrap depends on:
yarn add bootstrap jquery popper.js
Once installed, you should check out the
app/package.json file to see that the right versions has been installed successfully. The
package.json file is similar to the
gemfile.lock file in that it helps the app to keep track of all the installed plugins. Here’s an example:
Popper aliases. To do that, we’ll use the Provide plugin in webpack to autoload the respective libraries / modules and have them mapped to the aliases via the
app/config/webpack/environment.js file as follow:
Launch your rails application on localhost. You should now hover over the button and see a tool tip appearing on top of the button without any styling. Lets import the Bootstrap styles next.
Lets create a new sub folder called
application.scss file to store our css library imports along with a
_custom.scss file to store our custom styles. You can include all your custom css in the same
application.scss file of course, I just wanted to show you an example of how you can organize custom styles in separate files should you wish to.
Restart your rails server and voila! You have a working Rails app with Bootstrap using Webpack.
Including Asset Pipeline Into Webpack
To do this, we’ll need to update
config/webpacker.yml to be able to resolve assets stored in the
home.css file under the
app/assets/stylesheets folder and import that into our main webpack
Restart your application and reload the home page. You should now see a green “Hello World” title since the
home.css stylesheet is imported last which overrides the red color set in the
_custom.scss stylesheet. Sweet.
So what is
'stylesheet_pack_tag' for anyways?
The official README doesn’t really explain much about it’s purpose or how to even use it properly. Basically, this tag is optional. Without it, all CSS imported into our main webpack
Two things must be in place to make sure this is working correctly:
- Update the
config/webpacker.ymlfile to set the
FYI, under the hood, webpacker is using the mini-css-extract-plugin to compile a separate bundle for the css imported into the main webpack application.js file.
Restart your Rails app and reload the page. Peeking into the source will reveal the additional stylesheet reference. Here’s the before and after result:
The Beauty of Using Webpack(er): Easily generate separate JS and/or CSS bundles
calendar.js file within the
Here’s what is looks like when the calendar page is loaded via http://localhost:3000/calendar
Few Other Interesting Findings
Some of these are directly quoted from the official webpacker README that I think is useful to have it highlighted below:
WEBPACKER_DEV_SERVER_HOST=0.0.0.0 ./bin/webpack-dev-serverseparately is optional. When you start
rails assets:clobberto delete all your compiled webpacks under the
public/packsfolder. This is useful when you simply want to reset and start a fresh webpack compilation.
- In regards to deployment: Webpacker hooks up a new
assets:precompile, which gets run whenever you run
assets:precompile. If you are not using Sprockets,
webpacker:compileis automatically aliased to
assets:precompile. Similar to sprockets both rake tasks will compile packs in production mode but will use
RAILS_ENVto load configuration from
A working example of the code snippets mentioned in this article can be found here: https://github.com/AdrianTeh/HelloWorldWebpacker
This article serves as a reference for myself and hopefully others in getting started with Webpack(er) in Rails. Please share under the comments section any other useful findings around Webpack and/or Webpacker in Rails.