備忘録

docker + vite + react でホットリロードをきかせて開発する

Viteサーバーを起動する。
public/hot ファイルを作成する。
@viteReactRefresh を @vite 前に書く。
Dockerの server/hmr.host を正しく設定する。
usePolling: true で変更検知を有効にする。

軽量な考え方

目的 + 現状 = 条件

Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.

改善後のコード

resources/views/app.blade.php に @viteReactRefreshを追加して解決

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @inertiaHead
        + @viteReactRefresh
        @vite(['resources/css/app.css', 'resources/js/app.jsx'])
    </head>
    <body class="antialiased">
        @inertia
    </body>
</html>

`@viteReactRefresh`の目的

Reactのホットリロードは他のどのJSよりも先に、グローバルな初期設定が必要
Vueならvite標準なので問題ないが、viteでlaravelとreactを連携するために必要

元のコード

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @inertiaHead
        @vite(['resources/css/app.css', 'resources/js/app.jsx'])
    </head>
    <body class="antialiased">
        @inertia
    </body>
</html>

docker-compose.ymlの${APP_PORT:-8000}:80

.env に APP_PORT があればその値、なければデフォルト 8000
80: コンテナ内Nginx/Apacheが 80 番で待ち受け

論理

主語、述語を明確に定義
主語→集合。状態。ANDで具体化、ORで抽象化、NOTも使って考慮もれを防ぐ
述語→状態〜状態とその間。テキストベースならどこの文字か？まで明確に

コードには How ~

コードには How
テストコードには What
コミットログには Why
コードコメントには Why not

を書こうという話をした
— Takuto Wada (@t_wada) 2017年9月5日

プロンプトにワードを当てはめてコピー

pattern() {
local word="$1"
if [ -z "$word" ]; then
echo "使い方: pattern <聞きたい内容>" >&2
return 1
fi

cat <<PROMPT | pbcopy
「${word}」について以下を教えてください。
【聞きたい内容】
PROMPT

echo "📋 コピーしました: ${word}"
}