I’m dockerizing MERN apps at the moment.
The apps is divided into 2, react app at frontend and express app at backend.
The goals is to enable hot reloading at the react app.
Here’s my docker-compose.yml
file :
version: '3'
services:
mango:
container_name: mango
image: nginx:alpine
ports:
- 3000:80
volumes:
- ./docker/app/nginx.conf:/etc/nginx/conf.d/default.conf
- ./build:/usr/share/nginx/html
depends_on:
- mango-builder
command: "/bin/sh -c 'nginx -g \"daemon off;\"'"
logging:
options:
max-size: "10m"
max-file: "3"
networks:
- local_network
mango-builder:
container_name: mango-builder
image: node:12.13.0
working_dir: /app
volumes:
- .:/app
command: bash -c "rm -rf /app/package-lock.json && rm -rf /app/yarn.lock && yarn && if [ `$NODE_ENV` = `development` ]; then yarn run start; else yarn run build; fi"
logging:
options:
max-size: "10m"
max-file: "3"
networks:
- local_network
networks:
local_network:
Note that:
- When the
NODE_ENV
is set todevelopment
, it will run theyarn run start
command. - yarn will try to recompile dependencies whenever there’s a react component change
-
mango-builder
will be built first before themango
- The
build
folder was generated bymango-builder
, then it’s attached intomango
(check thevolumes
section) - The react app is running well at browser
When I try to change the react modules, somehow the hot reloading is not working.
I have a feeling I need to make the yarn run start
keep running in the background, but I don’t know how to do it.
Any thoughts?