Rails7 + Vite + React + Bootstrap5の環境構築

Rails アプリケーション作成

バージョンは適宜その時の最新のものにすればよさそうです。

$ mkdir app-name && cd $_
$ rbenv local 3.1.1
$ nodenv local 16.14.0
$ rails _7.0.2.3_ new -d postgresql --skip-asset-pipeline --skip-javascript --skip-hotwire --skip-jbuilder --skip-test .

$ git add .
$ git commit -m 'rails new' -m 'rails _7.0.2.3_ new -d postgresql --skip-asset-pipeline --skip-javascript --skip-hotwire --skip-jbuilder --skip-test .'
$ git remote add origin https://github.com/github-user-name/app-name.git
$ git push -u origin main

Gemfile を整理 & bundle update

ここはお好きな感じで。

bundle update

Vite 導入

Getting Started | Vite Ruby を参考に進めていきます。

gem 'vite_rails'

$ bundle install

bundle exec vite install 実行

$ bundle exec vite install

いくつかファイルの変更が発生するので、コメントや空行などはお好きな感じで調整します。

yarn install & package-lock.json を削除

yarn 管理でなくていい方はスキップで構いません。

$ yarn install
$ rm package-lock.json

とりあえずトップページを作成

ルーティング、コントローラ、ビューの3つをよしなに作成・修正します。

いったん動作確認

bundle exec vite install で Procfile.dev が生成されたので、せっかくならということで Foreman を使います。ポート番号は固定することにします。

Procfile.dev

vite: bin/vite dev
+ web: bin/rails s -p 3000
- web: bin/rails s

.gitignore

+ Procfile

$ bin/rails db:create
$ gem install foreman
$ cp Procfile.dev Procfile
$ foreman start

http://localhost:3000/ にアクセスして一応動作確認しておきます。

TypeScript & React 導入

合わせて使用するパッケージも一緒に入れます。

$ yarn add typescript react react-dom @vitejs/plugin-react @sonicgarden/rewrap
$ yarn add --dev @types/react @types/react-dom

React が動くように

vite.config.ts

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
+ import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    RubyPlugin(),
+   react(),
  ],
})

$ mv app/frontend/entrypoints/application.js app/frontend/entrypoints/application.ts

app/frontend/entrypoints/application.ts は一度全行削除して、以下のように書き換えます。

app/frontend/entrypoints/application.ts

+ import { initReact } from '../src/lib/react'
+ 
+ initReact()

app/views/layouts/application.html.erb

+ <%= vite_react_refresh_tag %>
+ <%= vite_typescript_tag 'application' %>
- <%= vite_javascript_tag 'application' %>

app/frontend/src/components/HelloReact.tsx（新規作成）

+ export const HelloReact = (): JSX.Element => {
+   return (
+     <h1>Hello, React!</h1>
+   )
+ }

app/frontend/src/lib/react.ts（新規作成）

+ import { rewrap } from '@sonicgarden/rewrap'
+ import { HelloReact } from '../components/HelloReact'
+ 
+ export const initReact = (): void => {
+   rewrap('hello-react', HelloReact)
+ }

最後にトップページのビューファイルを以下のように修正します。

+ <hello-react></hello-react>

ここまでの内容を動作確認

再度 http://localhost:3000/ にアクセスして、h1タグで「Hello, React!」と表示されていれば成功です！

Bootstrap5 導入

$ yarn add bootstrap @popperjs/core sass

app/frontend/entrypoints/application.ts

+ import 'bootstrap'
import { initReact } from '../src/lib/react'

initReact()

app/views/layouts/application.html.erb

- <%= stylesheet_link_tag "application" %>
  <%= vite_client_tag %>
+ <%= vite_stylesheet_tag 'main.scss' %>
  <%= vite_react_refresh_tag %>
  <%= vite_typescript_tag 'application' %>

app/frontend/entrypoints/main.scss（新規作成）

+ @use '@/stylesheets/application';

app/frontend/stylesheets/application.scss（新規作成）

+ @use 'bootstrap/scss/bootstrap';

動作確認

再度 http://localhost:3000/ にアクセスして、h1タグに Bootstrap5 のスタイルが当たっていれば成功です！

参考

• Getting Started | Vite Ruby