runtime base url injection

This commit is contained in:
Connor Yoh 2025-07-22 16:21:29 +01:00
parent fad981aa43
commit 7a68e5c27a
4 changed files with 23 additions and 10 deletions

View File

@ -6,5 +6,13 @@ VITE_API_BASE_URL=${VITE_API_BASE_URL:-"http://backend:8080"}
# Replace the placeholder in nginx.conf with the actual backend URL # Replace the placeholder in nginx.conf with the actual backend URL
sed -i "s|\${VITE_API_BASE_URL}|${VITE_API_BASE_URL}|g" /etc/nginx/nginx.conf sed -i "s|\${VITE_API_BASE_URL}|${VITE_API_BASE_URL}|g" /etc/nginx/nginx.conf
# Inject runtime configuration into config.js
cat > /usr/share/nginx/html/config.js << EOF
// Runtime configuration - injected at container startup
window.runtimeConfig = {
apiBaseUrl: '${VITE_API_BASE_URL}'
};
EOF
# Start nginx # Start nginx
exec nginx -g "daemon off;" exec nginx -g "daemon off;"

View File

@ -12,11 +12,12 @@
<link rel="apple-touch-icon" href="/logo192.png" /> <link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<title>Vite App</title> <title>Stirling-PDF</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script src="/config.js"></script>
<script type="module" src="/src/index.jsx"></script> <script type="module" src="/src/index.jsx"></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1,4 @@
// Runtime configuration - injected at container startup
window.runtimeConfig = {
apiBaseUrl: 'http://localhost:8080'
};

View File

@ -1,14 +1,14 @@
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080'; // Runtime configuration access
declare global {
interface Window {
runtimeConfig?: {
apiBaseUrl?: string;
};
}
}
export const makeApiUrl = (endpoint: string): string => { export const makeApiUrl = (endpoint: string): string => {
const baseUrl = apiBaseUrl; const baseUrl = window.runtimeConfig?.apiBaseUrl || 'http://localhost:8080';
// If baseUrl is empty (development), return endpoint as-is for proxy
if (!baseUrl) {
return endpoint;
}
// For production, combine base URL with endpoint // For production, combine base URL with endpoint
return `${baseUrl}${endpoint}`; return `${baseUrl}${endpoint}`;
}; };