laravel10-React環境構築(メモ)

laradockダウンロード

コンテナ起動

sudo docker compose up -d nginx postgres pgadmin

bashログイン

docker compose exec workspace bash

laravel10 ダウンロード

composer create-project laravel/laravel .

Composerを使用して、Laravel Breezeパッケージをプロジェクト追加

composer require laravel/breeze --dev

Breezeパッケージをインストールし、Reactをフロントエンドフレームワークとして設定

php artisan breeze:install react

フロントサーバの起動に必要な初回のみ実行

nvm install 20.5.0
nvm use 20.5.0
npm install -g npm@10.2.2
npm install

フロントサーバの起動

npm run dev

app.phpの編集

ダミーデータ作成のために、日本語化しておきます。

‘locale’ => ‘ja’,
‘fallback_locale’ => ‘ja’,
‘faker_locale’ => ‘ja_JP’,

データベース情報の設定

DB_CONNECTION=pgsql
DB_HOST=postgres
DB_PORT=5432
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret

vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.jsx",
            refresh: true,
        }),
        react(),
    ],
    // 以下追加
    server: {
        host: true,
        hmr: {
            host: "localhost",
        },
    },
});