WindowsでReactの開発環境構築は一癖あった話

タイトル通りです.
具体的にはtsxを上書き保存した際にホットリロードされないのが不便だったのでいろいろ工夫したという話です.

WSLを使った方法で解決しました.

環境
Windowsの環境
WebStorm(IDE) WebStorm 2020.1.1
Build #WS-201.7223.93, built on April 30, 2020

Runtime version: 11.0.6+8-b765.40 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 10 10.0

1. WSL

WSL上にyarnをインストール
https://ubunlog.com/ja/yarn-instalador-paquetes-javascript-ubuntu-20-04/

ただし, node_modules/.cache/.eslintcache をオープンできないと怒られたので, 一度ファイルを削除して空の.eslintcacheを生成することでパーミッションエラーを回避

無事にホットリロードに成功.

2.Docker

結論: 重たすぎて使い物にならない
ホットリロードしているつもりが2分以上はタイムラグがある

Dockerfileに

FROM node:16-alpine
WORKDIR /usr/src/app

docker-compose-build.ymlに

version: '3'
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "yarn install"

docker-compose-start.ymlに

version: '3'
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "yarn install && yarn start"
    ports:
      - "3000:3000"

最初の一回のみdocker-compose-build.ymlを使ってからdocker-compose-start.ymlを立ち上げた.

正常に立ち上がるものの, あらゆるレスポンスが遅いので使用断念.