【環境構築】Laravel11 + React + Typescriptのセットアップ

Posted at 2024-09-16

はじめに

ご覧いただきありがとうございます！
今回はLaravel11とReactの環境構築の方法についてご紹介いたします。
方法については何パターンかあるかと思いますが、一番手軽に行えるLaravel Sailとviteを使った方法で環境構築を行います。
前提としてWSLのセットアップとDockerのセットアップが完了している必要があります。
まだの方は、WSL環境構築やDocker環境構築などで検索をして、先にセットアップをお願いします。

筆者の環境については下記のとおりです。

OS:Windows11
WSL:Ubuntu-24.04
docker:version 26.1.4
node:
npm:

Laravelのセットアップ

Laravel日本語ドキュメントを参考にセットアップを進めて行きます。
https://readouble.com/laravel/11.x/ja/installation.html

Laravelプロジェクトの作成
1. curl -s "https://laravel.build/example-app?with=mysql" | bash
2. example-appの部分に関しては、プロジェクト名になりますので各自任意の名前に変更してください
ターミナルを開き、WSL上の任意のディレクトリで上記コマンドを実行します
1. インストールが完了するまでしばらく待ちます
2. 途中でパスワードを求められたらWSLのパスワードを入力してください
3. 下記のような画面が表示されたらインストールは完了です
コンテナの立ち上げ
1. 画面の指示に従って下記のコマンドを入力してください
2. cd アプリ名 && ./vendor/bin/sail up -d
3. 最後に-d オプションをつけることでバックグラウンド実行してくれます
データベースのマイグレーションと起動確認
1. 続いてデータベースのテーブルを作成していきます。
2. ./vendor/bin/sail artisan migrate
3. 上記のコマンドをWSL上で入力してエンターキーを押してください
4. このような画面が出れば成功です
5. http://localhostにアクセスをして画面が表示されるか確認しましょう
エイリアスの設定
1. 先ほどから頻繁に使う./vendor/bin/sailをエイリアスに登録してみましょう
2. alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
3. 上記コマンドをWSL上で入力してください
4. sail php -vとコマンドを入力してPHPのバージョンが出力されれば成功です

以上でLaravelの環境構築は終了です。お疲れさまでした！続いてReactの環境構築を行っていきましょう！

Reactのセットアップ

それでは続いてLaravelプロジェクトの中にReactの環境を構築していきます。

モジュールのインストール
1. sail npm install
2. sail npm install -D react react-dom @types/react @types/react-dom
3. sail npm install -D @vitejs/plugin-react
4. 上記のコマンドを実行してください
Typescriptのインストール
1. sail npm install -D typescript
2. sail npx tsc --init --jsx react-jsx
3. 上記コマンドを実行してください
Viteの設定
1. Laravelプロジェクト配下にあるvite.config.jsファイルを開きます
2. ファイルを以下のように変更してください

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'; //追加する

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/ts/app.tsx'], // ts/app.tsxに変更 ※tsディレクトリは後ほど作成する
            refresh: true,
        }),
        react(), //追加する
    ],
});

Viewファイルの修正
1. プロジェクトディレクトリのresources/views/welcome.blade.phpを削除する
2. resources/views/index.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">

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>

    @viteReactRefresh
    @vite(['resources/css/app.css', 'resources/ts/app.tsx'])
    
</head>
<body>
<div id="app"></div>
</body>
</html>

app.tsxを作成
1. プロジェクトディレクトリのresourcesディレクトリにtsフォルダを作成
2. tsディレクトリにapp.tsxファイルを作成
3. 中身を下記のように記述してください

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Index } from './components';

const container = document.getElementById('app');
const root = createRoot(container!);

root.render(
      <StrictMode>
            <Index />
      </StrictMode>
);

コンポーネントの作成
1. 続いて実際に表示される画面のコンポーネントを作成していきます
2. tsディレクトリにcomponentsディレクトリを新たに作成し「index.tsx」ファイルを作成しましょう
3. index.tsxファイルを下記のように記述してください

import React from 'react';

export const Index = () => {
    return (
        <div>
            <h1>環境構築 成功！！！</h1>
        </div>
    );
};

Laravelのルーティングの編集
1. Laravelプロジェクト配下にあるroutesディレクトリ内の「web.php」を編集していきます

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('index');  // welcomからindexへ変更
});

動作確認

最後に作成したプロジェクトが動作するか確認してみましょう
ターミナルを開き、プロジェクトディレクトリ上でsail npm run devと入力してみましょう
このような画面が表示されれば環境構築は完了です！おつかれさまでした。

最後に

以上でLaravelプロジェクト内にReactをインストールする方法の解説は終了です。
最後までご覧いただきありがとうございました。このあとは、作りたいアプリケーションに合わせてライブラリのインストールを行ったり、更にコンポーネントを作成して自由なアプリケーションを作成してみてください！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up