Building and Updating Docker Containers: A Practical Hands-On Guide for Beginners

Introduction

In today’s fast-paced development environment, consistency and portability are critical. Applications must run reliably across different machines, environments, or even in the cloud. Docker provides a solution by packaging your application along with its dependencies into a container, ensuring it behaves the same everywhere.

In this hands-on guide, you’ll learn how to containerize a simple Node.js “Todo List” application. You don’t need prior experience with Node.js — the focus is on understanding how Docker builds, packages, and runs applications.

By the end of this tutorial, you’ll be able to:

• Build a Docker image using a Dockerfile
• Run your application inside a container
• Expose your app to your local host
• Understand how images, containers, and layers interact

Prerequisites

Ensure you have the following tools installed:

• Docker Desktop (latest version)
• Git (for cloning the sample app)
• VS Code or another code editor

These tools allow you to build and run containers smoothly.

Step 1: Prepare the Application

1. Open a new folder in VS Code and name it container.
   
   

2. Open a terminal in that folder.
   

3. Clone the sample Node.js application:
   

git clone https://github.com/docker/getting-started-app.git

You’ll see the following folder structure:

getting-started-app/
│── .dockerignore
│── package.json
│── README.md
│── spec/
│── src/
└── yarn.lock

This is the source code you will containerize.

Step 2: Create the Dockerfile

In the getting-started-app folder, create a file named Dockerfile and add:

# syntax=docker/dockerfile:1

FROM node:lts-alpine
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "src/index.js"]
EXPOSE 3000

Explanation:

• FROM selects a lightweight Node.js image
• WORKDIR sets the working directory inside the container
• COPY transfers your source code into the container
• RUN installs your dependencies
• CMD defines the command to start the app
• EXPOSE documents the port your app listens on

This file tells Docker how to build your image.

Step 3: Build the Docker Image

Navigate to your project folder by doing ls and cd into the folder/directory:

cd /path/to/getting-started-app

Build the image:

docker build -t getting-started .

What happens here:

1. Docker downloads the Node.js base image (if not already on your machine)
2. Copies your app files
3. Installs dependencies
4. Packages everything into a Docker image named getting-started

Step 4: Run Your Container

Start the container:

docker run -d -p 127.0.0.1:3000:3000 getting-started

Flags explained:

• -d: runs the container in the background
• -p HOST:CONTAINER: maps container port 3000 to your local port 3000

Visit http://localhost:3000 in your browser. Your Todo List app should be running. Add tasks, mark them complete, and see how everything works inside the container.

Step 5: Verify Running Containers

To check which containers are running:

docker ps

You’ll see the container ID, image name, port mappings, and status — confirming that your app is active.

Step 6: Update the Application

Suppose you want to change the “empty text” message to:

You have no todo items yet! Add one above!

1. Edit src/static/js/app.js and update line 56:

- <p className="text-center">No items yet! Add one above!</p>
+ <p className="text-center">You have no todo items yet! Add one above!</p>

1. Rebuild the Docker image:

docker build -t getting-started .

1. Start a new container using the updated code, You probably saw an error.

docker run -d -p 127.0.0.1:3000:3000 getting-started

1. Stop the old container:

docker ps
docker stop <container-id> 
docker rm <container-id>

docker ps: To get the ID of the container, then insert the Container ID into the docker stop and docker rm to update

1. Start the updated container:

docker run -dp 127.0.0.1:3000:3000 getting-started

Refresh http://localhost:3000 to see your updated text.