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.
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:
- When the
NODE_ENVis set to
development, it will run the
yarn run startcommand.
- yarn will try to recompile dependencies whenever there’s a react component change
mango-builderwill be built first before the
buildfolder was generated by
mango-builder, then it’s attached into
- 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.