conference-room-booking-system/Dockerfile-frontend

# Dockerfile for building and serving a React application using TypeScript
# This Dockerfile uses a multi-stage build to keep the final image size small.
# It builds the application in a Node.js environment and serves it using a lightweight server.

# The User ID can be passed as a build argument to run the container as a non-root user.
ARG USER_ID=$(id -u)

# The Node.js version can be passed as a build argument.
ARG NODE_VERSION=24.6.0

# Build stage
FROM node:${NODE_VERSION} AS builder

# Set the User ID for non-root user
USER ${USER_ID}

# Setting working directory for build
WORKDIR /app

# Copying package.json and package-lock.json to leverage Docker cache
COPY frontend/package*.json ./

# Copying TypeScript configuration
COPY frontend/tsconfig.json ./

# Copying yarn configuration files
COPY frontend/yarn.lock ./

# Copying config-overrides.js
COPY frontend/config-overrides.js ./

# Installing dependencies
RUN yarn install --frozen-lockfile

# Copying the rest of the application code
COPY frontend/ .

# Building the TypeScript React app for production
RUN yarn run build

# Production stage
FROM node:${NODE_VERSION}-slim

# Set the User ID for non-root user
USER ${USER_ID}

# Setting working directory for build
WORKDIR /app

# Installing serve to run the production build
RUN yarn global add serve

# Copying only the necessary files from the builder stage
# This includes package.json, yarn.lock, tsconfig.json, node_modules, public, and the build output
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/yarn.lock ./
COPY --from=builder /app/tsconfig.json ./
COPY --from=builder /app/config-overrides.js ./
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/public ./public
COPY --from=builder /app/build ./build

# Set environment variables for runtime
ENV FRONTEND_PORT=${FRONTEND_PORT}

# Starting the server to serve the built React app
CMD ["serve", "-s", "build", "-l", "$FRONTEND_PORT"]