In this short offline video, Harkirat explains the concept of Bind Mounts in Docker and demonstrates their importance in containerizing a Next.js application. He shows how Bind Mounts enable real-time synchronization between the host machine and the container, facilitating seamless development with hot reloading
Bind Mounts are a type of volume in Docker that allows you to bind a directory or file from the host machine to a directory or file inside a Docker container. This means that any changes made to the files or directories on the host machine will be immediately reflected inside the container, and vice versa.
Bind Mounts are particularly useful when you want to share code or configuration files between the host machine and the container, enabling you to develop and test your application in real-time without the need to rebuild the container every time you make changes.
To understand the importance and requirement of Bind Mounts, let's create a fresh Next.js application and see how we can use Docker to run the application with hot reloading.
Create a new directory for your Next.js application and navigate to it:
mkdir nextapp
cd nextapp
Initialize a new Next.js project:
npx create-next-app .
Create a Dockerfile in the project root directory with the following content:
FROM node:21
WORKDIR /nextapp
COPY package* .
RUN npm install
COPY . .
CMD ["npm", "run", "dev"]
This Dockerfile sets up the environment for running the Next.js application inside a Docker container. It starts with the Node.js base image, sets the working directory to /nextapp, copies the package.json and package-lock.json files, installs the dependencies, copies the rest of the application code, and finally runs the npm run dev command to start the development server.
Build the Docker image:
docker build -t nextapp .
This command builds the Docker image based on the Dockerfile and tags it as nextapp.
Run the Docker container:
docker run -p 3000:3000 nextapp
This command starts a new container based on the nextapp image and maps the container's port 3000 to the host machine's port 3000. This allows you to access the Next.js application running inside the container by visiting http://localhost:3000 in your web browser.