Containerizing Your Angular App: A Guide to Docker and Angular Integration

Back to Blog
Angular, Frontend, Software Development, Technology

Introduction

Docker is a tool designed to make it easier to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and ship it all out as one package.

Unlike traditional virtual machines, Docker containers are lightweight and share the same host operating system, virtualizing only at a software level. Docker Engine runs on Linux, Windows, and macOS, supporting both Linux and Windows containers.

Docker simplifies version control, dependency management, and ensures consistency between development and production environments. It’s a powerful tool for managing multiple servers and organizing code for deployment. 🚀

Dockernize an Angular Application

To Dockerize an Angular App, follow these steps:

1. Install Docker

Ensure you have Docker installed on your machine. If not, download and install it from the official Docker website.

2. Create an Angular App:

If you don’t have an existing Angular app, create one using the Angular CLI:

ng new my-angular-app

3. Navigate to Your Angular App Directory:

Open a terminal and navigate to your Angular app’s root directory.

4. Create a Dockerfile:

  • Create a file named Dockerfile (without any file extension) in your Angular app folder.
  • Add the following content to your Dockerfile:
# Use an official Node.js runtime as the base image
FROM node:20 AS build

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json to the container
COPY package*.json ./

# Install app dependencies
RUN npm install

# Copy the rest of the app source code to the container
COPY . .

# Build the Angular app
RUN node_modules/.bin/ng build --configuration production

# Use NGINX as the production server
FROM nginx:alpine
COPY --from=build /app/dist/app/dist/my-angular-app /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

Replace my-angular-app with your actual Angular app name.

5. Build a Docker Image:

  • In the same directory as your Dockerfile, run: 
    docker build -t my-angular-app .
  • This command builds a Docker image named my-angular-app.

6. Run a Docker Container:

  • Once the image is built, run a container from it: 
    docker run -p 8080:80 my-angular-app
  • This maps port 8080 on your host machine to port 80 inside the container.

7. Access Your Angular App:

  • Open a web browser and navigate to http://localhost:8080.
  • You should see your Angular app running inside the Docker container.

That’s it! Your Angular app is now Dockerized and ready for deployment. 🚀

Share this post

Back to Blog