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.