1. ホーム /
  2. Blog /
  3. Laravel /
  4. Laravel10 + Vite + React + Typescript + MUI で開発環境を構築する
Laravel

Laravel10 + Vite + React + Typescript + MUI で開発環境を構築する

  • 2023.10.09
  • by ShinyaTomozumi
  • 0

Laravel9からフロントエンド側の実装時にViteを使っております。
以前は「Laravel-mix」でビルドしておりましたが、公式では「Vite」が標準で入っているので導入までの手順をまとめておきます。
「Laravel-mix」でも動作しますが、「Vite」を使用したほうが圧倒的に早いため今後は「Vite」を使用していきたいと思います。
またReactとTypescriptまでの導入についてもまとめて、今後の参考にしていただければと思います。

## 環境

  • Mac OS 13
  • PHP 8.2.6
  • composer 2.6.5
  • Laravel 10.10
  • vite 4.0
  • React 18.2

Laravelのインストール

まずは以下のコマンドでLaravelをインストールします。

$ composer create-project laravel/laravel プロジェクト名

今回はDockerは使用せず、ローカル環境での開発を想定しています。
なので、以下のコマンドでローカルサーバーを起動します。

$ php artisan serve

フロントエンド側の環境構築

次にフロントエンド側の環境構築を行います。
インストールする内容は「React」「Typescript」「MUI」です。
「Vite」はLaravelに標準で入っているのでインストールは不要です。

$ cd プロジェクト名
$ npm install
$ npm install -D react react-dom
$ npm install -D @vitejs/plugin-react-refresh @vitejs/plugin-react
$ npm install -D typescript @types/react @types/react-dom
$ npm install @mui/material @emotion/react @emotion/styled
$ npm install -D sass

TypeScriptがインストールされたら、以下のコマンドで「tsconfig.json」を作成します。

$ npx tsc --init

Viteの設定

Viteの設定を行います。
「vite.config.js」を以下の記述にします。

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh'
import react from '@vitejs/plugin-react'
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        reactRefresh(),
        react({
            jsxImportSource: '@emotion/react',
        }),
        laravel({
            input: [
                'resources/css/app.scss',
                'resources/js/app.tsx'
            ],
            refresh: true,
        }),
    ],
});

「app.scss」と「app.tsx」の作成

「resources」フォルダに「scss」「ts」フォルダを作成し、その中に「app.scss」と「app.tsx」を作成します。

p {
    font-size: 3rem;
}
import React from 'react'
import { createRoot } from 'react-dom/client'
import {CssBaseline} from "@mui/material";

// root element
const root = createRoot(
    document.getElementById('app') as HTMLElement
);

// App component
const App = () => {

    return (
        <>
            <CssBaseline />
            <p>Hello React !</p>
        </>
    );
};

root.render(<App />)

bladeファイルに記述

以下の内容を「resources/views/welcome.blade.php」に記述します。

<!-- 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">

    <title>laravelView側タイトル</title>
    @viteReactRefresh
    @vite([
        'resources/scss/app.scss',
        'resources/ts/app.tsx',
    ])
</head>
<body>
<!-- index.tsxの内容を追加する部分 -->
<div id="app"></div>
</body>
</html>

viteを起動

最後に以下のコマンドでviteを起動します。

$ npm run dev

確認

本番環境で実行

本番環境で実行する場合は、まずは「.env」に「ASSET_URL」に環境のホストを定義しておきましょう。

ASSET_URL=https://example.com/

以下のコマンドでビルドします。

$ npm run build

すると「public」フォルダに「build」フォルダが作成され、その中にビルドされたファイルが格納されます。
このファイルをサーバーにアップロードすることで実行することができます。