1

I'm new to Ruby on Rails so I wanted to understand how the JavaScript directories are managed in a Rails application!

1. What is the difference between the three directories:

  • project-name/app/assets/config : contains JS files:
  • project-name/app/javascripts/channels : contains JS files:
  • project-name/app/javascripts/packs : contains JS files

In my case these files have the following contents:

project-name/app/assets/config/manifest.js:
//= link_tree ../images
//= link_directory ../stylesheets .css
---------------------------------------------------------------------------
project-name/app/javascripts/channels/consumer.js:
// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `bin/rails generate channel` command.

import { createConsumer } from "@rails/actioncable"

export default createConsumer()
---------------------------------------------------------------------------
project-name/app/javascripts/channels/index.js:
// Load all the channels within this directory and all subdirectories.
// Channel files must be named *_channel.js.

const channels = require.context('.', true, /_channel\.js$/)
channels.keys().forEach(channels)
---------------------------------------------------------------------------
project-name/app/javascripts/packs/application.js:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

What I basically want to do is execute is execute ruby code with sweetalert2 JavaScript. But I found out that this is impossible to do (see my other question: How to execute a rails command with sweet alert 2?)

I found out that referencing JavaScript files using cdn (e.g.<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>) is not of common use, and that Rails prefer using gems (e.g. <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>). So that lead to the following questions:

After installing a gem (add gem 'jquery-rails' in Gemsfile and then bundle on terminal), most tutorials will add the //= require jquery in project-name/app/assets/javascripts/application.js but I don't have that file!

  1. Where do I have to provide //= require <gem-name> from the above directories?
  1. Where do I want to add my custom JavaScript files (for the moment I'm using the following directory: project-name/app/views/friends/javascripts/<my-JS-Files>) but I know that's wrong!
Eyeslandic
  • 14,553
  • 13
  • 41
  • 54
  • 2
    You don't use `//= require ` with webpacker. Thats a directive for spockets - the old assets pipeline. It does nothing in webpacker just like any other comment. In Webpacker in general you don't use "gemmified" assets. Instead you install packages through Yarn. – max May 10 '21 at 13:39

0 Answers0