Angular 11 and Docker

Angular is a popular JavaScript-based framework for building scalable and dynamic web applications. With its latest release - Angular 11, developers can leverage improved performance, bug fixes, and new features. Deploying an Angular application, however, can be a hassle, especially when it comes to configuring the environment for the application to run. This is where Docker comes in. Docker is a popular platform for building, deploying, and running applications within containers.

Configuring Angular 11 to run in Docker

To get started with Angular 11 and Docker, the first step is to install Docker on your machine. Refer to the official Docker documentation for installation instructions. Once installed, create a new Angular application using the Angular CLI.

ng new my-app

Once the application has been created, navigate into the application directory and create a new Dockerfile to define the Docker image to be built.

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

# Set the working directory to /app
WORKDIR /app

# Copy the current directory contents into the container at /app
COPY . /app

# Install the dependencies
RUN npm install

# Run the build
RUN npm run build --prod

# Expose port 80 to the Docker host
EXPOSE 80

# Define the command to run the application
CMD ["npm", "start"]

The Dockerfile above defines a Docker image that is based on the official node:12-alpine image. Within the container, the working directory is set to /app, and the contents of the current directory are copied into the container. The dependencies are then installed and the application is built using the npm run build --prod command. The application is then set to run on port 80 using the CMD command.

Building and Running the Docker Image

To build the Docker image, navigate into the application directory and run the following command:

docker build -t my-app .

This command builds the Docker image with the tag my-app.

To run the Docker image, use the docker run command, as shown below:

docker run -p 80:80 my-app

This command starts the container from the Docker image and maps port 80 on the Docker host to port 80 within the container.

Conclusion

In this article, we have seen how to configure an Angular 11 application to run in a Docker container by defining a Docker image that can be built and run. Using Docker for Angular 11 applications provides a more scalable and flexible option for deploying and running web applications.