Dockerizing Web Applications — Easy Step-by-Step Guide

Docker allows us to package an application, its dependencies, and its configuration into a Docker Image, which can then be used to create and run Containers.

A simple Docker workflow is:

Application → Dockerfile → Docker Image → Docker Container → Browser

1. Dockerize an HTML Website Using Nginx

Nginx is a lightweight and popular web server used to serve HTML, CSS, JavaScript, and other static files.

Step 1 — Create Your HTML Website

Create a folder for your project and open it in Visual Studio Code.

Example:

my-html-website/
│
├── index.html
├── style.css
└── script.js

Create your index.html file.

Step 2 — Create a Dockerfile

Inside the project folder, create a file named exactly:

Dockerfile

Do not add .txt or another extension.

Add:

FROM nginx:alpine

COPY . /usr/share/nginx/html/

EXPOSE 80

What does this mean?

Command	Meaning
FROM nginx:alpine	Uses the lightweight Nginx image as the base image
COPY . /usr/share/nginx/html/	Copies your website files into Nginx's web directory
EXPOSE 80	Documents that Nginx uses port 80

Step 3 — Build the Docker Image

Open CMD or PowerShell inside the project folder:

docker build -t webserver-image:v1 .

Meaning

• docker build → Creates a Docker image

• -t → Gives the image a name and tag

• webserver-image → Image name

• v1 → Version/tag

• . → Use the current folder as the build context

Check the image:

docker images

Step 4 — Run the Container

docker run -d -p 8080:80 --name html-nginx webserver-image:v1

Meaning

• -d → Runs the container in the background

• -p 8080:80 → Maps your computer's port 8080 to Nginx's container port 80

• --name html-nginx → Gives the container a name

Step 5 — Open the Website

Open your browser and visit:

http://localhost:8080

Your HTML website should now be running inside a Docker container.

2. Dockerize an HTML Website Using Apache2

Apache HTTP Server is another popular web server that can serve HTML websites.

Step 1 — Create Your HTML Website

Example:

apache-html-site/
│
├── index.html
├── style.css
└── script.js

Step 2 — Create the Dockerfile

Create:

Dockerfile

Add:

FROM httpd:2.4

COPY . /usr/local/apache2/htdocs/

EXPOSE 80

Explanation

Command	Meaning
FROM httpd:2.4	Uses Apache HTTP Server image
COPY . /usr/local/apache2/htdocs/	Copies website files into Apache's web directory
EXPOSE 80	Documents Apache's HTTP port

Step 3 — Build the Image

docker build -t apache-html-site:v1 .

Check it:

docker images

Step 4 — Run the Container

docker run -d -p 8084:80 --name apache-html apache-html-site:v1

Step 5 — Open in Browser

http://localhost:8084

Your HTML website is now running through Apache inside Docker.

3. Dockerize a React Website

For a React application, we normally use a multi-stage Docker build.

The process is:

React Source Code
       ↓
Node.js
       ↓
npm install
       ↓
npm run build
       ↓
Production Build
       ↓
Nginx
       ↓
Docker Container

The first stage uses Node.js to build the React application.

The second stage uses Nginx to serve the generated static files.

Step 1 — Create Your React Application

Your project should normally look similar to:

react-app/
│
├── public/
├── src/
├── package.json
├── package-lock.json
└── Dockerfile

Important: Create the Dockerfile in the React project's root folder, not normally inside the src folder.

Step 2 — Create the Dockerfile

# Stage 1: Build the React application
FROM node:alpine AS build

# Set working directory
WORKDIR /app

# Copy package files first
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy application source code
COPY . .

# Create production build
RUN npm run build


# Stage 2: Serve the application using Nginx
FROM nginx:alpine

# Copy React production files to Nginx
COPY --from=build /app/build /usr/share/nginx/html

# Nginx uses port 80
EXPOSE 80

# Keep Nginx running in the foreground
CMD ["nginx", "-g", "daemon off;"]

