# Stage 1: Build the Angular application
FROM node:20-alpine AS builder

WORKDIR /app

# Copy package files and install dependencies
# This leverages Docker's layer caching, so dependencies are only re-downloaded when package.json changes.
COPY package.json package-lock.json ./
RUN npm install

# Copy the rest of the application source code
COPY . .

# Build the application for production
# The output will be in the /app/dist/ directory
RUN npm run build

# Stage 2: Serve the application with Nginx
FROM nginx:alpine

# Remove the default Nginx configuration
RUN rm /etc/nginx/conf.d/default.conf

# Copy the custom Nginx configuration from the local machine
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy the built application from the builder stage to Nginx's web root directory
# I am assuming the project name is 'dashboard'. If not, you may need to change the path 'dist/dashboard/browser'.
COPY --from=builder /app/dist/dashboard/browser /usr/share/nginx/html

# Expose port 80 for the web server
EXPOSE 80

# The default Nginx command will start the server
CMD ["nginx", "-g", "daemon off;"]