From 0ad38baa99e7b38e217b82999087f5fd67ca6a3f Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Sun, 30 Mar 2025 12:31:53 +0530
Subject: [PATCH] Modify docker file to setup enviroment variables using
 emtrypoint.sh

---
 .env                      |  2 +-
 Dockerfile                |  4 ++++
 entrypoint.sh             |  7 +++++++
 env.js                    |  0
 index.html                | 28 +++++++++++++------------
 src/utils/axiosClient.jsx | 44 +++++++++++++++++++++++++++------------
 6 files changed, 58 insertions(+), 27 deletions(-)
 create mode 100644 entrypoint.sh
 create mode 100644 env.js

diff --git a/.env b/.env
index 940f00c6..5dca655e 100644
--- a/.env
+++ b/.env
@@ -1 +1 @@
-VITE_BASE_URL=http://localhost:5032
\ No newline at end of file
+VITE_API_URL=http://localhost:5032
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
index 34c33b4f..34f8fe31 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -21,5 +21,9 @@ RUN npm run build  # This will run tsc -b and vite build
 # Expose the port the app will use
 EXPOSE 4173
 
+# Copy the entrypoint script
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
 # Start the app using the preview server
 CMD ["npm", "run", "preview"]
diff --git a/entrypoint.sh b/entrypoint.sh
new file mode 100644
index 00000000..cc29e5c3
--- /dev/null
+++ b/entrypoint.sh
@@ -0,0 +1,7 @@
+#!/bin/sh
+
+# Create a JavaScript file with environment variables
+echo "window._env_ = { VITE_API_URL: \"$VITE_API_URL\" };" > /app/dist/env.js
+
+# Start the Vite preview server
+exec "$@"
diff --git a/env.js b/env.js
new file mode 100644
index 00000000..e69de29b
diff --git a/index.html b/index.html
index 5988bdad..721b425b 100644
--- a/index.html
+++ b/index.html
@@ -46,7 +46,9 @@
   <!-- Helpers -->
   <script src="/assets/vendor/js/helpers.js"></script>
   <script src="/assets/js/config.js"></script>
-  
+
+  <script src="/env.js"></script>
+
   <!-- Timer Picker -->
   <!-- Flatpickr CSS -->
 
@@ -70,12 +72,12 @@
   <script src="/assets/vendor/libs/select2/select2.js"></script>
   <script src="/assets/vendor/js/menu.js"></script>
 
-  
+
 
 
 
   <!-- endbuild -->
-   
+
 
 
   <!-- Vendors JS -->
@@ -83,7 +85,7 @@
   <script src="/assets/vendor/libs/bootstrap-select/bootstrap-select.js"></script>
   <script src="/assets/vendor/libs/select2/select2.js"></script>
   <script src="/assets/vendor/libs/apex-charts/apexcharts.js"></script>
-  <script src="/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js" ></script>
+  <script src="/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js"></script>
 
   <!-- Main JS -->
   <script src="/assets/js/main.js"></script>
@@ -95,24 +97,24 @@
   <!-- component -->
   <script src="./public/js/timppick.js"></script>
 
-  <script src="/assets/vendor/libs/sweetalert2/sweetalert2.js" ></script>
+  <script src="/assets/vendor/libs/sweetalert2/sweetalert2.js"></script>
 
 
   <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script> -->
 
-<!-- Flatpickr JS -->
-<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+  <!-- Flatpickr JS -->
+  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 
-<script>
+  <script>
     // Initialize flatpickr for 12-hour time format with AM/PM
     flatpickr("#timePicker", {
-        enableTime: true,
-        noCalendar: true,
-        time_24hr: false,  // Disable 24-hour format
-        dateFormat: "h:i K",  // 12-hour format with AM/PM
+      enableTime: true,
+      noCalendar: true,
+      time_24hr: false,  // Disable 24-hour format
+      dateFormat: "h:i K",  // 12-hour format with AM/PM
     });
-</script>
+  </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/utils/axiosClient.jsx b/src/utils/axiosClient.jsx
index 7ad9c902..38f83248 100644
--- a/src/utils/axiosClient.jsx
+++ b/src/utils/axiosClient.jsx
@@ -2,9 +2,11 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import axiosRetry from "axios-retry";
 import showToast from "../services/toastService";
-const base_Url = process.env.VITE_BASE_URL;
+
+const API_URL = window._env_?.VITE_API_URL || import.meta.env.VITE_API_URL;
+
 export const axiosClient = axios.create({
-  baseURL: base_Url, // Your Web API URL
+  baseURL: API_URL, // Your Web API URL
   withCredentials: false, // Required if the API uses cookies
   headers: {
     "Content-Type": "application/json", // Specify the content type
@@ -44,32 +46,44 @@ axiosClient.interceptors.response.use(
       originalRequest._toastShown = true;
 
       if (error.code === "ERR_CONNECTION_REFUSED") {
-        console.error("Connection refused. Please ensure the server is running.");
-        showToast("Unable to connect to the server. Please try again later.", "error");
+        console.error(
+          "Connection refused. Please ensure the server is running."
+        );
+        showToast(
+          "Unable to connect to the server. Please try again later.",
+          "error"
+        );
       } else if (error.code === "ERR_NETWORK") {
         console.error("Network error: Unable to reach the server.");
         showToast("Server is unreachable. Try again later!", "error");
         redirectToLogin();
       } else if (error.code === "ECONNABORTED") {
         console.error("Request timed out.");
-        showToast("The request took too long. Please try again later.", "error");
+        showToast(
+          "The request took too long. Please try again later.",
+          "error"
+        );
       } else if (error.response) {
-        console.error("Error response:", error.response.status, error.response.data);
+        console.error(
+          "Error response:",
+          error.response.status,
+          error.response.data
+        );
 
         if (error.response.status === 401 && !originalRequest._retry) {
           originalRequest._retry = true;
 
           try {
-        // debugger;
-        // Get the refresh token from secure storage
+            // debugger;
+            // Get the refresh token from secure storage
             const refreshToken = localStorage.getItem("refreshToken");
 
             if (!refreshToken) {
-          // Redirect to login if refresh token is not available
+              // Redirect to login if refresh token is not available
               redirectToLogin();
               return Promise.reject(error);
             }
-        // Make a request to refresh the access token
+            // Make a request to refresh the access token
             const response = await axiosClient.post("/api/Auth/refresh-token", {
               token: localStorage.getItem("jwtToken"),
               refreshToken,
@@ -82,15 +96,19 @@ axiosClient.interceptors.response.use(
             // Retry the original request with the new token
             originalRequest.headers["Authorization"] = `Bearer ${token}`;
 
-        // Retry the original request
+            // Retry the original request
             return axiosClient(originalRequest);
           } catch (err) {
-        // Redirect to login if token refresh fails
+            // Redirect to login if token refresh fails
             redirectToLogin();
             return Promise.reject(err);
           }
         } else {
-          showToast(error.response.data?.message || "An error occurred. Please try again.", "error");
+          showToast(
+            error.response.data?.message ||
+              "An error occurred. Please try again.",
+            "error"
+          );
         }
       } else {
         console.error("An unknown error occurred:", error.message);