Compose watch for development in Docker - Commands & Configuration

Introduction

When developing software, you want your app to update automatically as you change the code. Compose watch helps by restarting your app inside Docker whenever you save changes, so you don't have to stop and start it manually.

When you want your web app to reload automatically after editing files during development.

When you need to see changes in your backend service immediately without rebuilding the Docker image each time.

When working with multiple services that depend on each other and want to keep them running while updating code.

When you want to save time by avoiding manual container restarts after code changes.

When you want to test changes quickly in a local Docker environment before deploying.

Config File - docker-compose.yml

docker-compose.yml

version: '3.8'
services:
  web:
    image: node:18
    working_dir: /app
    volumes:
      - ./app:/app
    command: sh -c "npm install && npm run dev"
    ports:
      - "3000:3000"

This file defines a service named web that uses the official Node.js 18 image.

The working_dir sets the working directory inside the container to /app.

The volumes line mounts your local ./app folder into the container's /app folder, so code changes are visible inside the container.

The command runs npm install to install dependencies, then npm run dev to start the app in development mode with watching enabled.

The ports line maps port 3000 inside the container to port 3000 on your computer, so you can access the app in your browser.

Commands

This command starts the services defined in docker-compose.yml. It builds the container if needed, mounts your code, and runs the app in development mode with watching enabled.

Terminal

docker-compose up

Expected Output

Creating network "default" with the default driver

Creating compose-watch-web-1 ... done

Attaching to compose-watch-web-1

web_1  | 

web_1  | > my-app@1.0.0 dev /app

web_1  | > nodemon server.js

web_1  | 

web_1  | [nodemon] 2.0.22

web_1  | [nodemon] to restart at any time, enter `rs`

web_1  | [nodemon] watching path(s): *.*

web_1  | [nodemon] watching extensions: js,mjs,json

web_1  | [nodemon] starting `node server.js`

This command shows the status of the running containers to confirm your app is up and running.

Terminal

docker-compose ps

Expected Output

      Name                     Command               State           Ports         

--------------------------------------------------------------------------------

compose-watch-web-1   sh -c npm install && npm run dev   Up      0.0.0.0:3000->3000/tcp

This command stops and removes the containers and network created by docker-compose up, cleaning up your environment.

Terminal

docker-compose down

Expected Output

Stopping compose-watch-web-1 ... done

Removing compose-watch-web-1 ... done

Removing network default

Key Concept

If you remember nothing else from this pattern, remember: mounting your code as a volume lets the container see your changes instantly, enabling live reload during development.

Common Mistakes

Not mounting the local code directory as a volume in docker-compose.yml

Without the volume mount, the container uses its own copy of the code and won't see your changes, so live reload won't work.

Add a volumes section like './app:/app' to the service in docker-compose.yml to share your code with the container.

Running the app without a development watch command like nodemon or npm run dev

The app won't restart automatically on code changes, so you lose the benefit of live reload.

Use a command that runs the app in watch mode, for example 'nodemon server.js' or 'npm run dev' that includes watching.

Not exposing or mapping the container port to the host

You won't be able to access the app from your browser on your computer.

Add a ports section like '3000:3000' to docker-compose.yml to map container port to your machine.

Summary

Use docker-compose.yml to define your app service with code volume mounts and a watch command.

Run 'docker-compose up' to start the app with live reload enabled inside the container.

Use 'docker-compose ps' to check running containers and 'docker-compose down' to stop and clean up.

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