Use npm while using Sprockets on Rails 5

What did you do

The Rails apps I've made so far

--Sprockets + JS library read from layout file with CDN --Webpacker + JS library loaded with npm

I had only made this pattern, but this time

--Sprockets + JS library loaded with npm

I will make an application called, and I will make a note of how to do it. Specifically, I will introduce the process of introducing the library

How to get started with npm + Rails

npm itself comes with downloading node.js. Since node.js should have been installed when building the Rails environment,

$ npm -v 

When the version is displayed with, it is OK.

Library installation

Install the library you want to install with npm.

$ npm install swiper

Starting with npm version 4, it will update package.json without the --save option.

Add path to asset pipeline

Add the path to the asset pipeline while looking at the path under node_modules. In the case of swiper this time, the necessary fileswiper-bundle.js was in the following location.

└── swiper
    └── swiper-bundle.js

So, in application.js, enter as follows.


//= require rails-ujs
//= require activestorage
//= require swiper/swiper-bundle.js  #Postscript
//= require_tree .

Add files required for initialization

If you have the code required for initialization, create another file in assets/javascripts or write it in application.js. This time I wrote it in application.js.


$(function() {
  new Swiper('.swiper-container', {
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',



Now, swiper works safely ^^

Image from Gyazo

Impressions, reference articles, etc.

It was fun to look back on the recent trends of Rails and JS ^^ The following is an article that I referred to.

-Asset Pipeline-Rails Guide --Install the front-end library used by Rails from npm -Rails 6: Fully understand Webpacker + Yarn + Sprockets and write JavaScript: Part 1 (translation)

Recommended Posts

Use npm while using Sprockets on Rails 5
What I was addicted to while using rspec on rails
How to use Ruby on Rails
[Ruby on Rails] How to use CarrierWave
[Ruby on Rails] Code check using Rubocop-airbnb
[Rails] Use validation on a specific controller
Notes on using FCM with Ruby on Rails
[Ruby on Rails] Image slideshow using Skippr
[Ruby on Rails] How to use redirect_to
[Ruby on Rails] How to use kaminari
Tailwind on Rails
[Ruby on Rails] How to use session method
[Rails] Use jQuery
[Ruby on Rails] Common processing between controllers (using concaves)
Ruby on Rails environment construction using VirtualBox, Vagrant, cyberduck
Try using the query attribute of Ruby on Rails
Use perltidy on CentOS 8
Test run on rails
Using JDBC on Linux
Use mod_auth_cas on CentOS 8
Deploy RAILS on EC2
Ruby on Rails Elementary
Ruby on Rails basics
Use images in Rails
Use bat on Centos.
Yay! I'm on Rails!
Use mkdir on ubuntu
Use Corretto 11 on Heroku
Use cpplapack on ubuntu
Ruby On Rails Association
Ruby on Rails Email automatic sending function setting (using gmail)
[Ruby on Rails] Easy scroll animation of javascript (using ScrollReveal.js)
[Ruby on Rails] Infinite scrolling using gem kaminari and jscroll