DEV Community

Ankur Vyas for BoTreeTechnologies

Posted on • Updated on • Originally published at botreetechnologies.com

Rails 6 jQuery upgrade with webpacker!

Rails Webpacker jQuery

Adding jQuery to Rails 6 with webpacker will enable you to write ES 6 flavored JavaScript applications in no time. An essential thing to note is that Rails 6 comes installed with webpacker by default so you don't need to install it separately. In this article, I have outlined the process of adding jQuery with webpacker to yourRuby on Rails Development version for building your frontend of the application.

This blog is divided into three sections:

  • jQuery in an older version of Rails
  • Webpacker Installation
  • Add jQuery with webpacker

1. JQuery in an older version of Rails:

If you are using an older version on Rails and added jQuery to it. Then the easiest way to add jQuery was to use jquery-rails gem.

By doing so the jquery and jquery-ujs files will be added to the asset pipeline and available for you to use. If they're not already in app/assets/javascripts/application.js by default, add these lines:

//= require jquery
//= require jquery_ujs
Enter fullscreen mode Exit fullscreen mode

If you are running Rails 5.1 and up, and if you have included //= require rails-ujs, then jquery_ujs is not needed anymore. You can just add:

//= require jquery
Enter fullscreen mode Exit fullscreen mode

Adding jQuery in this way makes it part of the rails asset pipeline.

Now if you are upgrading your rails version to Rails 6 and use it with webpacker then you need to remove jquery-rails from Gemfile.

Remove below from application.js

//= require jquery
//= require jquery_ujs
Enter fullscreen mode Exit fullscreen mode

2. Webpacker Installation

Webpacker gem uses Webpack to manage app-like JavaScript modules in Rails.

Webpacker makes it easy to use the JavaScript pre-processor and bundler webpack 4.x.x+ to manage application-like JavaScript in Rails 6 jquery. It coexists with the asset pipeline, as the primary purpose for webpack is app-like JavaScript, not images, CSS, or even JavaScript Sprinkles (that all continue to live in app/assets).

Rails 6 comes with webpacker by default so you don’t need to do anything for it! When you create a brand new jquery Rails 6 app it will add webpacker and will do the configurations for you.

Read Also: Notable ActiveRecord changes in Rails 6 – Part1

If you are upgrading rails app from an older version then you need to add below line manually in your Gemfile

gem 'webpacker', '~> 4.x'
Enter fullscreen mode Exit fullscreen mode

Once you have added it then you need to run the following command to install Webpacker:

$ bundle exec rails webpacker:install
Enter fullscreen mode Exit fullscreen mode

Optional: To fix "unmet peer dependency" warnings,

$ yarn upgrade
Enter fullscreen mode Exit fullscreen mode

Once installed, you can start writing modern ES6-flavored JavaScript apps right away:

Rails will provide you with the basic directory structure as follows

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  └── src:
  │   └── application.css
  └── images:
      └── logo.svg
Enter fullscreen mode Exit fullscreen mode

In /packs/application.js, include this at the top of the file:

import 'core-js/stable'
import 'regenerator-runtime/runtime'
Enter fullscreen mode Exit fullscreen mode

You can then link the JavaScript pack in Rails views using the javascript_pack_tag helper.

<%= javascript_pack_tag 'application' %>
Enter fullscreen mode Exit fullscreen mode

So by doing this, your Rails webpacker jquery installation will get completed. No need to do the above steps if you already are using Rails 6.

3. Add jQuery with webpacker

In our Rails application run below command to add jQuery.

$ yarn add jquery
Enter fullscreen mode Exit fullscreen mode

This will add jquery to Rails 6 to your application frontend. So we can access it in the webpacker. Just add following at config/webpack/environment.js

Add require("jquery") to your app/javascript/packs/application.js

Now you will be able to add JQuery in Rails 6 application!

Top comments (0)