Understanding the Asset Pipeline in Rails

So maybe you’ve built a static website before and you’re trying to convert it into a rails site. Or maybe you’ve seen some html, css and javascript but are not quite understanding how rails pieces these all together. Finally, maybe you’ve never done either of these things but are just wondering how rails apps are styled and given javascript functionality. If any of this is true, this is the guide for you.

First, I will talk about what the asset pipeline is and how it works and then I will teach you about how images, css files and finally javascript files are connected in rails.

What is the Asset Pipeline?

The asset pipeline is essentially Rails’ way of taking your javascript, image, css files and more and making them more efficient to work with. Let’s say you have 25 javascript files and 25 css files (hopefully you won’t but who knows). Every time your app interacts with each one of those files it will make a request. Websites browsers are limited to the number of requests they can make at once so hitting all 50 of these files and then some is going to slow down your app. The asset pipeline takes care of this for you.

The asset pipeline will concatenate all of these files into one per type. Meaning there will be one Javascript file and one CSS file generated by rails. This makes your site much more efficient.

In addition, rails will compress or minify these files to give them even more efficiency. But we don’t really need to worry about that. We just need to know that the asset pipeline is designed to make the user experience better.

Ok, we know what it does… so how do I use it to create my rails app.

Setting up your asset pipeline:

How do I use image assets?

The most straight forward use of the asset pipeline is for your images. Using the rails helper image_path we can easily reference our image files in our erb files.

Our example will use an image called ‘headshot.png’

1. Place your image in the app > assets > image folder.
2. In your erb file where you want to reference your image:

<img src=”<%= image_path ‘headshot’ %>”>

Or:

<img src=”<%= image_path(‘headshot.png’) %>”>

Make sure your erb tags are surrounded by quotations and your image element is closed.

3. Open your server (rails s) and realize that that’s how easy it was.

If your item is in a folder that you created in the images folder don’t worry! You can easily reference it like this:

<img src=”<%= image_path(‘/headshots/headshot.png’) %>”>

Okay great, now you have some nice pictures in your rails app. But the site itself not looking too good. Time to use those CSS skills of yours.

How do I use css assets?

CSS assets are a bit trickier. It is not as straight forward as dropping your css into your the folder. But it won’t be a big deal once you know how to do it.

First navigate to app > assets > stylesheets in your rails app.

Now take a look at the application.css file.

Hmm… looks a bit weird. I’ll admit the first time I saw this file I thought it was an empty file with some comments. But it’s not! The //= require tree . line and the //=require.self like ACTUALLY DO SOMETHING. They are not comments!

//=require_tree .

The require tree line says that any css file that we create in the stylesheets folder will be used and concatenated in to the asset pipeline css file.

//=require_self

The require self line says any css written in the application.css file will be available to your entire application.

Great! This means we can write some CSS right here right now. If you want to test this. Create a class called body {} and in curly braces put background-color:black; Then open your site and refresh. If this was done correctly you should see a black background on your project.

But that’s not exactly what we’re here for. We’re here to create our own css files and reference them in our project.

If you generated a controller there will be an ’SCSS’ file included here. You can use this for any styles you want to be associated with that controller.

If you would like to create your own css file, create the file with the .scss at the end instead of .css. Then create your styles in there and test them. You will notice that if we were to do that background-color:black; it would still work. That is because of the require tree line of code in your application file.

And that’s it!

Awesome, we can style our website. But what about giving it some javascript functionality?

How do I use javascript assets?

NOTE THIS IS FOR RAILS 6! I stumbled around the internet for 2 days to figure this out. Since I was new to Rails starting after Rails 5 of course I was confused. Rails 6 shook things up and took the javascript folder and moved the darn thing AND made using it different.

Specifically it added something called Webpacker. The first have of this video explains web packer well:

How to use Javascript via Webpacker in Rails 6 (Example) | GoRails - GoRails

The sparknotes version is that webpacker made things faster.

First, head to your Javascript > packs folder and create a new javascript file called “custom.js”.

Now in the file let’s create a method that we will reference in our html:

window.testFun = function(){
  alert('Hello World!');
}

Now (and this is very important) you must require your javascript file in your application.js file located in your packs folder.

require("custom")

Thats all you have to do! Your javascript is now rigged up to your entire application.

In your html let’s add a link_to:

<%= link_to 'Test', '#', onclick: "testFun()" %>

Now when you click this link an alert saying “Hello World” should pop up. From here you can use all the javascript your heart desires.

I hope this gave you a better understanding of how the asset pipeline works on a basic level in rails. Follow me on Twitter: @thedrewprint and check out my projects on github: @arichards4814 . Thanks for reading and good luck with your projects!