Toy JS React / Nginx / docker-compose with hot source code reloading
Budget: $10 – $30 USD
I'd like you to create a toy project that does the following:
- The root directory contains a docker-compose configuration and two sub-directories
- One sub-directory has a JavaScript React project, started with create-react-app, and with as few changes as possible. (Ideally, nothing added but a Dockerfile)
- The other sub-directory has an Nginx configuration file to act as a reverse proxy to the React project.
- The docker-compose configuration will expose Nginx on port 80.
- Browsing to http://localhost:80/static.html will load a static page from the Nginx config
- Browsing to http://localhost:80/api/ will load the React app
- I should be able to set an environment variable on my machine `DEPLOY=development` or `DEPLOY=production` which will control whether the React app is launched with `yarn start` or is built and served in production mode
Up to here, this is all straightforward. However, I failed at the next step, which is, therefore, the most critical:
- In development mode, react hot loading must work, just as if I had run the React app locally. This means that if I change one of the files in the project while a web browser is pointing at it, the browser page will immediately and automatically update.
- The root directory contains a docker-compose configuration and two sub-directories
- One sub-directory has a JavaScript React project, started with create-react-app, and with as few changes as possible. (Ideally, nothing added but a Dockerfile)
- The other sub-directory has an Nginx configuration file to act as a reverse proxy to the React project.
- The docker-compose configuration will expose Nginx on port 80.
- Browsing to http://localhost:80/static.html will load a static page from the Nginx config
- Browsing to http://localhost:80/api/ will load the React app
- I should be able to set an environment variable on my machine `DEPLOY=development` or `DEPLOY=production` which will control whether the React app is launched with `yarn start` or is built and served in production mode
Up to here, this is all straightforward. However, I failed at the next step, which is, therefore, the most critical:
- In development mode, react hot loading must work, just as if I had run the React app locally. This means that if I change one of the files in the project while a web browser is pointing at it, the browser page will immediately and automatically update.