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](https://vite-ruby.netlify.app/guide/#getting-started) を参考に進めていきます。

```Gemfile
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 を使います。ポート番号は固定することにします。

```diff:Procfile.dev
vite: bin/vite dev
+ web: bin/rails s -p 3000
- web: bin/rails s
```

```diff:.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 が動くように



```diff_typescript: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 は一度全行削除して、以下のように書き換えます。

```diff_typescript:app/frontend/entrypoints/application.ts
+ import { initReact } from '../src/lib/react'
+ 
+ initReact()
```

```diff_erb:app/views/layouts/application.html.erb
+ <%= vite_react_refresh_tag %>
+ <%= vite_typescript_tag 'application' %>
- <%= vite_javascript_tag 'application' %>
```

```diff_typescript:app/frontend/src/components/HelloReact.tsx（新規作成）
+ export const HelloReact = (): JSX.Element => {
+   return (
+     <h1>Hello, React!</h1>
+   )
+ }
```

```diff_typescript:app/frontend/src/lib/react.ts（新規作成）
+ import { rewrap } from '@sonicgarden/rewrap'
+ import { HelloReact } from '../components/HelloReact'
+ 
+ export const initReact = (): void => {
+   rewrap('hello-react', HelloReact)
+ }
```

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

```diff_erb
+ <hello-react></hello-react>
```

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

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


# Bootstrap5 導入

```
$ yarn add bootstrap @popperjs/core sass
```

```diff_typescript:app/frontend/entrypoints/application.ts
+ import 'bootstrap'
import { initReact } from '../src/lib/react'

initReact()
```

```diff_erb: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' %>
```

```diff_scss:app/frontend/entrypoints/main.scss（新規作成）
+ @use '@/stylesheets/application';
```

```diff_scss:app/frontend/stylesheets/application.scss（新規作成）
+ @use 'bootstrap/scss/bootstrap';
```


# 動作確認

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


# 参考
- [Getting Started | Vite Ruby](https://vite-ruby.netlify.app/guide/#getting-started)