Search code examples
docker-composecreate-react-app

create-react-app hot-reloading only works when docker-compose is run in subdirectory


I have a project that contains a Django Rest Framework server in one subdirectory and a create-react-app app in a second subdirectory. Each subdirectory contains a Dockerfile.

The project directory has a docker-compose.yml that starts a postgres database service and the DRF service.

The create-react-app app subdirectory has its own docker-compose.yml file. If I cd to this subdirectory and run docker-compose up, the create-react-app app service responds to source changes by hot-reloading the app.

If I run the create-react-app app service from the project directory docker-compose.yml file, the create-react-app app service does not hot-reload the app when source is changed.

Here is the docker-compose.yml in the create-react-app app subdirectory:

version: '3'

services:

  admin.ui:
    build:
      context: .
    volumes:
      - '.:/frontend'
      - '/frontend/node_modules'
    ports:
      - "3000:3000"
    environment:
      - CHOKIDAR_USEPOLLING=true
    stdin_open: true
    tty: true
    networks:
      - simpl

networks:
  simpl:
    external:
      name: simpl-games-api_simpl

This is the section of the project docker-compose.yml that configures the create-react-app app service:

  admin.ui:
    build:
      context: ./simpl_admin_frontend
    volumes:
      - '.:/simpl_admin_frontend/frontend'
      - '/simpl_admin_frontend/frontend/node_modules'
    ports:
      - "3000:3000"
    environment:
      - CHOKIDAR_USEPOLLING=true
    stdin_open: true
    tty: true
    networks:
      - simpl

How do I modify the project level docker-compose.yml to support hot-reloading?


Solution

  • Changing the project docker-compose as follows enabled hot-reloading.

      admin.ui:
        build:
          context: ./simpl_admin_frontend
        volumes:
          - './simpl_admin_frontend:/frontend'
          - '/frontend/node_modules'
        ports:
          - "3000:3000"
        environment:
          - CHOKIDAR_USEPOLLING=true
        stdin_open: true
        tty: true
        networks:
          - simpl
    

    Found this solution in Docker compose with subdirectory and live reload