What is happening?

Stage 1 — Node.js

Node.js is used to:

1. Install React dependencies.

2. Copy the source code.

3. Run npm run build.

4. Generate optimized production files.

Stage 2 — Nginx

Nginx is used to:

1. Take the production build.

2. Serve the static files.

3. Provide the website through HTTP.

This approach produces a much smaller production image than keeping Node.js and all development dependencies in the final image.

Step 3 — Create .dockerignore

Create a file named:

.dockerignore

Example:

node_modules
npm-debug.log
build
.git
.gitignore
*.md
Dockerfile
.dockerignore

This prevents unnecessary files from being sent to Docker during the build.

Step 4 — Build the React Image

Open CMD or PowerShell in the React project folder:

docker build -t reactapp:v1.1 .

Step 5 — Check the Image

docker images

You should see your React image in the list.

Step 6 — Run the Container

docker run -d --name reactappContainer -p 805:80 reactapp:v1.1

Step 7 — Open React Application

Open:

http://localhost:805

Your React application should now be running inside Docker.

Important Note

Some modern React projects use Vite instead of Create React App.

For Vite, the production folder is normally:

dist

instead of:

build

In that case, the Nginx line should be:

COPY --from=build /app/dist /usr/share/nginx/html

4. Dockerize a Node.js Web Application

Node.js applications usually run their own application server.

For example:

Browser
   ↓
Port 3000
   ↓
Node.js Application

Step 1 — Create Your Node.js Application

Example:

node-app/
│
├── server.js
├── package.json
├── package-lock.json
└── Dockerfile

Step 2 — Create the Dockerfile

FROM node:24-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["node", "server.js"]

Explanation

Command	Purpose
FROM node:24-alpine	Uses Node.js Alpine image
WORKDIR /app	Creates/uses /app inside the container
COPY package*.json ./	Copies package files
RUN npm install	Installs Node.js dependencies
COPY . .	Copies application code
EXPOSE 3000	Documents application port
CMD ["node", "server.js"]	Starts the Node.js application

Step 3 — Build the Image

docker build -t node-app:v1 .

Step 4 — Run the Container

docker run -d --name node-container -p 3000:3000 node-app:v1

Step 5 — Open the Application

Open:

http://localhost:3000

Important

Your Node.js application must listen on:

0.0.0.0

inside the container, rather than only localhost, otherwise the application may not be accessible from your host machine.

5. Push a Docker Image to Docker Hub

Docker Hub can be used to store and share Docker images.

The basic process is:

Build
  ↓
Tag
  ↓
Login
  ↓
Push
  ↓
Docker Hub

Step 1 — Build the Image

docker build -t node-app:v1 .

Step 2 — Login to Docker Hub

docker login

Enter your Docker Hub username and password/token when prompted.

Step 3 — Tag the Image

Replace yourdockerusername with your actual Docker Hub username:

docker tag node-app:v1 yourdockerusername/node-app:v1

For example:

docker tag node-app:v1 parveenbarak/node-app:v1

Step 4 — Check Images

docker images

Step 5 — Push the Image

docker push yourdockerusername/node-app:v1

Example:

docker push parveenbarak/node-app:v1

The image is now available in your Docker Hub repository.

6. Pull an Image from Docker Hub

If the image is available on Docker Hub, another computer can download it.

Step 1 — Login

docker login

Step 2 — Pull the Image

docker pull yourdockerusername/node-app:v1

Example:

docker pull parveenbarak/node-app:v1

Step 3 — Run the Downloaded Image

docker run -d -p 3000:3000 yourdockerusername/node-app:v1

Then open:

http://localhost:3000

7. Remove Docker Images

To remove a local image:

docker rmi node-app:v1

To remove a Docker Hub-tagged image:

docker rmi yourdockerusername/node-app:v1

Check images:

docker images

8. Dockerize a Python Application

Python applications can also be packaged and run inside Docker.

