Introduction to Docker and Angular

Before we dive into Docker deployment, let's clarify what Docker and Angular are briefly.

Docker is a platform that enables developers to automate the deployment of applications inside lightweight containers. These containers package all dependencies, ensuring that the application runs consistently across different environments.

Angular, on the other hand, is a robust frontend framework for building single-page applications. It allows developers to create dynamic web applications that offer a rich user experience.

Why Use Docker for Angular Apps?

Using Docker for deploying Angular applications provides several advantages:

1. Consistency: Docker containers behave the same regardless of where they’re run, eliminating the "it works on my machine" problem.
2. Scalability: Docker makes it easy to scale your application horizontally by simply spinning up additional containers.
3. Isolation: Each application runs in its own environment, making it easier to manage dependencies and conflicts.

Prerequisites

To follow along, ensure you have the following installed:

• Node.js (with npm)
• Angular CLI
• Docker
• A basic Angular project (if you need one, create it using ng new my-app)

Step 1: Create a Dockerfile

The first step in deploying your Angular app with Docker is to create a Dockerfile. This file defines how Docker images are built, specifying various layers used for installation and configuration.

Create a new file named Dockerfile at the root of your Angular project and add the following content:

# Step 1: Specify a base image
FROM node:14 AS build

# Step 2: Set working directory
WORKDIR /app

# Step 3: Copy package.json and install dependencies
COPY package*.json ./
RUN npm install

# Step 4: Copy the rest of the application files
COPY . .

# Step 5: Build the application for production
RUN npm run build --prod

# Step 6: Serve the application
FROM nginx:alpine
COPY --from=build /app/dist/my-app /usr/share/nginx/html

# Expose port 80
EXPOSE 80

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

Explanation of the Dockerfile

• FROM node:14 AS build: This line specifies the base image from which we’ll build our application. Node.js 14 is used for this purpose.
• WORKDIR /app: Sets the working directory inside the container.
• *COPY package.json ./**: Copies the package.json and package-lock.json files into the working directory.
• RUN npm install: Installs project dependencies.
• COPY . .: Copies the rest of the application files to the container.
• RUN npm run build --prod: Builds the Angular application in production mode.
• FROM nginx:alpine: Uses the lightweight Nginx image to serve the built Angular app.
• COPY --from=build /app/dist/my-app /usr/share/nginx/html: Copies the build artifacts from the previous stage to the Nginx directory.
• EXPOSE 80: Exposes port 80, which will serve your application.
• CMD ["nginx", "-g", "daemon off;"]: Starts Nginx as the main process.

Step 2: Build the Docker Image

Now that we have our Dockerfile, we can build our Docker image. Navigate to your project root in the terminal and run:

docker build -t my-angular-app .

Here, my-angular-app is the name we’re giving to our Docker image. The . at the end specifies that Docker should look for the Dockerfile in the current directory.

Step 3: Run the Docker Container

After building the image, the next step is to run a container based on this image:

docker run -d -p 8080:80 my-angular-app

In this command:

• -d: Runs the container in detached mode.
• -p 8080:80: Maps port 8080 on your host to port 80 in the container.

You should now be able to access your Angular application by navigating to http://localhost:8080 in your browser.

Step 4: Verify Deployment

Congratulations! Your Angular app should now be running inside a Docker container. To verify everything is working correctly:

1. Open your browser and go to http://localhost:8080.
2. You should see your Angular application displayed.

Managing Docker Containers

Finally, here are a few commands to manage your Docker containers:

• List all running containers:

  docker ps

• Stop a running container:

  docker stop <container_id>

• Remove a container:

  docker rm <container_id>

• List all images:

  docker images

Utilizing these commands can help immensely while managing your Angular applications deployed with Docker.

Conclusion

Now you have a fully functional Angular application running in a Docker container, accessible from your local browser. In this guide, we covered how to set up Docker, create a Dockerfile, build the image, and run it effectively. With this knowledge, you can start leveraging Docker for deploying your Angular applications in various environments!