Dockerized react - how to auto enable hot reloading

Other MongoDB Topics
,
1

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:

  1. When the NODE_ENV is set to development , it will run the yarn run start command.
  2. yarn will try to recompile dependencies whenever there’s a react component change
  3. mango-builder will be built first before the mango
  4. The build folder was generated by mango-builder , then it’s attached into mango (check the volumes section)
  5. 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?