As a developer, I want hot-reloading in Docker

[Lomzem]

Problem

• The frontend should automatically update every time a file is changed.
• This significantly speeds up development by allowing for quick iterations of designs

Expected Behavior:

Tested after starting frontend with pnpm dev (no Docker)

• After adding the text Hi and saving the file, the page updated immediately without me having to switch to the browser and refresh the page

1.mov

Docker Behavior:

Tested after starting frontend with docker compose up

• After adding the text Hi and saving the file, the page did not update.
• Worse, stopping the container and rerunning docker compose up did not update the page correctly
• What did work was rerunning docker compose up --build, but it is a major inconvenience to have to rebuild the containers every time we want to see how our UI changed

2.mov

[Lomzem]

This may be a useful environment variable in solving this:

 services:
  nextjs:
    build: .
    environment:
      # Enable hot-reloading
      WATCHPACK_POLLING: true
    ports:
      - '3000:3000'
    volumes:
      - .:/app # Map our directory to the Docker /app directory
      - /app/node_modules # Prevents overwriting node_modules in the container
    working_dir: /app # Set the working directory to /app
    command: sh -c 'pnpm i && pnpm dev'