Refactor build process and runtime setup for dynamic base path handling
parent
1191e90db4
commit
e39998a09d
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
|
|
||||||
# production
|
# production
|
||||||
/build
|
/build
|
||||||
|
/build2
|
||||||
|
|
||||||
# misc
|
# misc
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue