Налаштування Rails 8 з Vite і Tailwind CSS 4 - javascript.org.ua

Цей посібник проведе вас через налаштування нового додатку Ruby on Rails 8, використовуючи Vite (Vite Ruby) як пайплайн для активів та Tailwind CSS v4 для стилізації.

Створення нового додатку з Rails 8, Vite і Tailwind 4

Створення нового проєкту Rails

Оскільки ми будемо використовувати Vite як наш пайплайн для активів, ми створимо новий додаток Rails без JavaScript:

rails new --skip-javascript my_app_name

Далі додайте необхідні геми для Turbo, Stimulus та Vite в Gemfile:

# Спрощувач сторінок, схожих на SPA від Hotwire [https://turbo.hotwired.dev]  
gem "turbo-rails"  
# Скромний JavaScript фреймворк від Hotwire [https://stimulus.hotwired.dev]  
gem "stimulus-rails"  
# Інтеграція Vite.js в Ruby веб-додатках [https://vite-ruby.netlify.app/]  
gem "vite_rails"

Створіть файл package.json за допомогою yarn init

Або ви можете вручну створити package.json з таким вмістом:

{  
 "name": "my_app_name",  
 "private": "true",  
}

Запустіть команду bundle, щоб встановити ці геми.

Примітка: Rails 8 за замовчуванням використовує Propshaft, який додає app/assets. Оскільки ми використовуємо Vite як основний пайплайн для активів, Propshaft можна видалити, якщо він не потрібен для інших гемів, таких як mission control.

Налаштування Vite

Генеруйте конфігураційні файли Vite за допомогою гему vite_rails

bundle exec vite install

Це створить:

vite.config.mts
config/vite.json
app/frontend/ (каталог для всіх активів, пов'язаних з фронтендом)

Каталог app/frontend/entrypoints/ містить файли, які слугують точками входу для JavaScript та стилів. Вони використовуються в app/views/layouts/application.html.erb через vite_javascript_tag.

Встановлення плагінів Vite

Додайте плагін Vite Rails та Rollup:

yarn add -D vite-plugin-rails rollup

Оновіть vite.config.mts, щоб завантажити плагін:

import { defineConfig } from "vite";  
import ViteRails from "vite-plugin-rails";  

export default defineConfig({  
 plugins: [  
 ViteRails({  
 envVars: { RAILS_ENV: "development" },  
 envOptions: { defineOn: "import.meta.env" },  
 fullReload: {  
 additionalPaths: ["config/routes.rb", "app/views/**/*"],  
 delay: 300,  
 },  
 }),  
 ],  
 build: { sourcemap: false },  
});

Налаштування Turbo та Stimulus

Оскільки ми створили додаток з параметром --skip-javascript, стандартна папка app/javascript відсутня. Нам потрібно тимчасово створити її:

mkdir -p app/javascript && touch app/javascript/application.js

Встановіть Turbo

bin/rails turbo:install

Встановіть Stimulus

bin/rails stimulus:install

Тепер перемістіть папку javascript в app/frontend:

mv app/javascript app/frontend

Оновіть точку входу в app/frontend/entrypoints/application.js:

import "../javascript/application";

Ваша структура файлів повинна виглядати так:

app/frontend  
├── entrypoints  
│ └── application.js  
├── javascript  
│ ├── application.js  
│ └── controllers  
│ ├── application.js  
│ ├── hello_controller.js  
│ └── index.js

Налаштування Tailwind CSS v4

Tailwind CSS v4 поставляється з окремим плагіном для Vite.
Встановіть його:

yarn add -D tailwindcss @tailwindcss/vite

Оновіть vite.config.mts

Змініть vite.config.mts, щоб включити плагін Tailwind:

import { defineConfig } from "vite";  
import ViteRails from "vite-plugin-rails";  
import tailwindcss from "@tailwindcss/vite";  

export default defineConfig({  
 plugins: [  
 tailwindcss(),  
 ViteRails({  
 envVars: { RAILS_ENV: "development" },  
 envOptions: { defineOn: "import.meta.env" },  
 fullReload: {  
 additionalPaths: ["config/routes.rb", "app/views/**/*"],  
 delay: 300,  
 },  
 }),  
 ],  
 build: { sourcemap: false },  
});

Додайте Tailwind до стилів

Створіть файл app/frontend/entrypoints/application.css і імпортуйте Tailwind:

@import "../stylesheets/application.tailwind.css";

Далі створіть файл app/frontend/stylesheets/application.tailwind.css і додайте:

@import "tailwindcss";  

@source "../../../app/views/**/*.html.erb";  
@source "../../../app/views/**/*.rb";  
@source "../../../app/helpers/**/*.rb";

Нарешті, оновіть application.html.erb, щоб завантажити таблицю стилів:

<%= vite_stylesheet_tag "application.css" %>

Фінальна структура файлів

app/frontend  
├── entrypoints  
│ ├── application.css  
│ └── application.js  
├── javascript  
│ ├── application.js  
│ └── controllers  
│ ├── application.js  
│ ├── hello_controller.js  
│ └── index.js  
└── stylesheets  
 └── application.tailwind.css

Завершення

Тепер у вас є додаток Rails 8, налаштований з Vite і Tailwind CSS v4. 🎉

Якщо ви шукаєте шаблон Rails/SaaS стартовий проєкт, побудований на цьому стеці, подивіться: https://github.com/yatish27/shore

Перекладено з: Setting Up a Rails 8 with Vite and Tailwind CSS 4