#30 Prepare for deploy. Images need to be public, added swa-cli. Defined VITE_API_URL to the env var for azure

.env.production

@@ -1 +1 @@
-VITE_API_URL=todo
+VITE_API_URL=https://hutopy.azurewebsites.net/

src/layouts/FooterLayout.vue

@@ -20,17 +20,17 @@
           <v-row justify="center">
             <v-col cols="auto">
               <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                <img class="icons" src="../../images/facebookiconblackpink.png" alt="Description image 2">
+                <img class="icons" src="../../public/images/facebookiconblackpink.png" alt="Description image 2">
               </a>
             </v-col>
             <v-col cols="auto">
               <a href="https://www.instagram.com/hutopy.inc/">
-                <img src="../../images/instagramblackpink.png" alt="Description image 3" class="icons">
+                <img src="../../public/images/instagramblackpink.png" alt="Description image 3" class="icons">
               </a>
             </v-col>
             <v-col cols="auto">
               <router-link :to="{ name: 'home' }">
-                <img src="../../images/xblackpink.png" alt="Description image 1" class="icons">
+                <img src="../../public/images/xblackpink.png" alt="Description image 1" class="icons">
               </router-link>
             </v-col>
           </v-row>

src/views/LoginView.vue

@@ -8,7 +8,7 @@
                     <v-row align="center" justify="center">
                         <!-- Header -->
                         <v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
-                            <img class="login-picture" src="../../images/loginpage/loginhutopy.png">
+                            <img class="login-picture" src="../../public/images/loginpage/loginhutopy.png">
                         </v-col>
 
                         <!-- Connexion-objects -->
@@ -58,7 +58,7 @@
         <div class="sm:hidden flex flex-col items-center justify-start"
             style="background-color: #f4f4f4; height: 100vh;">
             <img style="margin-top: 10%;  width: 350px;  box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px; "
-                src="../../images/loginpage/loginhutopy.png">
+                src="../../public/images/loginpage/loginhutopy.png">
 
             <h1 class="h1-connexion">Connexion</h1>
             <h2 class="h2-connexion">Comment souhaitez-vous

src/views/main/ContactView.vue

@@ -8,7 +8,7 @@
           <v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
 
 
-          <img class="hutopy-header-image" src="../../../images/hutopy.png">
+          <img class="hutopy-header-image" src="../../../public/images/hutopy.png">
 
 
           <v-col class="ml-0 text-left ">
@@ -27,7 +27,7 @@
             <v-row>
 
               <v-col>
-                <img class="contact-image" src="../../../images/contactpage/contactpicture.png">
+                <img class="contact-image" src="../../../public/images/contactpage/contactpicture.png">
               </v-col>
               <v-col class="row-joinus">
 

src/views/main/CreatorFeed.vue

@@ -1,8 +1,8 @@
 <v-container>
     <v-container>
       <div>
-        <img src="../../../images/guillaimeaime.png" class="banner-creator "
+        <img src="../../../public/images/guillaimeaime.png" class="banner-creator "
-          style="width: 98.25%; height: 100%; object-fit: cover; border-top-left-radius: 50px; border-top-right-radius: 50px;">
+             style="width: 98.25%; height: 100%; object-fit: cover; border-top-left-radius: 50px; border-top-right-radius: 50px;">
       </div>
 
       <v-countainer >

src/views/main/CreatorFolio copy.vue

@@ -14,8 +14,8 @@
     <div style="margin-top: -1.6%;">
       <v-row>
         <v-col cols="12">
-          <img src="../../../images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
+          <img src="../../../public/images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
-            style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">
+               style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">
         </v-col>
       </v-row>
     </div>

src/views/main/CreatorFolio.vue

@@ -246,17 +246,17 @@
                 <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
                   <v-row>
                     <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons invert-color" src="../../../images/facebookicon.png"
+                      <img class="socialicons invert-color" src="../../../public/images/facebookicon.png"
                         alt="Description image 2">
                     </a>
                     <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons" src="../../../images/instaicon.png" alt="Description image 2">
+                      <img class="socialicons" src="../../../public/images/instaicon.png" alt="Description image 2">
                     </a>
                     <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons invert-color" src="../../../images/xicon.png" alt="Description image 2">
+                      <img class="socialicons invert-color" src="../../../public/images/xicon.png" alt="Description image 2">
                     </a>
                     <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons invert-color" src="../../../images/tiktok.png" alt="Description image 2">
+                      <img class="socialicons invert-color" src="../../../public/images/tiktok.png" alt="Description image 2">
                     </a>
                   </v-row>
                 </v-col>

src/views/main/HomeView.vue

@@ -191,17 +191,17 @@
             <v-row justify="center" class="profile-images">
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
+                  <img src="../../../public/images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
                 </router-link>
               </v-col>
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
+                  <img src="../../../public/images/guillaume.jpg" alt="Profile Image" class="profile-image">
                 </router-link>
               </v-col>
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
+                  <img src="../../../public/images/anonymelarge.png" alt="Profile Image" class="profile-image">
                 </router-link>
               </v-col>
 
@@ -227,8 +227,8 @@
       <div>
 
 
-        <img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"
+        <img src="../../../public/images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"
-          style="margin-top: -100px;">
+             style="margin-top: -100px;">
 
         <div>
           <v-card-text>
@@ -301,19 +301,19 @@
             <div class="d-flex justify-content-center"
               style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
               <router-link :to="{ name: 'creatorfolio' }">
-                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
+                <img src="../../../public/images/guillaume.png" alt="Profile Image" class="profile-image"
-                  style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />
+                     style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />
 
               </router-link>
 
               <router-link :to="{ name: 'creatorfolio' }">
-                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
+                <img src="../../../public/images/guillaume.png" alt="Profile Image" class="profile-image"
-                  style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
+                     style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
               </router-link>
 
               <router-link :to="{ name: 'creatorfolio' }">
-                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
+                <img src="../../../public/images/guillaume.png" alt="Profile Image" class="profile-image"
-                  style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
+                     style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
               </router-link>
             </div>
 

swa-cli.config.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
+  "configurations": {
+    "taim-ui": {
+      "appLocation": ".",
+      "outputLocation": "dist",
+      "appBuildCommand": "npm run build",
+      "run": "npm run dev",
+      "appDevserverUrl": "https://hutopy.azurewebsites.net",
+      "apiDevserverUrl": "https://hutopy.azurewebsites.net"
+    }
+  }
+}

vite.config.js

@@ -1,16 +1,24 @@
 import { fileURLToPath, URL } from 'node:url'
-
+import { defineConfig, loadEnv } from 'vite'
-import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
-  plugins: [
+  // Load environment variables based on the mode
-    vue(),
+  const env = loadEnv(mode, process.cwd(), '')
-  ],
+  return {
-  resolve: {
+    plugins: [
-    alias: {
+      vue(),
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+    ],
+    resolve: {
+      alias: {
+        '@': fileURLToPath(new URL('./src', import.meta.url))
+      }
+    },
+    define: {
+      // Define a global constant __APP_ENV__ based on loaded environment variables
+      VITE_API_URL: JSON.stringify(env.VITE_API_URL)
     }
   }
 })