Cài đặt Rails 7 với Vite + Stimulus + Tailwind

Rails 7 vừa chào đón sự xuất hiện của tính năng importmap, một tính năng đầy hứa hẹn giúp quản lý tài nguyên trên ứng dụng web dễ dàng hơn. Tuy nhiên Vite vẫn đang là một lựa chọn đáng chú ý trong cộng đồng phát triển web.

Vite nổi bật với hai tính năng mà không ai có thể phủ nhận: Instant Server Start và Lightning Fast HMR.

• Instant Server Start cho phép phục vụ tệp trên yêu cầu qua ESM, không cần đóng gói.

• Lightning Fast HMR là chức năng Hot Module Replacement (HMR) nhanh chóng

Điều đặc biệt là Vite sử dụng esbuild, một công cụ pre-bundler có tốc độ xử lý vượt trội, cùng với rollup để bundle mã nguồn. Kết hợp cả hai, sẽ tận dụng sức mạnh của chúng để cung cấp một trải nghiệm phát triển và triển khai web mạnh mẽ.

Vậy nếu bạn đang tìm kiếm một giải pháp phát triển web hiệu suất cao và tiện lợi, Vite sẽ là lựa chọn đáng xem xét. Còn với Rails 7, bạn sẽ phải cân nhắc xem tính năng importmap có đủ thuyết phục để bạn chuyển đổi không.

Bắt Đầu: Cài Đặt Rails

mkdir project_name && cd project_name
rails new . --force --css=bootstrap --database=postgresql --minimal
rails db:create
rails db:migrate

// OR
echo "source '<https://rubygems.org>'" > Gemfile
echo "gem 'rails', '7.1.0'" >> Gemfile
bundle install
bundle exec rails new . --force --css=bootstrap --database=postgresql --minimal
bin/rails db:create
bin/rails db:migrate

Bước 1: Cài Đặt Vite

gem "vite_rails"
bundle install
bundle exec vite install

Lệnh vite install sẽ tạo ra các tệp sau đây:

• Procfile cho môi trường phát triển để khởi chạy Rails và Vite:

Procfile.dev
  vite: bin/vite dev
  web: bin/rails s

• File entrypoint – Nơi chỉ chứa các lệnh imports

app/javascript/entrypoints/

• Tệp thực thi để bắt đầu vite:

bin/vite

• File cài đặt thư viện js

package.json
package-lock.json

• Cấu hình cho Vite cho ứng dụng:

vite.config.ts
config/vite.json

• Đặt cấu hình cho Vite:

# vite.config.ts

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import FullReload from "vite-plugin-full-reload";

export default defineConfig({
  clearScreen: false,
  plugins: [
    RubyPlugin(),
    FullReload(["config/routes.rb", "app/views/**/*"], { delay: 200 })
  ],
  root: "./app/assets",
  build: {
    manifest: true,
    rollupOptions: {
      input: "/app/javascript/entrypoints/application.js"
    }
  }
})

Vite cũng đi kèm với tính năng auto build . Vite-rails sẽ tự động phát hiện tùy chọn "autoBuild": true trong vite.json. Nếu có bất kỳ mã nào thay đổi trong thư mục được chỉ định trong sourceCodeDir và watchAdditionalPaths, nó sẽ tự động kích hoạt quá trình build tài nguyên

# vite.json

{
  "all": {
    "sourceCodeDir": "app/javascript",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }
}

Vite xây dựng các tài nguyên và lưu trữ chúng trong public/vite-dev với các tệp CSS và JS được compile. Tệp manifest.json bao gồm các tệp CSS và JS cùng với tài nguyên từ manifest-assets.json.

Building with Vite ⚡️
vite v4.3.9 building for development...
transforming...

✓ 7 modules transformed.

rendering chunks...
computing gzip size...
../../public/vite-dev/manifest-assets.json              0.00 kB │ gzip:  0.02 kB
../../public/vite-dev/manifest.json                     0.30 kB │ gzip:  0.14 kB
../../public/vite-dev/assets/application-23aabef0.css   9.26 kB │ gzip:  2.39 kB
../../public/vite-dev/assets/application-cda856d1.js   43.44 kB │ gzip: 10.95 kB
✓ built in 481ms
Build with Vite complete: /Users/projects/app/public/vite-dev

Bây giờ, sau khi khởi động lại Rails, bạn sẽ thấy những dòng thông báo này trên console của trình duyệt:

Vite ⚡️ Ruby
Visit the guide for more information: <https://vite-ruby.netlify.app/guide/rails>

Tất cả đã sẵn sàng để bạn viết chức năng JavaScript cho ứng dụng với Vite! 😃

Bước 2: Vite + Stimulus

Vite có các plugin cho các framework như ReactJS và VueJS, cũng như một plugin cho framework Stimulus. Trong Rails 7, gem 'stimulus-rails' được cấu hình tự động. Vì vậy, để kết hợp Vite và Stimulus, hãy thực hiện các bước sau:

