Laravel9系でViteが公式プラグインとして使えるようになったということでReact(TypeScript)の環境をサクッと構築したいと思います。
Contents
環境
- Laravel 9x
- React 18x
- Vite 3x
Laravelをインストール
Dockerがデスクトップにインストールされていることを前提に進めます。
以下のコマンドを順に叩いていきます。
curl -s https://laravel.build/laravel_react_app | bash
cd laravel_react_app
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
sail up -dhttp://localhostにアクセスすると初期画面が表示されるようになるかと思います。
Reactをインストール
各種Reactのパッケージをインストールします。
※Reactのバージョンは18です。
sail npm install --save-dev react react-dom @types/react @types/react-dom @vitejs/plugin-react @vitejs/plugin-react-refreshapp.tsxファイルを作成
resources/ts/app.tsxファイルを作成します。
React18からレンダリングの関数がReactDomからcreateRootに変わったようなので注意が必要です。
import も react-domから react-dom/clientに変更になっています。
import "../js/bootstrap";
import "../css/app.css";
import React from "react";
import { createRoot } from 'react-dom/client';
const App = () => {
const title: string = "Laravel 9 Vite with TypeScript React !!";
return <h1>{title}</h1>;
};
const container = document.getElementById('app') as HTMLInputElement;
const root = createRoot(container);
root.render(<App />);ビューファイル編集
resources/views/welcome.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>Laravel</title>
@viteReactRefresh
@vite('resources/ts/app.tsx')
</head>
<body>
<div id="app"></div>
</body>
</html>
vite.config.tsを修正
aliasを設定しておくとimportの際にパスがわかりやすくなるので設定しておくと便利です。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
export default defineConfig({
server: {
hmr: {
host: 'localhost',
},
},
plugins: [
laravel({
input: [
'resources/ts/app.tsx',
],
refresh: true,
}),
react(),
],
resolve: {
alias: {
'@': '/resources/ts',
},
},
});
詰まったところ
公式のドキュメントや他の方の記事を参考にしながら今回、環境を構築させていただいたのですが、
ビルドした際、以下のエラーが出て真っ白になってしまいました。
http://0.0.0.0:5173/@vite/client net::ERR_ADDRESS_INVALID解決策は以下のURLに書いていました。
https://laracasts.com/discuss/channels/vite/laravel-vite-issue?page=1&replyId=807406
どうやら以下のコードをvite.config.tsに追記してやる必要があるようです。
server: {
hmr: {
host: 'localhost',
},
},
動作確認
ビルドして動作確認します。
sail npm run devhttp://localhostにアクセスしてLaravel 9 Vite with TypeScript React !!と表示されれば成功です。
関連記事
