Refactor build process and runtime setup for dynamic base path handling

master
Tudor Stanciu 2025-05-13 01:46:10 +03:00
parent 1191e90db4
commit e39998a09d
4 changed files with 18 additions and 12 deletions

View File

@ -1,4 +1,4 @@
VITE_APP_BASE_URL=/@RUNTIME_BASE_URL@/ VITE_APP_BASE_URL=
VITE_APP_TUITIO_URL=https://<VITE_APP_TUITIO_URL> VITE_APP_TUITIO_URL=https://<VITE_APP_TUITIO_URL>
VITE_APP_NETWORK_RESURRECTOR_API_URL=https://<VITE_APP_NETWORK_RESURRECTOR_API_URL> VITE_APP_NETWORK_RESURRECTOR_API_URL=https://<VITE_APP_NETWORK_RESURRECTOR_API_URL>

1
frontend/.gitignore vendored
View File

@ -10,6 +10,7 @@
# production # production
/build /build
/build2
# misc # misc
.DS_Store .DS_Store

View File

@ -2,6 +2,8 @@
FROM node:23-slim AS builder FROM node:23-slim AS builder
WORKDIR /app WORKDIR /app
ARG APP_SUBFOLDER=""
COPY .npmrc .npmrc COPY .npmrc .npmrc
COPY package*.json ./ COPY package*.json ./
RUN npm install RUN npm install
@ -10,13 +12,16 @@ RUN rm -f .npmrc
COPY . ./ COPY . ./
# build the react app # build the react app
RUN npm run build RUN if [ -z "$APP_SUBFOLDER" ]; then npm run build; else VITE_APP_BASE_URL=/${APP_SUBFOLDER}/ npm run build; fi
# PRODUCTION ENVIRONMENT # PRODUCTION ENVIRONMENT
FROM node:23-slim FROM node:23-slim
ARG APP_SUBFOLDER=""
RUN printf '\n\n- Copy application files\n' RUN printf '\n\n- Copy application files\n'
COPY --from=builder /app/build ./application COPY --from=builder /app/build ./application/${APP_SUBFOLDER}
COPY --from=builder /app/build/index.html ./application/
COPY --from=builder /app/runtimeSetup.js ./application/runtimeSetup.js COPY --from=builder /app/runtimeSetup.js ./application/runtimeSetup.js
#install static server #install static server
@ -25,6 +30,7 @@ RUN npm install -g serve
# environment variables # environment variables
ENV AUTHOR="Tudor Stanciu" ENV AUTHOR="Tudor Stanciu"
ENV APP_NAME="Network resurrector UI" ENV APP_NAME="Network resurrector UI"
ENV VITE_APP_BASE_URL=/${APP_SUBFOLDER}/
ARG APP_VERSION=0.0.0 ARG APP_VERSION=0.0.0
ENV APP_VERSION=${APP_VERSION} ENV APP_VERSION=${APP_VERSION}

View File

@ -4,9 +4,7 @@ const path = require("path");
const crypto = require("crypto"); const crypto = require("crypto");
const prefix = "VITE_APP_"; const prefix = "VITE_APP_";
const RUNTIME_BASE_URL_PLACEHOLDER = "/@RUNTIME_BASE_URL@";
const APP_DIR = "./application"; const APP_DIR = "./application";
const ENV_JS_DIR = APP_DIR;
function generateScriptContent() { function generateScriptContent() {
const prefixRegex = new RegExp(`^${prefix}`); const prefixRegex = new RegExp(`^${prefix}`);
@ -35,7 +33,7 @@ function updateIndexHtml(envFileName, basePath) {
let indexContent = fs.readFileSync(indexPath, "utf8"); let indexContent = fs.readFileSync(indexPath, "utf8");
// Replace base path placeholder with actual value // Replace base path placeholder with actual value
indexContent = indexContent.replace(new RegExp(RUNTIME_BASE_URL_PLACEHOLDER, "g"), basePath || "/"); // indexContent = indexContent.replace(new RegExp(RUNTIME_BASE_URL_PLACEHOLDER, "g"), basePath || "/");
// Replace any existing env script with the new one // Replace any existing env script with the new one
const envScriptRegex = /<script src="[^"]*env(\.\w+)?\.js"[^>]*><\/script>/; const envScriptRegex = /<script src="[^"]*env(\.\w+)?\.js"[^>]*><\/script>/;
@ -57,13 +55,13 @@ function updateIndexHtml(envFileName, basePath) {
console.log(`Updated ${indexPath} with base path: ${basePath || "/"} and env script: ${scriptSrc}`); console.log(`Updated ${indexPath} with base path: ${basePath || "/"} and env script: ${scriptSrc}`);
} }
function cleanupOldEnvFiles(newEnvFileName) { function cleanupOldEnvFiles(newEnvFileName, envJsDir) {
// Find all env*.js files and delete them except the new one // Find all env*.js files and delete them except the new one
const files = fs.readdirSync(ENV_JS_DIR); const files = fs.readdirSync(envJsDir);
const envFiles = files.filter(file => /^env(\.\w+)?\.js$/.test(file) && file !== newEnvFileName); const envFiles = files.filter(file => /^env(\.\w+)?\.js$/.test(file) && file !== newEnvFileName);
for (const file of envFiles) { for (const file of envFiles) {
const filePath = path.join(ENV_JS_DIR, file); const filePath = path.join(envJsDir, file);
fs.unlinkSync(filePath); fs.unlinkSync(filePath);
console.log(`Removed old env file: ${filePath}`); console.log(`Removed old env file: ${filePath}`);
} }
@ -71,6 +69,7 @@ function cleanupOldEnvFiles(newEnvFileName) {
function main() { function main() {
console.log("Setting environment variables..."); console.log("Setting environment variables...");
const basePath = process.env.VITE_APP_BASE_URL || "/";
// Generate env script content // Generate env script content
const scriptContent = generateScriptContent(); const scriptContent = generateScriptContent();
@ -78,8 +77,9 @@ function main() {
// Compute hash for cache busting // Compute hash for cache busting
const hash = getSha256Hash(scriptContent); const hash = getSha256Hash(scriptContent);
const fragment = hash.substring(0, 8); const fragment = hash.substring(0, 8);
const envJsDir = path.join(APP_DIR, basePath);
const envFileName = `env.${fragment}.js`; const envFileName = `env.${fragment}.js`;
const envFilePath = path.join(ENV_JS_DIR, envFileName); const envFilePath = path.join(envJsDir, envFileName);
// Ensure build directory exists // Ensure build directory exists
if (!fs.existsSync(APP_DIR)) { if (!fs.existsSync(APP_DIR)) {
@ -92,10 +92,9 @@ function main() {
console.log(`Updated ${envFilePath} with ${prefix}* environment variables`); console.log(`Updated ${envFilePath} with ${prefix}* environment variables`);
// Clean up old env.js files // Clean up old env.js files
cleanupOldEnvFiles(envFileName); cleanupOldEnvFiles(envFileName, envJsDir);
// Get base path from environment and update index.html // Get base path from environment and update index.html
const basePath = process.env.VITE_APP_BASE_URL || "/";
updateIndexHtml(envFileName, basePath); updateIndexHtml(envFileName, basePath);
} }