• Tạo các tệp Stimulus:

gem 'stimulus-rails' # bỏ qua nếu đã được thêm bởi Rails
bundle install
rails stimulus:install # Tạo các tệp sau

• Rails đã thêm cài đặt cho Stimulus trong app/javascript/controllers/application.js và app/javascript/controllers/index.js. Vì chúng ta sẽ cấu hình Stimulus bằng Vite, bạn có thể bỏ qua tất cả các dòng từ hai tệp này.
• Bỏ comment các import sau từ app/javascript/application.js:

// import "@hotwired/turbo-rails"
// import "controllers"

• Thêm hai plugin Vite mà bạn có thể sử dụng cho Stimulus:
  • stimulus-vite-helpers: Cung cấp các helper để dễ dàng tải tất cả các controller Stimulus của bạn khi sử dụng Vite.js.
  • vite-plugin-stimulus-hmr: HMR cho các controller Stimulus trong Vite.js.

yarn add -D @hotwired/stimulus
yarn add -D stimulus-vite-helpers
yarn add -D vite-plugin-stimulus-hmr

Câu lệnh trên sẽ thêm các phụ thuộc vào tệp package.json.

• Cấu hình Vite cho plugin HMR của Stimulus. Giờ đây, vite.config.js sẽ trông như sau:

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import FullReload from 'vite-plugin-full-reload';
import StimulusHMR from 'vite-plugin-stimulus-hmr';

export default defineConfig({
  clearScreen: false,
  plugins: [
    RubyPlugin(),
    FullReload(["config/routes.rb", "app/views/**/*"], { delay: 200 }),
    StimulusHMR()
  ],
  root: "./app/assets",
  build: {
    manifest: true,
    rollupOptions: {
      input: "/app/javascript/entrypoints/application.js"
    }
  }
})

• Thêm nội dung sau vào tệp app/javascript/controllers/index.js. Controllers Stimulus được đăng ký bằng cách sử dụng globEager của Vite và helper registerControllers.

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)

• Import controller Stimulus vào tệp của Vite:

Thêm dòng sau vào app/javascript/entrypoints/application.js:

import '../controllers'

• Để kiểm tra xem controller Stimulus “hello” hoạt động, thêm đoạn mã sau vào app/views/layouts/application.html.erb:

<div data-controller="hello">
  <input data-hello-target="name" type="text">
  <input data-hello-target="output" type="text">
  <button data-action="click->hello#greet">Greet</button>
</div>

Bạn đã sẵn sàng sử dụng Stimulus và Vite để phát triển ứng dụng của bạn!

Bước 3: Vite + Tailwind

• Sử dụng yarn để thêm Tailwind CSS và các gói cần thiết khác:

yarn add -D tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/line-clamp autoprefixer
yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-tailwindcss path

• Tạo tệp cấu hình tailwind.config.js trong thư mục gốc của dự án:

npx tailwindcss init

Thêm nội dung sau vào tailwind.config.js:

const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/views/**/*.{html,html.erb,erb}',
    './app/javascript/components/**/*.js',
  ],
  theme: {
    fontFamily: {
      'sans': ["BlinkMacSystemFont", "Avenir Next", "Avenir",
        "Nimbus Sans L", "Roboto", "Noto Sans", "Segoe UI", "Arial", "Helvetica",
        "Helvetica Neue", "sans-serif"],
      'mono': ["Consolas", "Menlo", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace"]
    },
    extend: {},
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/line-clamp'),
  ],
}

• Thay nội dung tệp app/assets/stylesheets/application.css bằng:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

• Tạo tệp application.css trong thư mục app/javascript/entrypoints/ và nhập các tệp stylesheet:

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

• Tạo tệp cấu hình postcss.config.js trong thư mục gốc của dự án:

touch postcss.config.js

Thêm nội dung sau vào postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

• Trong app/views/layouts/application.html.erb, sử dụng các thẻ vite_client_tag, vite_stylesheet_tag và vite_javascript_tag thay vì các thẻ JS và CSS mặc định:

<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= vite_client_tag %>
<%= vite_stylesheet_tag 'application', data: { "turbo-track": "reload" } %>
<%= vite_javascript_tag 'application' %>

• Hãy chắc chắn rằng các tài nguyên được biên dịch bằng cách xem F12 trình duyệt

<link rel="stylesheet" href="/vite-dev/assets/application-23aabef0.css" data-turbo-track="reload">
<script src="/vite-dev/assets/application-cda856d1.js" crossorigin="anonymous" type="module"></script>

• Nếu cần, bạn có thể khởi chạy máy chủ Vite để áp dụng các kiểu Tailwind:

bin/vite dev -clobber

Bạn đã sẵn sàng để viết mã JS và CSS cho ứng dụng của mình và để Vite đóng gói các tài nguyên này! 😄

Nguồn tại Medium