/** * Vite plugin to inject app-config.js into the HTML head during development */ import fs from "fs"; import path from "path"; import { fileURLToPath } from "url"; import { spawn } from "child_process"; // Get the directory name in ESM const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); // Helper function for colorized logging like Vite function formatLog(label, message, color = "\x1b[36m ") { // Default to cyan color const reset = "\x1b[0m"; const dim = "\x1b[2m"; const arrow = `${dim}${color}➜${reset}`; const formattedLabel = `${color}${label}:${reset}`; return ` ${arrow} ${formattedLabel} ${message}`; } /** * Creates a Vite plugin that injects the app-config.js script into the HTML head * @returns {import('vite').Plugin} */ function appConfigPlugin() { return { name: "vite-plugin-app-config", configureServer(server) { // Run the generate-app-config.js script when the dev server starts const scriptPath = path.resolve(__dirname, "generate-app-config.js"); const generateConfig = () => { const process = spawn("node", [scriptPath], { stdio: "inherit", shell: true, }); process.on("error", (err) => { console.error( formatLog( "Error", `Failed to run generate-app-config.js: ${err}`, "\x1b[31m ", ), ); // Red }); }; // Generate config on server start generateConfig(); // Watch for changes in .env files and regenerate app-config.js const envFiles = [ ".env", ".env.development", ".env.local", ".env.development.local", ]; envFiles.forEach((file) => { const filePath = path.resolve(process.cwd(), file); if (fs.existsSync(filePath)) { server.watcher.add(filePath); } }); server.watcher.on("change", (file) => { if (envFiles.some((envFile) => file.endsWith(envFile))) { console.log( formatLog( "Changed", `ENV file: ${path.basename(file)}`, "\x1b[34m ", ), ); // Blue generateConfig(); } }); }, transformIndexHtml(html) { // Check if the app-config.js script is already in the HTML if (!html.includes("app-config.js")) { // Insert the script tag after the opening head tag return html.replace( "", '\n ', ); } return html; }, }; } export default appConfigPlugin;