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

Comments

Post a Comment

Popular posts from this blog

SwiftUI - Tutorial 2 - 🧵 Understanding @MainActor in SwiftUI — A Beginner’s Guide

  🧵 Understanding @MainActor in SwiftUI — A Beginner’s Guide When you start building iOS apps with SwiftUI , sooner or later you’ll run into this warning: ⚠️ “Publishing changes from background threads is not allowed; make sure to publish values from the main thread (via operators like receive(on:)) on model updates.” Sounds scary? Don’t worry 🙂 This is exactly where @MainActor comes to the rescue. 🔹 What is @MainActor ? In Swift, an actor is like a traffic controller that makes sure only one thing accesses a resource at a time. The @MainActor is a special actor provided by Swift that guarantees the code it marks will always run on the main thread . And that’s important because in iOS development: UI updates must always happen on the main thread. 🔹 Why do we need @MainActor in SwiftUI? SwiftUI automatically refreshes the UI when your @Published properties change. But if those changes happen on a background thread (for example, after fetching data from ...
Read more

SonarQube With Angular 19 on Windows: A Complete Setup and Integration Guide

  Welcome to my detailed tutorial on integrating  SonarQube  with an  Angular 19  project on  Windows ! This video will guide you through the installation and configuration process for SonarQube to analyze your code quality and improve the development workflow. In this step-by-step guide, we’ll set up the required software, configure the necessary tools, and integrate  SonarQube  with an  Angular 19  project. Whether you're a beginner or an experienced developer, this tutorial will help you understand how to run effective code analysis using SonarQube. Here is my youtube link ::::  https://youtu.be/PvwvgoMrngk What You Will Learn: In this tutorial, we will cover the following key steps: Installing Required Software:  Before starting, we need a few software installations: SonarQube:  Used for analyzing code quality and identifying issues such as bugs, vulnerabilities, and code smells. SonarScanner:  A tool used to send...
Read more

Setting Up Jenkins for Flutter App on macOS

Image
Introduction: In this blog post, we will walk through the process of setting up Jenkins on macOS to automate the building and testing of your Flutter applications. Jenkins is a popular open-source automation tool that helps to integrate and automate various stages of your Flutter app's development lifecycle. Way 1: Pipeline Flow For setting up Jenkins with a pipeline flow, you can refer to the following Stack Overflow discussion to resolve issues like "Flutter not found":  Flutter Jenkins Flutter not found issue https://stackoverflow.com/questions/75422046/flutter-jenkins-flutter-not-found-issue Step 1: Install Jenkins on macOS First, we need to install Homebrew if you don't have it already. Open your terminal and run the following command: /bin/bash -c " $(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh) " After Homebrew is installed, run the following command to install Jenkins: brew install jenkins-lts Include Screenshot: I...
Read more