# 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 ./ COPY frontend/.yarnrc.yml ./ COPY frontend/.yarn/ ./.yarn/ # Copying config-overrides.js COPY frontend/config-overrides.js ./ # Update to Yarn 4 (Berry) and enable Corepack RUN corepack enable && corepack prepare yarn@4.10.3 --activate # Installing dependencies RUN yarn install --frozen-lockfile # Copying the rest of the application code COPY frontend/ . # Copy .env for build-time environment variables COPY .env ./ # Set build-time ARG for log level (optional, for CI/CD) ARG REACT_APP_FRONTEND_LOG_LEVEL=info ENV REACT_APP_FRONTEND_LOG_LEVEL=$REACT_APP_FRONTEND_LOG_LEVEL # 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 # Update to Yarn 4 (Berry) RUN yarn set version berry # 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/.yarnrc.yml ./ COPY --from=builder /app/.yarn/ ./.yarn/ 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 COPY --from=builder /app/.env ./ # Set environment variables for runtime ENV FRONTEND_PORT=${FRONTEND_PORT} ENV REACT_APP_FRONTEND_LOG_LEVEL=${REACT_APP_FRONTEND_LOG_LEVEL} # Starting the server to serve the built React app CMD ["yarn", "run", "serve", "-s", "build", "-l", "$FRONTEND_PORT"]