Webpacker in Rails 6 using Javascript

We are going to talk about Rails 6 new webpacker set up for Javascript and how to use that with CSS as well.

Let’s just called our app like:

% rails new tailwind

We are going to set up tailwind CSS and use the latest 1.0 version for that, but when you set up a rails 6 app you are no longer going to have your JavaScript in the asset pipeline, this is a pretty big change and something you are going to have to probably work trough is the process to upgrade to rails 6, so this is one of the things that is a big benefit to us though because the asset pipeline was not something where we could easily use node modules or the modern JS tools like web pack, so by moving to web packer we are using web pack which pretty much every modern JS library supports, we can use yarn to install those JS libraries and then load them through a web pack and it makes everything a lot easier, so I want to talk through the web packer set up inside your new rails application and so if we go into our rails app

% cd tailwind

There are also a few other things we now have our package JSON, this lists out all of the JS libraries that our application will be using

This is where we will use the yarn command, you need to install yarn separately to manage this and it’s very similar to bundler and your gem files, so this is kind of like your gem file for JS, so in here we see that we have the rails six alpha and JS libraries for action cable, active storage, and rails UJS as well as the web packer library here and the latest version of turbo links.

So this was all stuff that was gems before or built into rails and they were all in your application.js file in the asset pipeline, this is going to be different now and live inside your app JS folder under packs:

So what you will need to do is eventually move all of your JS from the application.js in your asset pipeline to the web packer app javascript folder, so then you can see here this is the default setup right now for rails 6 so this is going to include the rails UJS library, turbo links, active storage, and channels, so each one of these is going to load the library and call a start function that they implement just to basically wire up everything behind the scenes for us. Then, when we import that channels folder it goes to import index.js which then goes through and looks where all of the underscore channel.js files

So when you generate or create any action cable Chanel you can put that in this folder and this will automatically load all of those for you if we were to do something like:

% rails webpacker:install:stimulus

This is going to modify our web pack config to load our stimulus JS and you can see here that it appended some stuff to our application.js created a couple of folders and it is going to install the stimulus dependencies and all of that in our new package JSON, so you will see stimulus is added here:

Now that we have our controllers folder now for stimulus controllers and our application.js now it does import for controllers:

This is very similar to requires, there are a few differences which you can read into but namely, this is going to load up stimulus now and then do the same require context and just look for _controller or files in this folder, so normally this will go ahead and pick up your hello controller.js which will just simply put this on the page if you define this controller

So if you want to upgrade your 5 rails application to rails 6 and move all your JS over to web packer, it is going to be a bit of a process but the default rails stuff is pretty straightforward to go and add, you are going to add those libraries to your package.json using yarn and then you are going to add your JS lines right here and it is luckily it’s very straightforward there is not a whole lot you have to do and you can add your index.js and your consumer.js as well if you want the easiest way to grow to do all this stuff is to grab a brand-new rails application and form rails 6 and then just copy these files over and just take you that from a rails 6 app and put that directly into your rails 5 app so that you can do the upgrade a lot simpler.

References:

How to write Javascript in Rails 6 | Webpacker, Yarn and Sprockets

https://gorails.com/episodes/webpacker-javascript-in-rails-6