Zenn
🐥

XAMPPを使ってLaravel11プロジェクトを作成する Breeze React/TypeScript Vite MySQL使用

2024/05/05に公開
Laravel
React
TypeScript
tech

環境と使用予定の機能

  • 環境
    Windows11
  • 使用予定の機能
    Breeze
    Vite : React/TypeScriptを使用するため
    MySQL
    PHPUnit : テストに使用

XAMPPのインストールと設定

  • 公式サイトからXAMPPをダウンロードしてインストールします。

Composerのインストール

  • Composerをダウンロードしてインストールします。ComposerはLaravelの依存関係管理ツールです。

Laravelプロジェクトの作成

コマンドラインで以下のコマンドを実行して、新しいLaravelプロジェクトを作成します。
Laravel.11より通常のプロジェクト作成はデフォルトでデータべースがSQLiteになります。
今回はMySQLを使いたいのでglobalコマンドでプロジェクトを作成します。
globalコマンドであればデータべースを選択することができます。

  • Laravelをインストールしたいディレクトリに移動します。
  • 下記コマンドでLaravelのインストーラーを起動します
composer global require laravel/installer

プロジェクトを作ります。example-appはプロジェクト名を入れてください。

laravel new example-app

質問が続きます。

Would you like to install a starter kit? [No starter kit]:
  [none     ] No starter kit
  [breeze   ] Laravel Breeze
  [jetstream] Laravel Jetstream

今回は認証にBreezeの認証機能＆Viteを使いたいので
breeze
を入力。

Which Breeze stack would you like to install? [Blade with Alpine]:
  [blade              ] Blade with Alpine
  [livewire           ] Livewire (Volt Class API) with Alpine
  [livewire-functional] Livewire (Volt Functional API) with Alpine
  [react              ] React with Inertia
  [vue                ] Vue with Inertia
  [api                ] API only
//reactを使いたいのでreactを入力
 > react

 Would you like any optional features? [None]:
  [none      ] None
  [dark      ] Dark mode
  [ssr       ] Inertia SSR
  [typescript] TypeScript
// typescriptも使いたいのでtypescriptを入力
 > typescript

Which testing framework do you prefer? [Pest]:
  [0] Pest
  [1] PHPUnit
//テストにはPHPUnitを使いたいので1
 > 1

ここでインストールがはじまります。
終わったところで以下のメッセージ。

Which database will your application use? [SQLite]:
  [sqlite ] SQLite
  [mysql  ] MySQL
  [mariadb] MariaDB
  [pgsql  ] PostgreSQL (Missing PDO extension)
  [sqlsrv ] SQL Server (Missing PDO extension)
// MySQLを使いたいのでmysqlを入力
 > mysql

 Default database updated. Would you like to run the default database migrations? (yes/no) [yes]:
// マイグレーションを行いたいのでyesを入力
 > yes

アプリケーションの起動

XAMPPを立ち上げ

  • Apache
  • MySQL

のStartを押して起動します。

ローカル開発サーバを起動する

cd アプリのディレクトリ
php artisan serve

ブラウザで http://localhost:8000 にアクセスしてLaravelアプリケーションを確認します。

Viteを開発サーバで実行する
※本番環境にデプロイできる状態にするときはbuildを使うのでそこは注意

npm run dev

http://localhost:5173/　を開くとこんな感じの画面が出ます。

これはViteが立ち上がっている場所であり
実際に画面が設定され表示されるのは　http://localhost　です。

Viteの詳しい公式ドキュメントを読むのがオススメです。
Laravel 11.x アセットの構築（Vite）

Discussion