[Docker] create-react-appのhot-reloadが効かない

Table of Content

Docker上でReactのhot-reloadが効かない

React.jsのWeb開発で、ファイル保存時に自動的にre-loadされなくて困った方、参考にしてください。

目的

ファイル保存時に自動的にre-loadされ、Viewの変更箇所など簡単に確認できるようにする。(毎回docker-compose restartしていられない。)

(参考)

環境

Windows10 for Pro
Docker for Windows
create-react-appを使用

解決策

解決策は参考リンク[create-react-app/Trouble shooting]に記載されていたので、それに従います。いくつか考えられる事象があるようですが、今回はコンテナで開発したので、下記に示す手順のとおり、.envファイルを作成し、polling modeをtrueにすることで無事解決しました。

  • If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start, the watcher uses the polling mode, as necessary inside a VM.

react.jsのプロジェクトフォルダのルートに空白の.envを作成し以下を追加する。

CHOKIDAR_USEPOLLING=true

以上、です。

本当にcreate-react-appは、ドキュメントも豊富で助かります。個人開発にとって欠かせないです。
初めての人はぜひcreate-react-appでの開発をおすすめします。

コメントを残す

Scroll to top