Dockerizing a Angular Application

Introduction:

Angular is a widely-used open-source framework for building dynamic web applications. Docker is a popular tool used for creating lightweight, portable containers that can be used to deploy applications. Using Docker to deploy an Angular application can make it easier to manage the application’s dependencies and configuration, as well as provide a consistent runtime environment across different platforms. In this blog post, we will show you how to create a Dockerfile for an Angular application and use it to build a container.

First, let’s take a look at the Dockerfile:

# Use an official Node.js runtime as a parent image
FROM node:14.15.0-alpine

# Set the working directory to /app
WORKDIR /app

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

# Install dependencies
RUN npm install

# Install Angular CLI
RUN npm install -g @angular/cli

# Copy the rest of the application code to the container
COPY . .

# Build the Angular app
RUN ng build --prod

# Expose port 80
EXPOSE 80

# Start the application
CMD ["npm", "run", "start:prod"]

Let’s break this down line by line:

• FROM node:14.15.0-alpine: This tells Docker to use the official Node.js runtime as the parent image for our container. We're using the Alpine variant of the Node.js image, which is a lightweight version that's perfect for containers.
• WORKDIR /app: This sets the working directory for the container to /app.
• COPY package*.json ./: This copies the package.json and package-lock.json files to the container.
• RUN npm install: This runs the npm install command to install the dependencies listed in the package.json file.
• RUN npm install -g @angular/cli: This installs the Angular CLI globally in the container.
• COPY . .: This copies the rest of the application code to the container.
• RUN ng build --prod: This builds the Angular application for production.
• EXPOSE 80: This tells Docker to expose port 80 from the container.
• CMD ["npm", "run", "start:prod"]: This runs the npm run start:prod command to start the application.

Now that we have our Dockerfile, we can use it to build a Docker image for our Angular application. We can do this using the docker build command:

docker build -t my-angular-app .

This will build an image with the tag my-angular-app.

Next, we can use this image to create a container for our application. We can do this using the docker run command:

docker run --name my-angular-app -p 80:80 -e NODE_ENV=production -d my-angular-app

This will create a container with the name my-angular-app, expose port 80 from the container to port 80 on the host machine, set the NODE_ENV environment variable to production, and run the container in detached mode.

Finally, we can use Docker Compose to define and run our container.

We can do this by creating a docker-compose.yml file:

version: '3.8'

services:
  app:
    container_name: my-angular-app
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"
    environment:
      NODE_ENV: production
    restart: always

This file defines a service called app that builds the Docker image using the Dockerfile we created earlier, exposes port 80 from the container, sets the NODE_ENV environment variable to production, and restarts the container automatically if it fails.

Conclusion:

In conclusion, using Docker to deploy an Angular application can make it easier to manage the application’s dependencies and configuration, as well as provide a consistent runtime environment across different platforms. By following the steps outlined in this blog post, you can create a Dockerfile for your Angular application and use it to build a container. This can simplify the deployment process and help ensure that your application runs smoothly in any environment.