Compose watch for development in Docker - Step-by-Step Execution

Process Flow - Compose watch for development

Start docker compose watch

↓

Run service containers

↓

Watch source files for changes

↓

Detect file change?

No→Keep running

Yes↓

Restart affected containers

↓

Continue watching

Docker Compose starts containers, watches source files, and restarts containers automatically when files change.

Execution Sample

Docker

version: '3.8'
services:
  app:
    build: .
    volumes:
      - .:/app
    command: sh -c "while true; do sleep 1; done"

This docker-compose.yml is used with `docker compose watch`. It runs a container with the current folder mounted into /app, keeping it alive with a sleep loop while watch handles restarts on changes.

Process Table

Step	Action	File Change Detected	Container State	Output
1	Start docker compose watch	No	Container starting	Building image and starting container
2	Container running	No	Container running	App running, waiting for changes
3	File changed in source folder	Yes	Container restarting	Stopping container and restarting
4	Container restarted	No	Container running	Container restarted with new code
5	No further changes	No	Container running	Waiting for changes
6	User stops docker compose watch	No	Container stopped	Containers stopped and removed

💡 User stops docker compose watch, ending watch and container lifecycle

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
Container State	Not running	Running	Restarting	Running	Stopped
File Change Detected	No	No	Yes	No	No

Key Moments - 2 Insights

Why does the container restart when a file changes?

Because docker-compose watch detects the file change (see Step 3 in execution_table) and triggers a container restart to apply updates.

What keeps the container running when no file changes happen?

The container runs a command that keeps it alive (like a sleep loop), so it stays running waiting for changes (see Step 2).

Visual Quiz - 3 Questions

Look at the execution table, what is the container state at Step 3?

A Running

B Stopped

C Restarting

D Starting

💡 Hint

Check the 'Container State' column at Step 3 in the execution_table.

At which step does the container restart due to file changes?

A Step 3

B Step 5

C Step 2

D Step 6

💡 Hint

Look for 'File Change Detected' marked 'Yes' in the execution_table.

If no file changes occur, what will the container state be after Step 2?

A Restarting

B Running

C Stopped

D Starting

💡 Hint

Refer to 'Container State' at Step 2 in the execution_table.

Concept Snapshot

Docker Compose watch runs containers and monitors source files.
When files change, it restarts containers to update code.
Use volumes to mount source code for live updates.
Keep containers alive with a command like a sleep loop.
Stop with Ctrl+C to end watching and containers.

Full Transcript

Docker Compose watch for development means running your app in containers that automatically restart when you change your code files. First, docker compose watch starts your containers and mounts your source code folder inside them. The containers run a command that keeps them alive, waiting for changes. When you edit a file, docker compose watch detects this change and restarts the affected containers so your app updates with the new code. If no changes happen, the containers keep running. When you want to stop, you press Ctrl+C, and docker compose watch stops and removes the containers. This process helps developers see their code changes live without manually restarting containers.

Practice

1. What is the main purpose of using docker-compose watch during development?

easy

A. To deploy the app to production servers

B. To build the Docker image only once

C. To automatically reload the application when code changes

D. To monitor container resource usage

Solution

1. Step 1: Understand the role of watch in development

   Watching means tracking file changes to trigger actions automatically.

2. Step 2: Connect watch with docker-compose usage

   Compose watch reloads the app inside the container when source code changes on the host.

3. Final Answer:

   To automatically reload the application when code changes -> Option C

4. Quick Check:

   Compose watch = auto reload on code change [OK]

Hint: Watch means auto reload on code change [OK]

Common Mistakes:

• Confusing watch with building images
• Thinking watch deploys to production
• Assuming watch monitors resource usage

2. Which of the following docker-compose.yml volume configurations correctly syncs your local source code to the container for live reload?

easy

A. volumes:\n - ./app:/app

B. volumes:\n - /app:/app

C. volumes:\n - ./app

D. volumes:\n - /app

Solution

1. Step 1: Understand volume syntax in docker-compose

   Volumes map host paths to container paths using host_path:container_path.

2. Step 2: Identify correct host to container mapping

   ./app:/app maps local folder app to container's /app for syncing code.

3. Final Answer:

   volumes:\n - ./app:/app -> Option A

4. Quick Check:

   Host path before colon, container path after [OK]

Hint: Volume syntax: host_path:container_path [OK]

Common Mistakes:

• Reversing host and container paths
• Omitting container path
• Using absolute container path as host path

3. Given this docker-compose.yml snippet and a Node.js app using nodemon:

services:
  web:
    volumes:
      - ./src:/usr/src/app
    command: nodemon index.js

What happens when you edit a file inside ./src on your host machine?

medium

A. Nothing happens until you rebuild the image

B. The container deletes the edited file

C. The container crashes due to volume conflict

D. The container restarts the Node.js app automatically

Solution

1. Step 1: Understand volume syncing

   The volume syncs ./src on host to /usr/src/app in container, so changes reflect inside container.

2. Step 2: Understand nodemon behavior

   nodemon watches files and restarts the app when files change.

3. Final Answer:

   The container restarts the Node.js app automatically -> Option D

4. Quick Check:

   Volume sync + nodemon = auto restart on code change [OK]

Hint: Nodemon restarts app on synced file changes [OK]

Common Mistakes:

• Thinking image rebuild is needed for code changes
• Assuming container crashes on volume use
• Believing files are deleted on sync

4. You set up docker-compose with volumes and watchmedo to reload a Python app, but changes don't trigger reload. What is the most likely cause?

medium

A. The volume path is incorrect or missing

B. The Dockerfile lacks a CMD instruction

C. The container has no network access

D. The image was not built with --no-cache

Solution

1. Step 1: Check volume configuration

   If volumes don't map host code to container, changes won't appear inside container.

2. Step 2: Understand watchmedo needs code inside container

   Without synced code, watchmedo cannot detect changes to reload app.

3. Final Answer:

   The volume path is incorrect or missing -> Option A

4. Quick Check:

   Missing volume = no code sync = no reload [OK]

Hint: Check volumes if reload doesn't work [OK]

Common Mistakes:

• Blaming CMD instead of volumes
• Assuming network affects file watching
• Thinking image cache affects reload

5. You want to set up a development environment with docker-compose that automatically reloads a React app on code changes. Which combination below is the best practice?

hard

A. Build image with source code baked in, run npm run build once

B. Use volumes to sync source code, run npm start with react-scripts watch mode inside container

C. Use volumes but disable hot reload to avoid conflicts

D. Run npm start on host and use container only for database

Solution

1. Step 1: Sync source code with volumes

   Volumes keep container code updated with host edits for live reload.

2. Step 2: Use React's built-in watch mode

   npm start with react-scripts runs dev server that reloads on changes.

3. Final Answer:

   Use volumes to sync source code, run npm start with react-scripts watch mode inside container -> Option B

4. Quick Check:

   Volumes + watch mode = best dev reload setup [OK]

Hint: Sync code + run dev server with watch mode [OK]

Common Mistakes:

• Baking code into image prevents live reload
• Disabling hot reload loses dev speed
• Running app only on host misses container benefits