Rails 8 - Alpine.js 추가방법 (6)

Rails에서 Alpine.js를 추가하는 방법은 현재 Rails 버전과 프런트엔드 구성(Importmap / ESBuild / Vite)에 따라 조금씩 다르다.
아래는 실무에서 가장 많이 쓰는 3가지 패턴을 우선순위대로 정리한 것이다.

 

Importmap 사용하는 경우 (Rails 7/8 기본 · 가장 간단)

 

Rails 기본 설정 그대로 쓰는 경우다.
추가 빌드 도구 없이 Alpine을 바로 붙일 수 있다.

bin/importmap pin alpinejs

 

실행 결과로 config/importmap.rb에 자동 추가된다.

pin "alpinejs", to: "https://ga.jspm.io/npm:alpinejs@3.x.x/dist/module.esm.js"

SSL 인증서 검증 실패 직접 추가해도 됨.

 

 

application.js에서 Alpine 초기화

 

app/javascript/application.js

import Alpine from "alpinejs"

window.Alpine = Alpine
Alpine.start()

 

Layout에 JS 로드 확인

app/views/layouts/application.html.erb

<%= javascript_importmap_tags %>

이 한 줄이 있으면 Alpine은 전역에서 사용 가능하다.

 

ESBuild / JS Bundling 사용하는 경우

 

jsbundling-rails를 쓰는 프로젝트에서 흔한 방식이다.

npm install alpinejs

 

application.js 설정

import Alpine from "alpinejs"

window.Alpine = Alpine
Alpine.start()

 

Layout

<%= javascript_include_tag "application", "data-turbo-track": "reload" %>