DEV Community

Ankur Vyas for BoTreeTechnologies

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

5 1

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

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment

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

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

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

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay