CODEWITHSUNDEEP
ruby-on-railsactioncable
Randomtheories
Randomtheories

Reputation: 1290

ActionCable with importmaps in production

I'm trying to setup ActionCable with my Rails 7 app which uses importmaps. Everything works in development, but in Production I my channel javascript is not found:

Failed to load resource: the server responded with a status of 404 () for all my notifications_channel.js and all other channels.

Is there anything I am missing? I'm out of ideas.

My setup is as follows:

ruby "3.0.0"
gem "rails", "~> 7.0.4", ">= 7.0.4.3"

javascript/application.js

console.log("application.js")
import "@hotwired/turbo-rails"
import "controllers"
import "channels"

// Start StimulusJS
import { Application } from "@hotwired/stimulus"

const application = Application.start();

javascript/channels/index.js

import "./notification_channel"

javascript/channels/notification_channel.js

consumer.subscriptions.create("NotificationChannel", {
  connected() {
    console.log("connected NotificationChannel")
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    console.log("disconnected NotificationChannel")
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    console.log(data)
    let element = document.getElementById("flashes")
    element.insertAdjacentHTML('beforeend', data.html);
  }
});

channels/notification_channel.rb

class NotificationChannel < ApplicationCable::Channel
  def subscribed
    stream_from "notification_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

production.rb

  config.action_cable.allowed_request_origins = [ "https://myapp.hatchboxapp.com", /http:\/\/localhost*/]

  config.hosts << "myapp.hatchboxapp.com"
  config.hosts << "localhost"

Here is my importmap.rb

# Pin npm packages by running ./bin/importmap pin tailwindcss-stimulus-components

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/[email protected]/dist/stimulus.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "@rails/request.js", to: "https://ga.jspm.io/npm:@rails/[email protected]/src/index.js"
pin "tailwindcss-stimulus-components", to: "https://ga.jspm.io/npm:[email protected]/dist/tailwindcss-stimulus-components.module.js"


pin "@rails/actioncable", to: "actioncable.esm.js"
pin_all_from "app/javascript/channels", under: "channels"

cable.yml

development:
  adapter: redis
  url: redis://localhost:6379/1

test:
  adapter: test

production:
  adapter: redis
  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
  channel_prefix: linus_production

And ENV.fetch("REDIS_URL") returns a valid url:

redis://default:[email protected]:6379/1

Upvotes: 0

Views: 447

Answers (1)

Alex
Alex

Reputation: 30121

Don't use relative imports, it only works in development because asset requests go through sprockets.

// import "./notification_channel"
import "channels/notification_channel"

Note that you're not importing your local files directly here, imports have to match something in the importmap:

$ bin/importmap json
{
  "imports": {
    "application": "/assets/application-9ee50de6a17243a5097c1f973bcaae67bdac6cb2b67c3ad5e79c70be188dbb9c.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-49f8a244b039107fa6d058adce740847d31bdf3832c043b860ebcda099c0688c.js",
    "@hotwired/stimulus": "/assets/stimulus-a1299f07b3a1d1083084767c6e16a178a910487c81874b80623f7f2e48f99a86.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-6024ee603e0509bba59098881b54a52936debca30ff797835b5ec6a4ef77ba37.js",
    "controllers/application": "/assets/controllers/application-44e5edd38372876617b8ba873a82d48737d4c089e5180f706bdea0bb7b6370be.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-29468750494634340c5c12678fe2cdc3bee371e74ac4e9de625cdb7a89faf11b.js",
    "controllers": "/assets/controllers/index-e70bed6fafbd4e4aae72f8c6fce4381d19507272ff2ff0febb3f775447accb4b.js",

    "channels/notification_channel": "/assets/channels/notification_channel-510986bf3ec580274dd79451bb45720fe7d029b87052fe489db68b2a6788d294.js",

    "channels/consumer": "/assets/channels/consumer-da959cc6b798c852c626e9654ac3901f7f0da2b714bf8e61689e24ed43faafad.js",
    "channels": "/assets/channels/index-fd886e165dedb6cb07b976754f38ccc2620717ec75e0e84831bde391dac10e32.js"
  }
}

Upvotes: 2

Related Questions