memoht / rails7-stimulus-reflex-esbuild

A clean Rails 7 install using esbuild and stimulus_reflex

Steps to Re-Create

• Rails 7
• ESBuild
• Turbo
• Stimulus 3
• StimulusReflex 3.5
• CableReady 5

Steps

rails -v
Rails 7.0.2.3

rails new rails7-stimulus-reflex-esbuild -j esbuild

cd rails7-stimulus-reflex-esbuild/

yarn add @rails/actioncable@7.0.2-3 stimulus_reflex@3.5.0-pre9 cable_ready@5.0.0-pre9 esbuild-rails

bundle add stimulus_reflex -v 3.5.0.pre9

bundle add cable_ready -v 5.0.0.pre9

rails g channel example

rails dev:cache

rails stimulus_reflex:install

touch esbuild.config.js

// esbuild.config.js

const path = require('path')
const rails = require('esbuild-rails')

require("esbuild").build({
  entryPoints: ["application.js"],
  bundle: true,
  outdir: path.join(process.cwd(), "app/assets/builds"),
  absWorkingDir: path.join(process.cwd(), "app/javascript"),
  watch: process.argv.includes("--watch"),
  plugins: [rails()],
}).catch(() => process.exit(1))

// app/javascript/controllers/index.js

import { application } from "./application"

import controllers from "./**/*_controller.js"

controllers.forEach((controller) => {
  application.register(controller.name, controller.module.default)
})

mkdir app/javascript/config/

touch app/javascript/config/stimulus_reflex.js

Add

// app/javascript/config/stimulus_reflex.js
import { application } from "../controllers/application"

import StimulusReflex from 'stimulus_reflex'
import CableReady from 'cable_ready'

import consumer from '../channels/consumer'
import controller from '../controllers/application_controller'

application.consumer = consumer

StimulusReflex.initialize(application, { controller, isolate: true })
CableReady.initialize({ consumer })

// app/javascript/application.js

import "@hotwired/turbo-rails"
import "./channels"
import "./controllers"
import "./config/stimulus_reflex"

❯ rails g controller home index

npm set-script build "node esbuild.config.js"

bin/dev

open http://localhost:3000