Deploying an Angular App with Docker: A Step-by-Step Guide

🚀 Introduction

Docker has revolutionized the way developers build, ship, and run applications. It provides a containerized environment that ensures consistency across different machines, making it a great choice for deploying Angular applications.

In this guide, we’ll walk through the process of setting up, containerizing, and running an Angular project with Docker. Whether you’re a beginner or an experienced developer, this tutorial will help you streamline your Angular development workflow with Docker.

Why Use Docker for Angular?

🔹 Eliminates “It works on my machine” issues
🔹 Simplifies setup with pre-configured environments
🔹 Ensures consistency across different operating systems
🔹 Eases deployment to cloud services
🔹 Makes CI/CD integration smoother

Step 1: Install Docker Desktop

To begin, you need Docker Desktop installed on your system.

🔹 Download Docker Desktop: Docker Hub
🔹 Choose the platform (Windows, macOS, or Linux)
🔹 Install and restart your system
🔹 Sign in to Docker using your email

After installation, open a terminal and run:


docker --version

This verifies that Docker is installed correctly.

Step 2: Set Up an Angular Project

If you already have an Angular project, you can skip this step. Otherwise, create a new Angular app:


mkdir angular-docker-app
cd angular-docker-app
ng new my-angular-app

Navigate to the project directory:


cd my-angular-app

Open the project in VS Code:


code .

Step 3: Create a Dockerfile for Angular

Inside your Angular project root, create a file named Dockerfile and add the following content:


# Use a lightweight Node.js image
FROM node:alpine  

# Set the working directory
WORKDIR /app  

# Copy package.json and install dependencies
COPY package.json package-lock.json ./  
RUN npm install  

# Copy the project files
COPY . .  

# Build the Angular app
RUN npm run build --prod  

# Expose the default Angular port
EXPOSE 4200  

# Run the application
CMD ["npm", "start"]

Step 4: Build and Run the Docker Image

Now, let’s build the Docker image:

docker build -t angularappimage .

After the build completes, check the image:

docker images

To run the container:

docker run -d -p 4201:4200 angularappimage

Now, open your browser and go to http://localhost:4201 to see your Angular app running inside a Docker container! 🎉

Step 5: Updating the Angular Code

If you make changes to your Angular project, you’ll need to:

1️⃣ Stop the running container:

docker ps
docker stop <container_id>

2️⃣ Rebuild the image:

docker build -t angularappimage .

3️⃣ Restart the container:

docker run -d -p 4201:4200 angularappimage

Now, refresh your browser to see the changes.

Optional: Install the Docker Extension in VS Code

VS Code suggests installing the Docker extension, which provides:
✅ Dockerfile syntax highlighting
✅ One-click build & run options
✅ Integrated container management

You can install it from the Extensions Marketplace in VS Code.

Conclusion

Congratulations! 🎉 You’ve successfully deployed an Angular project using Docker.

Here is my youtube link :::: https://youtu.be/PvwvgoMrngk

🔹 What We Covered:
✅ Installing Docker Desktop
✅ Creating an Angular project
✅ Writing a Dockerfile
✅ Building & running the Docker container
✅ Updating the Angular app in Docker

🚀 What’s Next?
🔜 I’ll be posting tutorials on Java Full Stack with Docker Compose and Podman—stay tuned!

💡 Let’s Connect!

If you found this tutorial helpful, support me by liking, sharing, and subscribing to my YouTube channel!

📩 For professional training, contact me via WhatsApp or email.

🔗 Follow me for more tech updates:
👉 YouTube: https://www.youtube.com/channel/UCr1CYrN8BPvyXkO8ZJqakvA
👉 Medium: https://medium.com/@androidmani
👉 LinkedIn: https://www.linkedin.com/in/androidmani/

#Angular #Docker #DockerTutorial #AngularWithDocker #FullStackDevelopment #DockerCompose #DevOps #WebDevelopment #NodeJS #DockerForBeginners #FrontendDevelopment #AngularProject #TechTutorial

Search This Blog

Androidmani