Webpack hot-reload not working in out-of-the-box zoomapps-advancedsample-react

Zoom Apps
1

I am making a simple one-page classroom management app with React based off the zoomapps-advancedsample-react, and have to restart the containers every time to test the code in the frontend.

Zoomapps-sample-js hot-realoads just fine, though I have to refresh the page in the embedded browser.

I suspect this has something to do with the source code not syncing with the Docker containers, so I’ve tried following this https://stackoverflow.com/a/72717329 but it seems like webpack is configured somehow differently in the reference app, e.g. there is no webpack.config.js file to be found anywhere.

There are just too many unknowns for me to keep trying to figure this out on my own so any help would be great!

P.S. Config files are as they come; the only change to the original is the .env file. Everything else works as it should (so far).

2

Hi @biinster and thanks. Can you clarify really quickly - In order to see frontend changes, do you need to a) restart docker containers (your 1st paragraph) or b) refresh the page in the embedded browser (2nd paragraph)?

We’ll look into this. Likely it has to do with the web socket protocol not supported by the Docker container instance.

Under the hood, this is really create-react-app

3

Solved:

  1. In ./frontend/ clone the “.env.example” file and rename the copy “.env”.
  2. Restart the containers and the app.

This sets an env variable CHOKIDAR_USEPOLLING=true, which is necessary when running Webpack in a container. Found at https://create-react-app.dev/docs/troubleshooting.

I think this really needs to be in the README…

4

Thanks for sharing your solution and your feedback @biinster!