For this example, we will create a simple Python HTTP server.

Step 1 — Create app.py

Create:

app.py

Add:

from http.server import SimpleHTTPRequestHandler, HTTPServer

PORT = 5000

class MyHandler(SimpleHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header("Content-type", "text/html")
        self.end_headers()
        self.wfile.write(b"Hello World from Docker in Browser!")

server = HTTPServer(("0.0.0.0", PORT), MyHandler)

print(f"Server running on port {PORT}")

server.serve_forever()

Step 2 — Create the Dockerfile

Project structure:

python-app/
│
├── app.py
└── Dockerfile

Dockerfile:

FROM python:3.10-slim

WORKDIR /app

COPY app.py .

EXPOSE 5000

CMD ["python", "app.py"]

Explanation

Command	Meaning
FROM python:3.10-slim	Uses a lightweight Python image
WORKDIR /app	Sets /app as the working directory
COPY app.py .	Copies the Python application
EXPOSE 5000	Documents port 5000
CMD	Starts the Python application

Step 3 — Build the Image

docker build -t python-web:v1 .

Step 4 — Run the Container

docker run -d --name python-web -p 5000:5000 python-web:v1

Step 5 — Open in Browser

http://localhost:5000

You should see:

Hello World from Docker in Browser!

9. Complete Docker Image Workflow

The most important Docker commands to remember are:

Command	Purpose
docker build	Build an image from a Dockerfile
docker images	List local Docker images
docker run	Create and start a container
docker ps	Show running containers
docker ps -a	Show all containers
docker stop	Stop a container
docker start	Start a stopped container
docker rm	Remove a container
docker rmi	Remove an image
docker login	Login to Docker Hub
docker tag	Give an image another name/tag
docker push	Upload an image to Docker Hub
docker pull	Download an image from Docker Hub

10. Easy Real-Life Example

Think about Docker like a food delivery system:

Dockerfile = Recipe

It tells Docker how to prepare your application.

Docker Image = Ready-to-use packaged food

It contains everything required to run the application.

Docker Container = The food being served

The image is used to create a running container.

docker build = Cooking the food

docker build -t myapp:v1 .

docker push = Putting the food in an online store

docker push username/myapp:v1

docker pull = Ordering the ready food

docker pull username/myapp:v1

docker run = Serving the food

docker run -d -p 8080:80 myapp:v1

11. Overall Docker Workflow

For most web applications, remember this simple workflow:

1. Create Application
        ↓
2. Create Dockerfile
        ↓
3. Write Docker Instructions
        ↓
4. docker build
        ↓
5. Docker Image Created
        ↓
6. docker run
        ↓
7. Docker Container Started
        ↓
8. Open localhost in Browser
        ↓
9. docker tag
        ↓
10. docker push
        ↓
11. Docker Hub
        ↓
12. docker pull
        ↓
13. Run Application Anywhere

Quick Examples

HTML + Nginx

docker build -t html-site:v1 .
docker run -d -p 8080:80 html-site:v1

Browser:

http://localhost:8080

HTML + Apache

docker build -t apache-site:v1 .
docker run -d -p 8084:80 apache-site:v1

Browser:

http://localhost:8084

React + Nginx

docker build -t reactapp:v1 .
docker run -d -p 805:80 reactapp:v1

Browser:

http://localhost:805

Node.js

docker build -t node-app:v1 .
docker run -d -p 3000:3000 node-app:v1

Browser:

http://localhost:3000

Python

docker build -t python-web:v1 .
docker run -d -p 5000:5000 python-web:v1

Browser:

http://localhost:5000

Key Point to Remember

Dockerfile → Image → Container

• Dockerfile: Instructions for building your application image.

• Image: Packaged, read-only template containing the application and required dependencies.

• Container: A running instance of the image.

• Port Mapping: Connects a port on your computer to a port inside the container.

• Docker Hub: A registry where Docker images can be stored and shared.