備忘録です。。。あっているかは今後の動作確認で分る筈。。。

１．Node.jsをダウンロードする

以下のサイトから、スクロール。Windowsインストーラーからダウンロード。

https://nodejs.org/ja/download

npmスクリプト（npm.ps1）の実行がブロックされているので管理者権限のコマンドラインから解除。

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Yを入力し、npmが実行できるか確認。

npm -v

２．Vite+React.jsのプロジェクトを作成。

以下のコマンドでfrontend(任意の命名)フォルダが作成されているのを確認。

npm create vite@latest frontend -- --template react-ts

ここではOxlintを選択しました。

作業フォルダへ移動。

cd frontend

package-lock.jsonにある依存関係を厳密にインストール。

npm ci

３．vite.config.js の設定（APIプロキシの設定）

開発時に /api へのリクエストをLaravel側（http://localhost:8000）へ転送するよう設定。

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
    },
  },
});

４．Viteを起動してブラウザで確認

フロントエンド開発サーバー起動。

npm run dev

http://localhost:5173 でReact＋Viteの初期サイトが表示されていればOK。