【環境構築】Laravel9 + Vite + Inertia.js + React + TypeScript

Laravel9 + Vite + Inertia.js + React + TypeScriptで環境構築した際の
手順を忘れないうちに残して置きます。

◆環境

npm 8.5.5
node v16.15.0

Laravelプロジェクトの作成

composer create-project laravel/laravel example-app

example-appの部分は任意のもので大丈夫です。

Inertiaのインストール

作成したディレクトリに移動して以下のコマンドを実行します。

composer require inertiajs/inertia-laravel

blade.phpファイルの編集

resources/views/welcome.blade.phpを
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">

    <title>Inertia</title>

    @viteReactRefresh
    @vite('resources/js/app.tsx')
    @inertiaHead
</head>

<body>
    @inertia
</body>

</html>

Inertiaミドルウェアの追加

php artisan inertia:middleware

次に、App\Http\Kernelのroute middleware groupの'web'の最後尾に
\App\Http\Middleware\HandleInertiaRequests::class,を追加します。

protected $middlewareGroups = [
    'web' => [
        // ...
        \App\Http\Middleware\HandleInertiaRequests::class, // 一番最後に追加
    ],

Inertiaライブラリの追加

npm install @inertiajs/inertia @inertiajs/inertia-react

ReactとTypeScriptの追加

npm install -D typescript @types/node @types/react @types/react-dom

app.jsの編集

resources\js\app.jsの拡張子を.tsxに変更し、
以下に書き換えます。

React18～の場合

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(document.getElementById("app")!).render(<App {...props} />);
    },
});

React18より前

import { render } from "react-dom";
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 }) {
        return render(<App {...props} />, el);
    },
});

Viteの設定

npm install -D @vitejs/plugin-react

vite.config.jsから拡張子を.tsに変更します。

vite.condig.tsを以下のように書き換えます。

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

export default defineConfig({
    plugins: [
        react(),
        laravel({
            input: "resources/js/app.tsx",
            refresh: true,
        }),
    ],
});

vite-env.d.tsファイルを作成

vite-env.d.tsという名前のファイルをresources\js\app.tsxと
同じ階層に作成して以下を記述します。

interface ImportMeta {
    readonly glob: any;
}
declare var route: any;

tsconfig.jsonの作成

下記のコマンドを入力するとtsconfig.jsonが作成されます。

tsc --init

※TypeScriptをグローバルインストールしていない場合は以下のコマンドを打ちます。

npx tsc --init

作成されたtsconfig.jsonを以下のように書き換えます。

{
    "compilerOptions": {
        "baseUrl": ".",
        "target": "ESNext",
        "useDefineForClassFields": true,
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": false,
        "skipLibCheck": true,
        "esModuleInterop": false,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "paths": {
            "@/*": ["resources/js/*"]
        }
    },
    "include": ["resources/js/**/*"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.jsonの作成

tsconfig.jsonと同じ階層にtsconfig.node.jsonを作成して、
下記のコードを記述します。

{
    "compilerOptions": {
        "composite": true,
        "module": "esnext",
        "moduleResolution": "node"
    },
    "include": ["vite.config.ts"]
}

表示するページを作成

resources\js\配下に
pagesというディレクトリを作成し、
その中にindex.tsxを作成します。
中身は適当に記述します。(表示を確かめる為なのでなんでもよし。)

export default function index() {
    return <h2>Inertia.js with React &#128518;</h2>;
}

web.phpの書き換え

routes\web.phpを以下のように変えます。
これでhttp://localhostにアクセスした時に先ほど作成した
resources\js\pages\index.tsxが読み込まれます。

<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return Inertia::render('index');
});

全ての準備が整ったので
LaravelとViteのサーバーを立ち上げます。