RailsとViteの連携は、Vite Ruby(vite_rails)がこれまで唯一の選択肢でしたが、Laravel(PHP)のViteプラグインにインスパイアされて開発された、新たな選択肢が登場しました。

まだバージョンは若いですが、RailsサーバとViteの連携を問題なく行えます。

また、vite_railsのユーザー(ヘビー？)により開発されているため、vite_railsから容易に移行できます。

特徴

Rack Proxy要らず

vite_railsはRailsサーバーとViteの連携にRack Proxyを利用していますが、プロキシなしにRailsサーバーとViteの連携を行います。

独自の設定ファイルなし

vite_railsにはViteとの連携の設定を記述する config/vite.json が存在しましたが、独自の設定ファイルは存在しません。

How It Works

Rackプロキシも、config/vite.jsonも、余計なbinstubsも必要ありません。

Development

Viteプラグインが開発サーバーのURLを tmp/rails-vite.json に書き込み、Railsのヘルパーがそれを読み取って、Viteを直接参照するscriptタグを生成します。ブラウザはViteと直接通信を行うため、Puma（Railsサーバー）がアセットを処理することはありません。

Production

vite build は、標準的なViteマニフェストと共に public/vite/ ディレクトリへフィンガープリント付きアセットを出力します。Railsのヘルパーがそのマニフェストを読み取り、適切なタグを生成します。

インストール

gem "rails_vite"

bundle install
bin/rails generate rails_vite:install

Vite 設定

Viteまわりの設定は、Viteの設定ファイルである vite.config.js(|ts)に記述します。

import { defineConfig } from 'vite';
import rails from 'rails-vite-plugin';

export default defineConfig({
  plugins: [
    rails(),
  ],
});

フロントエンド

ソース・ディレクトリ

app/frontend にフロントまわりのコードを置く場合、次のように記述します。(app/javascriptがsourceDirのデフォルト値です。)

import { defineConfig } from 'vite';
import rails from 'rails-vite-plugin';

export default defineConfig({
  plugins: [
    rails({ sourceDir: 'app/frontend' }),
  ],
});

エントリーポイント

(sourceDir)/entrypoints がある場合、(sourceDir)/entrypointsを
、ない場合、(sourceDir)直下を、エントリーポイントの置き場所とします。

View Helper

Viteはビルド結果のファイル名にdigest(内容から算出されるハッシュ値)を付与するため、Rails標準のView Helperを利用できないので、vite_rails同様、独自のヘルパーが用意されています。

Helper	説明
vite_tags(entries, *options)	スクリプト/スタイルシートモジュール・リロードのタグに対応、拡張子必須
vite_javascript_tag(entries, *options)	vite_tagsと同じ、拡張子.js必須
vite_stylesheet_tag(entries, *options)	vite_tagsと同じ、拡張子.css必須
vite_typescript_tag(entries, *options)	vite_tagsと同じ、拡張子.ts必須
vite_asset_path(name)	マニフェストからフィンガープリント付きのパスを返します
vite_image_tag(name, **options)	マニフェストによって解決されたsrcを持つ画像タグ

Vite Ruby (vite_rails)からの移行

手順

bin/rails generate rails_vite:install

ジェネレータを実行/上書き後、上書き前との差分を反映(書き戻)します。

削除すべきファイル

bin/vite
config/vite.json

修正すべきファイル

Procfile.dev
vite.config.js(|ts)

Procfile.dev

基本、ジェネレータにより作成/上書きされます。

上書きされない場合、Viteまわりを次のように書き換えます。

# vite: bin/vite dev
js: pnpm vite

vite.config.js(|ts)

Vite プラグインを導入している場合、その設定を反映します。

上書きせず、vite_rails用の設定を削除し、RailsVite用の記述を追加する、のもありです。

移行例

参考