⚡
Laravel + Vite + α のモダンフロントエンド環境を5分で立ち上げる手順
はじめに
Laravel 9からフロントエンドのビルドツールがWebpack MixからViteに変わりました。Viteの高速なHMR（ホットリロード）は開発体験を大きく向上させます。
この記事では、自身のメモを元に、LaravelでViteを使い、主要なフロントエンド（Bootstrap/Vue/React）環境を素早くセットアップする手順をまとめます。
前提環境
- Docker Desktopがインストール済み
- PHP 8.1+
- Composer 2.x
1. Laravelプロジェクトの作成
まずはcomposerでLaravelのプロジェクトを作成します。
composer create-project laravel/laravel my-laravel-app
cd my-laravel-app
2. Laravel Sailの導入 (Docker環境)
ローカル環境を汚さずに開発するため、Laravel Sailを導入します。
php artisan sail:install
mysqlやpgsqlなど、使用したいサービスを選択します。
Sailを起動します。
./vendor/bin/sail up -d
3. フロントエンド環境のセットアップ
Laravel Breezeを使うと、認証機能付きのスターターキットを簡単に追加できます。
Bootstrapの場合
# Breezeをインストール
./vendor/bin/sail composer require laravel/breeze --dev
# Bootstrap用の足場を生成
./vendor/bin/sail php artisan breeze:install
# npmパッケージをインストール & ビルド
./vendor/bin/sail npm install
./vendor/bin/sail npm run dev
Vue.jsの場合
# Breezeをインストール
./vendor/bin/sail composer require laravel/breeze --dev
# Vue用の足場を生成
./vendor/bin/sail php artisan breeze:install vue
# npmパッケージをインストール & ビルド
./vendor/bin/sail npm install
./vendor/bin/sail npm run dev
Reactの場合
# Breezeをインストール
./vendor/bin/sail composer require laravel/breeze --dev
# React用の足場を生成
./vendor/bin/sail php artisan breeze:install react
# npmパッケージをインストール & ビルド
./vendor/bin/sail npm install
./vendor/bin/sail npm run dev
まとめ
Laravel BreezeとSailを活用することで、Viteを使ったモダンなフロントエンド開発環境が驚くほど簡単に手に入ります。目的に応じてBootstrap, Vue, Reactを使い分けて、快適なLaravel開発をスタートしましょう。
この記事で紹介した内容以外にも、技術情報をブログで発信しています。
MyNote
Discussion