Changes fo environment variable for docker container

This commit is contained in:
Vikas Nale 2025-03-31 16:56:04 +05:30
parent 959e4dd7dd
commit 281527ef69
13 changed files with 69 additions and 39 deletions

2
.env
View File

@ -1 +1 @@
VITE_BASE_URL=http://localhost:5032
VITE_API_URL=http://localhost:5032

View File

@ -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"]

0
assets/js/config.js Normal file
View File

0
assets/vendor/js/helpers.js vendored Normal file
View File

View File

@ -17,7 +17,7 @@ services:
networks:
- marco_network
environment:
- VITE_BASE_URL=http://server:8080 # Use the service name `server`
- VITE_API_URL=http://server:8080 # Use the service name `server`
ports:
- "4173:4173"

7
entrypoint.sh Normal file
View File

@ -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 "$@"

1
env.js Normal file
View File

@ -0,0 +1 @@
windows._env._ = { VITE_API_URL: "http://localhost:4200" };

View File

@ -46,12 +46,12 @@
<!-- Helpers -->
<script src="/assets/vendor/js/helpers.js"></script>
<script src="/assets/js/config.js"></script>
<!-- Timer Picker -->
<!-- Flatpickr CSS -->
<script src="./env.js"></script>
</head>
@ -70,12 +70,12 @@
<script src="/assets/vendor/libs/select2/select2.js"></script>
<script src="/assets/vendor/js/menu.js"></script>
<!-- endbuild -->
<!-- Vendors JS -->
@ -83,7 +83,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 +95,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>

12
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": {
"@hookform/resolvers": "^3.10.0",
"@reduxjs/toolkit": "^2.5.0",
"@types/node": "^22.13.14",
"@vitejs/plugin-react": "^4.3.4",
"axios": "^1.7.9",
"axios-retry": "^4.5.0",
@ -1400,11 +1401,9 @@
"peer": true
},
"node_modules/@types/node": {
"version": "22.13.13",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.13.tgz",
"integrity": "sha512-ClsL5nMwKaBRwPcCvH8E7+nU4GxHVx1axNvMZTFHMEfNI7oahimt26P5zjVCRrjiIWj6YFXfE1v3dEp94wLcGQ==",
"license": "MIT",
"peer": true,
"version": "22.13.14",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.14.tgz",
"integrity": "sha512-Zs/Ollc1SJ8nKUAgc7ivOEdIBM8JAKgrqqUYi2J997JuKO7/tpQC+WCetQ1sypiKCQWHdvdg9wBNpUPEWZae7w==",
"dependencies": {
"undici-types": "~6.20.0"
}
@ -5240,8 +5239,7 @@
"version": "6.20.0",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
"integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/update-browserslist-db": {
"version": "1.1.1",

View File

@ -3,7 +3,6 @@
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"json-server": "json-server --watch ./src/data/demo.json --port 5000",
@ -14,6 +13,7 @@
"dependencies": {
"@hookform/resolvers": "^3.10.0",
"@reduxjs/toolkit": "^2.5.0",
"@types/node": "^22.13.14",
"@vitejs/plugin-react": "^4.3.4",
"axios": "^1.7.9",
"axios-retry": "^4.5.0",

View File

@ -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 = process.env.VITE_API_URL;
export const axiosClient = axios.create({
baseURL: base_Url, // Your Web API URL
baseURL: API_URL, // "https://api.marcoaiot.com/", // Your Web API URL
withCredentials: false, // Required if the API uses cookies
headers: {
"Content-Type": "application/json", // Specify the content type
@ -16,6 +18,8 @@ axiosRetry(axiosClient, { retries: 3 });
// Request interceptor to add Bearer token
axiosClient.interceptors.request.use(
async (config) => {
console.log("API_URL:", API_URL);
if (config.authRequired) {
const token = localStorage.getItem("jwtToken");
if (token) {
@ -44,32 +48,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 +98,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);

View File

@ -24,5 +24,5 @@
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
"include": ["src", "endpoint.ts"]
}

View File

@ -12,7 +12,7 @@ export default defineConfig({
},
define: {
'process.env': {
VITE_BASE_URL: process.env.VITE_BASE_URL || 'http://localhost:5032',
VITE_API_URL: process.env.VITE_API_URL || 'http://localhost:5032',
},
},