Hot reloading with bind mounts in Docker - Commands & Configuration

Introduction

When you change your app's code, you want to see the updates immediately without restarting the container. Hot reloading with bind mounts lets your container use your local files directly, so changes appear right away.

When you are developing a web app and want to see code changes instantly in the browser.

When you want to avoid rebuilding your Docker image every time you edit a file.

When you want to share your local source code with a container for testing.

When you want faster feedback loops during development.

When you want to keep your container environment consistent but update code easily.

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 using the official Node.js image.

The volumes section mounts your local ./app folder into the container's /app folder, enabling hot reloading.

The command runs npm install to install dependencies and then starts the development server with hot reload.

The ports section maps port 3000 inside the container to port 3000 on your machine so you can access the app in your browser.

Commands

This command starts the container using the docker-compose.yml file. It mounts your local code into the container so changes update immediately.

Terminal

docker-compose up

Expected Output

Creating network "default" with the default driver

Creating myapp_web_1 ... done

Attaching to myapp_web_1

web_1  | 

web_1  | > myapp@1.0.0 dev /app

web_1  | > next dev

web_1  | 

web_1  | ready - started server on http://localhost:3000

This command shows the running containers started by docker-compose to confirm the app is running.

Terminal

docker-compose ps

Expected Output

    Name                  Command               State           Ports         

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

myapp_web_1   sh -c npm install && npm run dev   Up      0.0.0.0:3000->3000/tcp

This command stops and removes the containers, networks, and volumes created by docker-compose when you finish working.

Terminal

docker-compose down

Expected Output

Stopping myapp_web_1 ... done

Removing myapp_web_1 ... done

Removing network default

Key Concept

If you remember nothing else from this pattern, remember: bind mounts let your container use your local files directly so code changes appear instantly without rebuilding.

Common Mistakes

Not mounting the correct local folder to the container's working directory.

The container won't see your code changes, so hot reloading won't work.

Ensure the volume path matches your local code folder and the container's working directory.

Running the app without a development server that supports hot reload.

Even with bind mounts, the app won't reload automatically on code changes.

Use a development server or tool that watches files and reloads, like 'npm run dev' for Node.js.

Not mapping container ports to local ports.

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

Map the container port to a local port using the ports section or -p flag.

Summary

Use bind mounts to share your local code folder with the container for instant updates.

Start the container with docker-compose up to run the app with hot reload enabled.

Stop the container with docker-compose down when done to clean up resources.

Practice

1. What is the main purpose of using bind mounts in Docker for hot reloading?

easy

A. To isolate container files from the host

B. To create a backup of container files

C. To increase container startup speed

D. To link local files to the container for instant updates

Solution

1. Step 1: Understand bind mounts role

   Bind mounts connect files from your computer directly into the container.

2. Step 2: Recognize hot reloading benefit

   This connection allows changes on your computer to appear immediately inside the container.

3. Final Answer:

   To link local files to the container for instant updates -> Option D

4. Quick Check:

   Bind mounts = instant file updates [OK]

Hint: Bind mounts sync local files live to container [OK]

Common Mistakes:

• Thinking bind mounts create backups
• Believing bind mounts speed up container start
• Assuming bind mounts isolate files

2. Which of the following is the correct syntax to run a Docker container with a bind mount for hot reloading?

easy

A. docker run -v /host/path:/container/path image_name

B. docker run --mount /host/path:/container/path image_name

C. docker run -bind /host/path:/container/path image_name

D. docker run -link /host/path:/container/path image_name

Solution

1. Step 1: Recall Docker bind mount syntax

   The correct flag for bind mounts is '-v' followed by host and container paths separated by a colon.

2. Step 2: Check options for correctness

   Only docker run -v /host/path:/container/path image_name uses '-v' with correct path format; others use invalid flags.

3. Final Answer:

   docker run -v /host/path:/container/path image_name -> Option A

4. Quick Check:

   Bind mount flag = -v [OK]

Hint: Use -v for bind mounts in docker run [OK]

Common Mistakes:

• Using --mount without proper syntax
• Using -bind or -link which are invalid
• Mixing up host and container paths

3. Given this command: docker run -v $(pwd)/app:/usr/src/app mynodeapp, what happens when you edit a file inside the local app folder?

medium

A. The container crashes due to file conflicts

B. The container ignores changes until restarted

C. The container's /usr/src/app files update immediately without restart

D. The container copies files back to the host folder

Solution

1. Step 1: Understand bind mount effect

   The command mounts the local 'app' folder into the container path '/usr/src/app'.

2. Step 2: Recognize hot reloading behavior

   Editing files locally updates the container files instantly because of the bind mount.

3. Final Answer:

   The container's /usr/src/app files update immediately without restart -> Option C

4. Quick Check:

   Bind mount = instant container file update [OK]

Hint: Local edits reflect instantly inside container [OK]

Common Mistakes:

• Thinking container needs restart to see changes
• Assuming container crashes on file change
• Believing files copy back to host automatically

4. You set up a bind mount with docker run -v /home/user/app:/app myapp but changes in /home/user/app do not reflect inside the container. What is the likely cause?

medium

A. The container overwrites /app on start, hiding host changes

B. The -v flag syntax is incorrect

C. Docker daemon is not running

D. The host path /home/user/app does not exist

Solution

1. Step 1: Check bind mount behavior on container start

   If the container image has files in /app, they may overwrite the mount, hiding host changes.

2. Step 2: Verify other options

   The syntax is correct, Docker daemon running is assumed, and path existence usually causes errors, not silent failure.

3. Final Answer:

   The container overwrites /app on start, hiding host changes -> Option A

4. Quick Check:

   Container files can hide bind mount changes [OK]

Hint: Check if container files overwrite mount path [OK]

Common Mistakes:

• Assuming syntax error without checking
• Ignoring container image files at mount path
• Not verifying host path existence

5. You want to enable hot reloading for a Node.js app inside Docker using bind mounts. Which approach best ensures code changes reflect immediately without restarting the container?

hard

A. Copy files into container at build time and run node app.js

B. Use docker run -v $(pwd):/app and run nodemon inside the container

C. Use docker run -v $(pwd):/app and run node app.js inside the container

D. Run container without volumes and restart container on changes

Solution

1. Step 1: Understand hot reloading needs

   Hot reloading requires file changes to be seen by the running app without restart.

2. Step 2: Choose correct tools and setup

   Bind mount syncs files, and using 'nodemon' watches for changes and reloads automatically.

3. Final Answer:

   Use docker run -v $(pwd):/app and run nodemon inside the container -> Option B

4. Quick Check:

   Bind mount + nodemon = hot reload [OK]

Hint: Combine bind mount with nodemon for live reload [OK]

Common Mistakes:

• Running node without watcher misses changes
• Copying files at build loses live update
• Restarting container manually wastes time