Containerizing an Angular Application using Docker

In modern development workflows, Docker has become a vital tool for packaging applications into containers. A container is a lightweight, portable, and self-sufficient unit that ensures your application works seamlessly across different environments. In this article, we’ll walk through how to containerize a simple Angular application using Docker and manage it with Docker Compose, making it easier to deploy and scale applications.

3. Understanding the Project Structure

Provide a basic explanation of the folder structure for your Angular application, especially how it will look once containerized. This will help readers understand where everything goes.

Example Project Structure:

/my-node-app
  ├── src
  ├── package.json
  ├── Dockerfile
  ├── docker-compose.yml

• src: The main Angular application folder.
• package.json: Contains the dependencies and scripts to run the application.
• Dockerfile: A text file that contains instructions on how to build a Docker image.
• docker-compose.yml: Defines services and how to manage multi-container setups.

Check out the below configuration for containerizing the Angular project. through the below configuration, we can containerize the angular application

file Dockerfile

# Use the official Node.js image for building Angular
FROM node:16

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json for dependency installation
COPY package*.json ./

# Install Angular dependencies
RUN npm install

# Copy the application code into the container
COPY . .

# Build the Angular app
RUN npm run build --prod

# Use Nginx to serve the built Angular app
FROM nginx:alpine
COPY --from=0 /app/dist /usr/share/nginx/html

# Expose port for Angular app
EXPOSE 80

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

you can run the file directly using

docker run -p 80:80 sampleapp

To make it production-ready add a compose file to it docker-compose.yml,

version: '3.8'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"
    environment:
      - NODE_ENV=production
    volumes:
      - .:/usr/src/app
    restart: always

through this, we can manage different environments and also add other services like Postgres or MySQL or maybe any alert services

To get access to more articles, Join our discord community for a better learning experience https://discord.gg/D2EU5N6z