Merge pull request #1 from nolaib/migrate-to-vite

devops/docker-compose.yaml

@@ -1,4 +1,4 @@
-version: '3.8'
+version: "3.8"
 
 networks:
   app_network:
@@ -19,6 +19,19 @@ services:
       - backend
     networks:
       - app_network
+
+  frontend:
+    build: ./frontend
+    container_name: frontend
+    restart: unless-stopped
+    ports:
+      - "5173:80"
+    depends_on:
+      - backend
+    networks:
+      - app_network
+    command: ["yarn", "run", "dev"]
+
   backend:
     build: ..
     command: ["bash", "/app/entrypoint.sh"]
@@ -49,7 +62,7 @@ services:
     env_file:
       - .env
     healthcheck:
-      test: [ "CMD-SHELL", "pg_isready -U ${DB_USER}" ]
+      test: ["CMD-SHELL", "pg_isready -U ${DB_USER}"]
       interval: 10s
       timeout: 5s
       retries: 5
@@ -86,4 +99,4 @@ services:
 
 volumes:
   postgres_data:
-  redis_data:
+  redis_data:

frontend/.env.dev

@@ -1,3 +1,3 @@
-REACT_APP_STARKNET_NODE_URL=http://178.32.172.148:6060
-REACT_APP_BACKEND_URL=http://localhost:8000
-REACT_APP_IS_DEV=true
+VITE_STARKNET_NODE_URL=http://178.32.172.148:6060
+VITE_BACKEND_URL=http://localhost:8000
+VITE_IS_DEV=true

frontend/Dockerfile

@@ -1,22 +1,33 @@
-# Dockerfile.nginx
-
-# Stage 1: Build the React app
+# Stage 1: Build the Vite app
 FROM node:20-alpine AS build
 
+# Set the working directory inside the container
 WORKDIR /app
-COPY . /app
 
-RUN yarn
+# Copy package.json and yarn.lock first to leverage Docker's caching
+COPY package.json yarn.lock ./
+
+# Install dependencies (including Vite)
+RUN yarn install
+
+# Copy the rest of the application files
+COPY . .
+
+# Build the Vite app
 RUN yarn build
 
-# Stage 2: Set up Nginx to serve the built app
+# Stage 2: Serve the built app using Nginx
 FROM nginx:alpine
 
-COPY --from=build /app/build /usr/share/nginx/html
+# Copy the built files from the previous stage to the Nginx HTML directory
+COPY --from=build /app/dist /usr/share/nginx/html
 
+# Remove the default Nginx config file and replace it with your custom one
 RUN rm /etc/nginx/conf.d/default.conf
-COPY spotnet.conf /etc/nginx/conf.d
+COPY spotnet.conf /etc/nginx/conf.d/
 
+# Expose port 80 for HTTP traffic
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
 
+# Start Nginx in the foreground
+CMD ["nginx", "-g", "daemon off;"]

frontend/Dockerfile.dev

@@ -1,24 +1,33 @@
-# Dockerfile.nginx
-
-# Stage 1: Build the React app
+# Stage 1: Build the Vite app
 FROM node:20-alpine AS build
 
+# Set the working directory inside the container
 WORKDIR /app
-COPY . /app
 
-COPY .env.dev .env
+# Copy package.json and yarn.lock first to leverage Docker's caching
+COPY package.json yarn.lock ./
+
+# Install dependencies (including Vite)
+RUN yarn install
 
-RUN yarn
-RUN yarn test
+# Copy the rest of the application files
+COPY . .
+
+# Build the Vite app for development (optional: use `dev` for specific dev builds if needed)
 RUN yarn build
 
-# Stage 2: Set up Nginx to serve the built app
+# Stage 2: Serve the built app using Nginx for development
 FROM nginx:alpine
 
-COPY --from=build /app/build /usr/share/nginx/html
+# Copy the built files from the previous stage to the Nginx HTML directory
+COPY --from=build /app/dist /usr/share/nginx/html
 
+# Remove the default Nginx config file and replace it with your custom one
 RUN rm /etc/nginx/conf.d/default.conf
-COPY spotnet_dev.conf /etc/nginx/conf.d
+COPY spotnet_dev.conf /etc/nginx/conf.d/
 
+# Expose port 80 for HTTP traffic
 EXPOSE 80
+
+# Start Nginx in the foreground (daemon off)
 CMD ["nginx", "-g", "daemon off;"]