Laravel+Sail+Vite+React(tsx)の環境を用意する - クイックエンジニアリングブログ

ソフトウェアエンジニアの王子です。

オリンピックのカーリングを見すぎて、投げる前にどこを狙うかがわかるようになってきました。

コーナーガードは攻撃的な戦術です。

さて、前回の私の記事はこちらです。 aimstogeek.hatenablog.com

出来上がるプロダクトや記法の問題であればReact/Vueはどちらでも良いと思っています。

ですが、Vue3に対応したUIフレームワークや周辺ライブラリの充実度合いの状況などを考えるとあと１〜２年はReactの方が有用でしょうか。

そこで今回は前回のLaravel+Sail+Vite環境にReactを入れてみます。

dockerコンテナの準備

Windows
- Docker for Desktopをインストール
- WSL2を有効にして、ストアからubuntuを導入
- ¥¥wsl$以下のubuntuのフォルダに適当な新規フォルダを作成
Mac
- Docker for macをインストール
- 適当な新規フォルダを作成

# curl -s https://laravel.build/react_test_blog | bash
# cd react_test_blog
# alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
# sail up -d

http://localhostへのアクセスにより初期画面が表示されます。

f:id:aimstogeek:20210819132127p:plain — laravel初期画面

Vite環境の用意

前回同様Laravel-Viteというパッケージを利用します。バージョンが上がり初期化方法がアップデートされています。

laravel-vite.innocenzi.dev

導入手順

# sail npx @preset/cli apply --debug laravel:vite --no-ssh

package.jsonの修正

"scripts": {
    "dev": "vite --host",
    "build": "vite build",
},

Laravel用のconfigの用意

# sail php artisan vendor:publish --tag=vite-config

react_test_blog/config/vite.phpの修正

'entrypoints' => [
  'ssr' => 'resources/scripts/ssr.ts',
    'paths' => [
      'resources/scripts/Index.tsx',
    ],
    'ignore' => '/\\.(d\\.ts|json)$/',
],

dev_server.ping_before_using_manifest => false (デフォルトはtrue)

※こちらを変更しないと、HMRのための変更を検知してくれない

docker-compose.ymlの修正

ports:
    - '${APP_PORT:-80}:80'
    - '3000:3000'

reactパッケージの導入

# sail npm install --save-dev react react-dom @types/react @types/react-dom @vitejs/plugin-react-refresh

vite.config.tsの修正

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

export default defineConfig({
    plugins: [
        laravel(),
        reactRefresh()
    ],
})

react_test_blog/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>
    @react
    @client
    @tag('Index')
</head>
<div id="index"></div>
</body>
</html>

react_test_blog/resources/scripts/Index.tsxの作成

import * as React from 'react';
import * as ReactDom from 'react-dom';

const Index = () => {
  return (
    <div>
      react test blog.
    </div>
  );
}
ReactDom.render(<Index />, document.getElementById('index'));

一度再起動

# sail down
# sail up -d
# sail php artisan view:clear  #キャッシュが残ってると@viteのディレクティブが動作しない

ビルド

# sail npm run dev

動作確認

上記の手順を実施後、localhostにアクセスすると「react test blog」とだけ書かれたシンプルなページが表示されます。

f:id:aimstogeek:20220214142200p:plain — ビルド結果

ViteのHMRが正常に動作するかを確認するために Index.tsxの「react test blog」を「Hello world」などに書き換えてみてください。

f:id:aimstogeek:20220214142224p:plain — ビルド結果にHMR適用

ブラウザのリロードを行わずにコンポーネントの再描画が行われていれば環境の構築は成功です。

HMRを行わずに静的ビルドを確認する場合は

# sail npm run build

を実行した後にreact_test_blog/config/vite.phpの

dev_server.enabledをfalse
ping_before_using_manifestをtrue

のどちらかの対応で、localhostで確認できます。ちょっとデプロイや作業がしづらいので、どう使うのが正しいのかは追い追い調査します。

最後に

最近はViteの速度と手軽さに満足し、環境構築で少し苦労しようともwebpackには決して戻るものかと推進活動に力を入れています。

Vite未経験の方は是非導入してみてください。

今回はここまで。

読んで頂き、ありがとうございました！

＼\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! /／ 919.jp