Add Angular to Docker

networks:
wpbedrock:
driver: bridge

services:
# Nginx Service
nginx:
image: nginx:stable-alpine
container_name: ${APP_NAME}_nginx
ports:
– "2500:80"
restart: always
links:
– php
volumes:
– ./bedrock:/var/www/html
– ./docker/nginx/site.conf:/etc/nginx/conf.d/default.conf:rw
– ./docker/logs/nginx:/var/logs/nginx:rw
depends_on:
– php
– mysql
networks:
– wpbedrock

# PHP Service
php:
build:
context: .
dockerfile: Dockerfile
container_name: ${APP_NAME}_php
volumes:
– ./bedrock:/var/www/html # Fixed typo in path
ports:
– "2501:9000"
restart: always
networks:
– wpbedrock

# MySQL Service
mysql:
image: mysql:8.0
container_name: ${APP_NAME}_mysql_db
environment:
MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
MYSQL_DATABASE: ${DB_NAME}
MYSQL_USER: ${DB_USER}
MYSQL_PASSWORD: ${DB_PASSWORD}
volumes:
– db_data:/var/lib/mysql
ports:
– "2502:3306"
networks:
– wpbedrock

# # Node Service
# node:
# image: node:latest # Use an appropriate Node.js version
# working_dir: /var/www/html
# volumes:
# – ./bedrock:/var/www/html
# networks:
# – wpbedrock

# Adminer Service
adminer:
image: adminer
container_name: ${APP_NAME}_adminer
ports:
– "2530:8080"
restart: always
networks:
– wpbedrock

volumes:
db_data:
add angular in it

1. **Uncomment and modify the Node service** to handle Angular, as Angular requires Node.js for development.

2. **Map the Angular app volume** so changes reflect in the container.

Here's an updated `docker-compose.yml` with an Angular service:

version: '3.8'

networks:
  wpbedrock:
    driver: bridge

services:
  # Nginx Service
  nginx:
    image: nginx:stable-alpine
    container_name: ${APP_NAME}_nginx
    ports:
      - "2500:80"
    restart: always
    links:
      - php
    volumes:
      - ./bedrock:/var/www/html
      - ./docker/nginx/site.conf:/etc/nginx/conf.d/default.conf:rw
      - ./docker/logs/nginx:/var/logs/nginx:rw
    depends_on:
      - php
      - mysql
    networks:
      - wpbedrock

  # PHP Service
  php:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: ${APP_NAME}_php
    volumes:
      - ./bedrock:/var/www/html
    ports:
      - "2501:9000"
    restart: always
    networks:
      - wpbedrock 

  # MySQL Service
  mysql:
    image: mysql:8.0
    container_name: ${APP_NAME}_mysql_db
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      MYSQL_DATABASE: ${DB_NAME}
      MYSQL_USER: ${DB_USER}
      MYSQL_PASSWORD: ${DB_PASSWORD}
    volumes:
      - db_data:/var/lib/mysql
    ports:
      - "2502:3306"
    networks:
      - wpbedrock

  # Angular Service
  angular:
    image: node:latest
    container_name: ${APP_NAME}_angular
    working_dir: /var/www/angular-app
    command: npm start
    volumes:
      - ./angular-app:/var/www/angular-app
    ports:
      - "4200:4200" # Angular default port
    networks:
      - wpbedrock

  # Adminer Service
  adminer:
    image: adminer
    container_name: ${APP_NAME}_adminer
    ports:
      - "2530:8080"
    restart: always
    networks:
      - wpbedrock

volumes:
  db_data:

### Steps to Set Up Angular

1. **Create an Angular Project**: In your project root, run:

npx @angular/cli new angular-app

2. **Start the Angular Container**: Run `docker-compose up -d` to start all services, including the Angular app. Access the Angular app at `http://localhost:4200`.

This setup should integrate Angular alongside your existing services in Docker.