環境
- M2 MacOS Sonoma
- PHP 8.1
- Laravel 10
- React 18
- TypeScript
- Vite
- Docker Desktop
- zsh
今から作成するLaravelアプリを入れたいディレクトリに移動
cd workLaravelアプリを作成
今回はLaravel10を使いたかったのでこちらを参考にしました。
（ example-app 部分はご自身のアプリ名にしてください）
composer create-project laravel/laravel:^10.0 example-appLaravelアプリ内に移動してVSCodeを起動
こちらはお好みでどうぞ
私はここから先はVSCodeのターミナルで叩いていきます。
cd example-app
code .Laravel Sailを導入
Laravelで用意されているDockerが簡単に使えるものです。（こちらを参考にしました）
Docker Desktopがインストールされていることを前提にしています。
まだインストールされていない方はこちらからインストールしてください。
Laravel Sailをインストール
composer require laravel/sail --devArtisanコマンドを実行
php artisan sail:installここで
Which services would you like to install?と聞かれたので私は「mysql」を選択しました。
エイリアスの設定（こちらを参考にしました）
本来なら ./vendor/bin/sail up というコマンドでこのまま進めていけるのですが、ずっと ./vendor/bin/sail と叩くよりも sail とだけ叩けるようになると楽だね。ということで進めるのが以下の設定になります。
今回はzshを使用しているのでそちらで説明を進めますが、bashなど他の環境の方は「bash laravel sail エイリアス」などで検索していただくと記事が出てくるかと思います。
設定ファイルを開く
vi ~/.zshrc以下の内容を追加する
内容を記述するには「i」キーを押すと入力モードになります。
入力が完了したら「:wq」とすると入力モードから抜け、上書き保存して閉じるといった動きになります。
alias sail='sh $([ -f sail ] && echo sail || echo vendor/bin/sail)'以下のコマンドで反映させる
source ~/.zshrc以下のコマンドでSailが起動できるか確認してください。
sail up -d以下のようにStartedと出ていれば成功です
出ている内容は人によって変わります。
[+] Running 2/2
✔ Container example-app-mysql-1 Started 0.0s
✔ Container example-app-laravel.test-1 Started Inertia.jsをインストール
sail composer require inertiajs/inertia-laravel依存関係のインストール
sail npm install react react-dom @inertiajs/inertia @inertiajs/inertia-react
sail npm install -D typescript @types/react @types/react-dom
./node_modules/.bin/tsc --init --jsx reactクライアント側の構成
resources/js ディレクトリ
resources/ts に変更してください。
resources/ts/app.js ファイル
resources/ts/app.tsx に変更し、以下のように内容を記述してください。
import "./bootstrap";
import "../css/app.css";
import React from "react";
import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/inertia-react";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
createInertiaApp({
resolve: (name) =>
resolvePageComponent(
`./Pages/${name}.tsx`,
import.meta.glob("./Pages/**/*.tsx")
),
setup({ el, App, props }) {
createRoot(el).render(<App {...props} />);
},
});tsconfig.json ファイル
以下の部分を変更してください。
{
// ...
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
// ...
"types": ["vite/client"]
// ...
}vite.config.jsファイル
現在は以下のようになっている部分を
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),以下のように修正してください。
laravel(["resources/ts/app.tsx"]);サーバー側の構成
resources/views/app.blade.php の作成
resources/views/ 配下に app.blade.php ファイルを作成して以下の内容を記述してください。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Laravel</title>
@vite('resources/ts/app.tsx')
@inertiaHead
</head>
<body>
@inertia
</body>
</html>Inertiaミドルウェアの生成
sail php artisan inertia:middlewareapp/Http/Kernel.php ファイル
app/Http/Kernel.php ファイルの web ミドルウェアに以下を追加します。
'web' => [
// ...
\App\Http\Middleware\HandleInertiaRequests::class,
],実際に動作を見てみる
resources/ts/Pages/ 配下に Welcome.tsx ファイルを作成し、以下の内容を記述しましょう。
import React from "react";
const Welcome = () => {
return <div>Welcome</div>;
};
export default Welcome;次に、 routes/web.php に「/」ルートからBladeビューではなくReactビューを返します。
<?php
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
Route::get('/', function () {
return Inertia::render('Welcome');
});次に、ターミナルで sail up -d を行っていることを確認し、以下のコマンドを入力します。
sail npm run devこれで以下のような文字が出力されたら成功です。
（数字などの内容は環境によって変わります）
> dev
> vite
VITE v5.2.11 ready in 198 ms
➜ Local: http://localhost:5173/
➜ Network: http://100.00.0.0:5173/
➜ press h + enter to show help
LARAVEL v10.48.10 plugin v1.0.2
➜ APP_URL: http://localhostここでAPP_URL: <http://localhost> と書かれているhttp://localhost にアクセスすると、画面に「Welcome」と表示されると成功です。
お疲れ様でした！！
コメント