How to install materialize-css on Rails 6.0.0.beta2 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 materialize-css 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, or to install any other dependency with Webpacker, i.e. Bootstrap.

1. Setup

Let's start by creating a brand new app.

rails new our_awesome_project

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 app/javascript folder. We will use this file to import all our css from now on.

$ mkdir app/javascript/stylesheets
$ touch app/javascript/stylesheets/application.scss

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.

# app/javascript/packs/application.js
import '../stylesheets/application'

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' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Here we replaced the stylesheet_link_tag and javascript_include_tag helpers with stylesheet_pack_tag and javascript_pack_tag, respectively. If we run our app now, we should be able to see these assets served by Webpack.

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.dev
web: bundle exec puma -C config/puma.rb
webpacker: ./bin/webpack-dev-server

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 our package using yarn.

yarn add materialize-css

Now, you might be wondering, how do I know what to add in my application.js and 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.

Open your node_modules folder and voilà!

As you can see in the image above, our freshly installed package lies inside the node_modules folder, so all we have to do is grab the path to its css and js files.

In our case, that means we'll have to add the following to our application.js file.

# app/javascript/packs/application.js
import 'materialize-css/dist/js/materialize'

And make the following change application.scss file.

@import ‘materialize-css/dist/css/materialize’;

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.

Since we are installing Materialize, there's one more step we need to do. Go back to application.html.erb and add the following line inside your <head> tags.

# app/views/layouts/application.html.erb
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

And that's it! Bask in the glory of your newly installed package and start using it!