Dockerizing Angular Applications

Docker is a powerful tool for creating, deploying, and running applications in containers. This lesson outlines how to Dockerize an Angular application effectively, allowing for consistent environments across development and production.

• Basic understanding of Angular
• Docker installed on your machine
• Node.js and npm installed
• Familiarity with command-line interface

1. Step 1: Create an Angular Application

   ng new my-angular-app

2. Step 2: Create a Dockerfile

   In the root directory of your Angular application, create a file named Dockerfile and add the following content:

   FROM node:14 AS build
   WORKDIR /app
   COPY package*.json ./
   RUN npm install
   COPY . .
   RUN npm run build --prod
   
   FROM nginx:alpine
   COPY --from=build /app/dist/my-angular-app /usr/share/nginx/html
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]

3. Step 3: Create a .dockerignore file

   To avoid copying unnecessary files, create a file named .dockerignore and add:

   node_modules
   dist
   .git
   .gitignore
   Dockerfile
   .dockerignore

4. Step 4: Build the Docker Image

   docker build -t my-angular-app .

5. Step 5: Run the Docker Container

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

   Your application should now be accessible at http://localhost:8080.

To ensure optimal performance and maintainability, consider the following best practices:

• Keep your images small by using multi-stage builds.
• Regularly update your base images to include security patches.
• Use environment variables for configuration.
• Document your Dockerfile for clarity.