Merge pull request #18 from PeoplePlusAI/fix-dockerfile

chore: updates dockerfile for frontend-vite

frontend-vite/Dockerfile

@@ -1,11 +1,37 @@
-FROM node:20
+# multistage build image for only building the react application
+# this also eliminates the risk of exposing the secrets provided via build args
+FROM node:18-alpine3.17 as build
 
-WORKDIR /app/frontend-vite
+# build args for providing the envs required for building the react app
+ARG SUPABASE_API_KEY
+ARG SUPABASE_AUTHORIZATION_TOKEN
+ARG BACKEND_ENDPOINT="https://sukoon-api.pplus.ai/"
 
-COPY package.json /app/frontend-vite
-RUN npm install && npm install -g serve
+# set a working directory
+WORKDIR /app
+COPY . /app
 
-COPY . /app/frontend-vite
-# RUN npm run build
-# CMD serve -s build
-CMD npm run dev
+RUN rm -rf node_modules
+
+RUN npm install
+
+# build the react application to generate an optimized static build
+# the build files will be stored in 'dist' directory
+RUN VITE_SUPABASE_API_KEY=${SUPABASE_API_KEY} VITE_SUPABASE_AUTHORIZATION_TOKEN=${SUPABASE_AUTHORIZATION_TOKEN} \
+  VITE_BACKEND_ENDPOINT=${BACKEND_ENDPOINT} npm run build
+
+# use nginx base image
+FROM nginx:1.21-alpine
+
+# replace nginx configuration file
+RUN rm /etc/nginx/conf.d/default.conf
+COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+
+# copy the build files from 'dist' directory in the builder image
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# bind the server to port 80 of the container
+EXPOSE 80
+
+# start the server
+CMD ["nginx", "-g", "daemon off;"]

frontend-vite/nginx/nginx.conf

@@ -0,0 +1,11 @@
+server {
+  listen 80;
+  server_name  localhost;
+
+  location / {
+    proxy_http_version 1.1;
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    try_files $uri /index.html;
+  }
+}

frontend-vite/src/utils/envs.js

@@ -1,7 +1,7 @@
-const env = await import.meta.env;
+const env = import.meta.env;
 
-const SUPABASE_API_KEY = (env.VITE_SUPABASE_API_KEY);
-const SUPABASE_AUTHORIZATION_TOKEN = (env.VITE_SUPABASE_AUTHORIZATION_TOKEN);
-const BACKEND_ENDPOINT = (env.VITE_BACKEND_ENDPOINT);
+const SUPABASE_API_KEY = env.VITE_SUPABASE_API_KEY;
+const SUPABASE_AUTHORIZATION_TOKEN = env.VITE_SUPABASE_AUTHORIZATION_TOKEN;
+const BACKEND_ENDPOINT = env.VITE_BACKEND_ENDPOINT;
 
 export { SUPABASE_API_KEY, SUPABASE_AUTHORIZATION_TOKEN, BACKEND_ENDPOINT };