[MISC] Add frontend development configuration with hot-reloading

docker/docker-compose.build.yaml

@@ -4,6 +4,7 @@ services:
     build:
       dockerfile: docker/dockerfiles/frontend.Dockerfile
       context: ..
+      target: production
   backend:
     image: unstract/backend:${VERSION}
     build:

docker/dockerfiles/frontend.Dockerfile

@@ -1,17 +1,32 @@
-# Use a smaller base image for the builder stage
-FROM node:16-alpine AS builder
+# Multi-stage build for both development and production
 
-# Build-time environment variables
+# Base stage with common setup
+FROM node:16-alpine AS base
 ENV BUILD_CONTEXT_PATH=frontend
-ENV REACT_APP_BACKEND_URL=""
-
-# Set the working directory inside the container
 WORKDIR /app
 
-# Copy only the files needed for installing dependencies
+### FOR DEVELOPMENT ###
+# Development stage for hot-reloading
+FROM base AS development
+
+# Copy only package files for dependency caching
 COPY ${BUILD_CONTEXT_PATH}/package.json ${BUILD_CONTEXT_PATH}/package-lock.json ./
+RUN npm install --ignore-scripts
+
+# Copy the rest of the application files
+COPY ${BUILD_CONTEXT_PATH}/ /app/
+
+EXPOSE 3000
 
-# Install dependencies (this layer will be cached unless package.json or package-lock.json changes)
+CMD ["npm", "start"]
+
+### FOR PRODUCTION ###
+# Builder stage for production build
+FROM base AS builder
+ENV REACT_APP_BACKEND_URL=""
+
+# Copy package files and install dependencies
+COPY ${BUILD_CONTEXT_PATH}/package.json ${BUILD_CONTEXT_PATH}/package-lock.json ./
 RUN npm install --ignore-scripts
 
 # Copy the rest of the application files
@@ -20,14 +35,10 @@ COPY ${BUILD_CONTEXT_PATH}/ .
 # Build the React app
 RUN npm run build
 
-# Use a smaller base image for the final stage
-FROM nginx:1.25-alpine
-
+# Production stage
+FROM nginx:1.25-alpine AS production
 LABEL maintainer="Zipstack Inc."
 
-# Remove the default NGINX configuration (if needed)
-# RUN rm /etc/nginx/conf.d/default.conf
-
 # Copy built assets from the builder stage
 COPY --from=builder /app/build /usr/share/nginx/html
 

docker/sample.compose.override.yaml

@@ -12,6 +12,12 @@ services:
 # Watch configuration
 # Refer https://docs.docker.com/compose/how-tos/file-watch/
   frontend:
+    build:
+      dockerfile: docker/dockerfiles/frontend.Dockerfile
+      context: ..
+      target: development
+    env_file:
+      - ../frontend/.env
     develop:
       watch:
       # Sync the frontend directory with the container

frontend/sample.env

@@ -1 +1,12 @@
 REACT_APP_BACKEND_URL=http://localhost:8000
+
+# For development
+NODE_ENV=development
+# Enable file watching via polling instead of filesystem events
+# These are critical for hot reloading to work properly in Docker containers
+# as the normal filesystem event notification doesn't work reliably with mounted volumes
+CHOKIDAR_USEPOLLING=true
+WATCHPACK_POLLING=true
+# Configure WebSocket port for hot module replacement (HMR)
+WDS_SOCKET_PORT=3000
+FAST_REFRESH=true