Added .env access to frontend (+ while dockerized)

Dockerfile.frontend

@@ -1,11 +1,12 @@
 FROM node:latest as build-stage
 WORKDIR /app
-COPY package*.json ./
+COPY ./web/admin-gui/package*.json ./
+COPY ./.env ./
 RUN npm install
-COPY ./ .
+COPY ./web/admin-gui/ .
 RUN npm run build
 
 FROM nginx as production-stage
 RUN mkdir /app
 COPY --from=build-stage /app/dist /app
-COPY nginx.conf /etc/nginx/nginx.conf
+COPY ./web/admin-gui/nginx.conf /etc/nginx/nginx.conf

docker-compose.yml

@@ -1,6 +1,8 @@
 services:
   backend:
-    build: .
+    build:
+      context: ./
+      dockerfile: ./Dockerfile.backend
     image: gohcms-backend
     env_file:
       - .env
@@ -9,7 +11,9 @@ services:
     networks:
       - back-net
   frontend:
-    build: web/admin-gui/.
+    build:
+      context: ./
+      dockerfile: ./Dockerfile.frontend
     image: gohcms-frontend
     env_file:
       - .env

web/admin-gui/env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare const __APP_ENV__: Record<string, string>

web/admin-gui/src/router/index.ts

@@ -8,8 +8,8 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: Home
+      name: 'login',
+      component: Login
     },
     {
       path: '/debug',
@@ -17,9 +17,9 @@ const router = createRouter({
       component: Debug
     },
     {
-      path: '/login',
-      name: 'login',
-      component: Login
+      path: '/home',
+      name: 'home',
+      component: Home
     },
   ]
 })

web/admin-gui/src/views/Debug.vue

@@ -7,7 +7,7 @@ const email = ref('')
 const password = ref('')
 
 function getArticles() {
-	fetch(`http://localhost:8080/articles/`, {
+	fetch(`http://localhost:${__APP_ENV__.API_PORT}/articles/`, {
 		headers: { "Authorization": `Bearer ${useAuthStore().token}` }
 	})
 	.then(response => response.json())
@@ -25,7 +25,7 @@ function jwtHandler(apiResponse: jwtFormat): void {
 }
 
 function login(email: string, password: string): void {
-	fetch(`http://localhost:8080/login/`, {
+	fetch(`http://localhost:${__APP_ENV__.API_PORT}/login/`, {
 		method: "POST",
 		body: JSON.stringify({
 			email: email,

web/admin-gui/src/views/Login.vue

@@ -16,8 +16,9 @@ function jwtHandler(apiResponse: jwtFormat): void {
 	isTokenOK.value = true
 }
 
+//TODO rempalcer tous les :8080 par la var d'env du port de l'API (sinon c un peu dommage)
 function login(email: string, password: string): void {
-	fetch(`http://localhost:8080/login/`, {
+	fetch(`http://localhost:${__APP_ENV__.API_PORT}/login/`, {
 		method: "POST",
 		body: JSON.stringify({
 			email: email,
@@ -28,7 +29,7 @@ function login(email: string, password: string): void {
 		.then(result => {
 			jwtHandler(result)
 			if (isTokenOK.value === true)  {
-				router.push('/')
+				router.push('/home')
 			}
 		})
 }

web/admin-gui/vite.config.ts

@@ -1,14 +1,21 @@
 import { fileURLToPath, URL } from 'node:url'
-
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
+export default defineConfig(({command, mode}) => {
+	return { 
+		plugins: [vue()],
+		resolve: {
+			alias: {
+				'@': fileURLToPath(new URL('./src', import.meta.url))
+			}
+		},
+		define: {
+			__APP_ENV__: {
+				...loadEnv(mode, "./../../", ""), // when running directly | access .env from ./web/admin-gui/ 
+				...loadEnv(mode, process.cwd(), ""), // when running from docker
+			}
+		}
+	}
 })