https://github.com/marcoroth/rails7-stimulus-reflex-esbuild
Example StimulusReflex installation using Rails 7 and esbuild
https://github.com/marcoroth/rails7-stimulus-reflex-esbuild
Last synced: about 1 year ago
JSON representation
Example StimulusReflex installation using Rails 7 and esbuild
- Host: GitHub
- URL: https://github.com/marcoroth/rails7-stimulus-reflex-esbuild
- Owner: marcoroth
- Created: 2022-04-20T22:16:52.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-12-18T22:24:45.000Z (over 3 years ago)
- Last Synced: 2025-05-04T20:46:34.195Z (about 1 year ago)
- Language: Ruby
- Homepage:
- Size: 40 KB
- Stars: 25
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rails 7 with Stimulus Reflex and esbuild
[](https://gitpod.io/#https://github.com/marcoroth/rails7-stimulus-reflex-esbuild)
## Technology stack
* Rails 7
* Turbo 7.1
* esbuild
* Stimulus 3.0
* StimulusReflex 3.5
* CableReady 5.0
## Up and running in three steps
1. `git clone git@github.com:marcoroth/rails7-stimulus-reflex-esbuild.git`
2. `bin/setup`
3. `bin/dev`
## Steps to re-create
```bash
rails -v
Rails 7.0.2.3
```
```bash
rails new rails7-stimulus-reflex-esbuild -j esbuild
```
```bash
cd rails7-stimulus-reflex-esbuild/
```
```bash
yarn add @rails/actioncable@7.0.2-3 stimulus_reflex@3.5.0-pre9 cable_ready@5.0.0-pre9 esbuild-rails
```
```bash
bundle add stimulus_reflex -v 3.5.0.pre9
```
```bash
bundle add cable_ready -v 5.0.0.pre9
```
```bash
rails g channel example
```
```bash
rails dev:cache
```
```bash
rails stimulus_reflex:install
```
```bash
touch esbuild.config.js
```
```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))
```
```js
// app/javascript/controllers/index.js
import { application } from "./application"
import controllers from "./**/*_controller.js"
controllers.forEach((controller) => {
application.register(controller.name, controller.module.default)
})
```
```bash
mkdir app/javascript/config/
```
```bash
touch app/javascript/config/stimulus_reflex.js
```
Add
```js
// 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 })
```
```js
// app/javascript/application.js
import "@hotwired/turbo-rails"
import "./channels"
import "./controllers"
import "./config/stimulus_reflex"
```
```bash
❯ rails g controller home index
```
```bash
npm set-script build "node esbuild.config.js"
```
```bash
bin/dev
```
```bash
open http://localhost:3000
```