Setup Rails + Vite + Tailwind + Stimulus + Turbo
Kemaren saya bilang klo untuk urusan frontend saya lebih seneng pasang pakai bantuan NodeJS, dibandingkan install paket yang sudah tercompile menjadi css atau js.
Sewaktu pakai Rails 6 kita udah dipasangkan pake Webpack secara build-in. Nah sejak di Rails 7 Webpack gak lagi jadi satu, kita mesti pasang lagi. Justru bagus sih gitu, dengan demikian kita bisa bebas gak mesti pakai Webpack juga.
Nah, salah satu hal yang paling saya suka nih waktu mainan frontend yakni pakai Vite. Sekarang mau gabungin Vite di Rails. Menariknya Vite punya gem khusus Rails, jadi pasangnya gak terlalu ribet.
Ya sudah langsung kita mulai saja. Asumsi saya, kamu sudah punya project Rails ya.
1. Setup Vite
bundle add vite_rails
bundle exec vite install
Pasang vite plugin untuk Rails:
pnpm add vite-plugin-rails stimulus-vite-helpers
Edit vite.config.ts
menjadi seperti ini
import { defineConfig } from "vite";
import RubyPlugin from "vite-plugin-rails";
export default defineConfig({
plugins: [RubyPlugin()],
});
Edit layout di apps/views/layout/application.html.erb
<head>
<title>Example</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= vite_client_tag %>
<%= vite_javascript_tag 'application' %>
<%= vite_stylesheet_tag 'application', 'data-turbo-track': 'reload' %>
</head>
Buat bekas di apps/javascript/entrypoints/application.css
touch apps/javascript/entrypoints/application.css
Lalu isi:
@import '../../assets/stylesheets/application.css'
2. Pasang Tailwind, Turbo dan Stimulus
pnpm add tailwindcss autoprefixer postcss @hotwired/turbo @hotwired/stimulus
3. Setup Tailwind
npx tailwindcss init
Edit tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./app/**/*.{html,erb,slim}"],
theme: {
extend: {},
},
plugins: [],
};
Edit diberkas app/assets/stylesheets/application.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Buat berkas untuk pengaturan postcss:
touch postcss.config.ts
Lalu isi
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
4. Setup Turbo
Edit di apps/javascript/entrypoints/application.js
Tambahin skrip berikut:
import * as Turbo from "@hotwired/turbo";
Turbo.start();
5. Setup Stimulus
Edit di apps/javascript/entrypoints/application.js
Tambahin skrip berikut:
import "../controllers";
Edit lagi diberkas app/javascript/controllers/index.js
Ganti isinya menjadi seperti berikut:
import { Application } from "@hotwired/stimulus";
import { registerControllers } from "stimulus-vite-helpers";
const application = Application.start();
const controllers = import.meta.globEager("./**/*_controller.js");
registerControllers(application, controllers);
6. Buat bekas bin/dev (jika udah ada, gak perlu bikin)
touch bin/dev
chmod +x bin/dev
Edit bin/dev
isi kaya berikut:
#!/usr/bin/env sh
if ! gem list foreman -i --silent; then
echo "Installing foreman..."
gem install foreman
fi
exec foreman start -f Procfile.dev "$@"
Pastikan Procfile.dev
nya seperti berikut:
vite: bin/vite dev
web: bin/rails s
Testing
Nah kalau sudah selesai semua setupnya. Berarti kita mesti test apakah setupan kita udah berhasil atau belum. Caranya gampang edit salah satu view kamu dan isi dengan semua attribut Tailwind dan Stimulus.
Contoh
<p class="text-2xl text-bold">
Halo Semua ...
<span data-controller="hello"></span>
</p>
Kalau berhasil semestinya tag span
nya terisi dengan kata-kata dari controller hello
dari Stimulus.
Lalu untuk Turbo nya? Gampang buat saja salah satu navigasi antar page, Turbo bisanya punya preload (seperti ada animasi loading) sebelum pindah halaman. Kalau gak ada preload-nya berarti Turbonya belum jalan nih wkwkw
Sip, semoga tulisan ini bermanfaat.