Dockerfile.frontend

# Build step #1: build the React front end
FROM node:16-alpine as build-step
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
# Copy the frontend files to the working directory.
COPY ./frontend-react-client/package.json ./frontend-react-client/package-lock.json ./frontend-react-client/tailwind.config.js ./
COPY ./frontend-react-client/src ./src
COPY ./frontend-react-client/public ./public
# Install dependencies and build the app.
RUN npm install
RUN npm run build
# Now /app/build contains the built React app.

# -----------------------Build step #2: build an nginx container ------------------------------
# This creates a clean container image without the build tools, e.g. node.js.

FROM nginx:stable-alpine
# Copy the built React app to the directory where the nginx container expects the files to be 
# served to be installed.
COPY --from=build-step /app/build /usr/share/nginx/html
# Also copy a custom nginx configuration file. The default configuration file only supports 
# static files, but we also need to proxy requests for URLs that start with /api to the backend 
# container. 
COPY ./frontend-react-client/deployment/nginx.default.conf /etc/nginx/conf.d/default.conf

# The base nginx image already defines a start command for the container that launches 
# nginx on port 80. This works well for our purposes, so there is no need to define our own 
# start command.