なぜVite

Create React App(CRA)がメンテナンスされていないため。
SSRまでする必要が無くSPAだけで構築したい場合、Viteを使うと構築が簡単。
ビルドがとても早かった。

とりあえずの初期設定

プロジェクト作成
npm create vite@latest vite-frontend --template react-ts

tsconfig.jsonにPath Alias設定を統一するためvite-tsconfig-pathsを入れる
npm i vite-tsconfig-paths -D

vite.config.ts

import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), tsconfigPaths()],
 })

今後もっと活用するためViteでの最適な環境設定は把握しておきたい。

opqrshun

静的アセットの取り扱い

https://ja.vitejs.dev/guide/assets.html

public/icon.png はソースコード内では /icon.png のように参照されなければなりません。

index.htmlから触接参照されるファイルは、publicフォルダに配置する
publicフォルダの1階層目に配置しないと参照されなかった。
publicフォルダ内にフォルダ階層作るのは駄目みたい？

opqrshun

PHPアプリケーションのフロントとして統合するには？

Apache + バニラPHP構成の場合、
Apache配下にbuildしたものを置いておく手はあるが、あまりスマートでない気がする。

または、バックエンドをAPI扱いし、viteのbuildをJamstack的にAWS S3にデプロイする手もありそう。

以下も参考になるかもしれない。