forked from trent_larson/crowd-funder-for-time-pwa
feat: modernize Electron build process with Vite-based CSS injection
- Replace manual CSS injection hack with Vite plugin - Configure Vite to handle both main process and renderer builds - Update build scripts to work with proper Vite output structure - Remove fix-inject-css.js post-build script - Update BUILDING.md documentation - Add build-modernization-context.md for future reference Technical changes: - vite.config.electron.mts: Add electron-css-injection plugin and proper output config - scripts/build-electron.js: Simplify to work with Vite-generated files - BUILDING.md: Update Electron build documentation - doc/build-modernization-context.md: Document context and decisions Security/maintenance improvements: - Eliminate manual file manipulation hacks - Ensure deterministic, reproducible builds - Centralize build logic in Vite configuration - Improve developer experience and CI/CD compatibility Author: Matthew Raymer
This commit is contained in:
Matthew Raymer
@@ -12,59 +12,53 @@ if (!fs.existsSync(wwwPath)) {
|
||||
fs.mkdirSync(wwwPath, { recursive: true });
|
||||
}
|
||||
|
||||
// Create a platform-specific index.html for Electron
|
||||
const initialIndexContent = `<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
|
||||
<link rel="icon" href="./favicon.ico">
|
||||
<title>TimeSafari</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but TimeSafari doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="./main.electron.js"></script>
|
||||
</body>
|
||||
</html>`;
|
||||
// Copy the Vite-built index.html to www directory
|
||||
const viteIndexPath = path.join(electronDistPath, 'index.html');
|
||||
const wwwIndexPath = path.join(wwwPath, 'index.html');
|
||||
|
||||
// Write the Electron-specific index.html
|
||||
fs.writeFileSync(path.join(wwwPath, 'index.html'), initialIndexContent);
|
||||
|
||||
// Copy only necessary assets from web build
|
||||
const webDistPath = path.join(__dirname, '..', 'dist');
|
||||
if (fs.existsSync(webDistPath)) {
|
||||
// Copy assets directory
|
||||
const assetsSrc = path.join(webDistPath, 'assets');
|
||||
const assetsDest = path.join(wwwPath, 'assets');
|
||||
if (fs.existsSync(assetsSrc)) {
|
||||
fs.cpSync(assetsSrc, assetsDest, { recursive: true });
|
||||
}
|
||||
if (fs.existsSync(viteIndexPath)) {
|
||||
console.log('Copying Vite-built index.html to www directory...');
|
||||
fs.copyFileSync(viteIndexPath, wwwIndexPath);
|
||||
|
||||
// Copy favicon
|
||||
const faviconSrc = path.join(webDistPath, 'favicon.ico');
|
||||
if (fs.existsSync(faviconSrc)) {
|
||||
fs.copyFileSync(faviconSrc, path.join(wwwPath, 'favicon.ico'));
|
||||
}
|
||||
// Remove the original index.html from dist-electron root
|
||||
fs.unlinkSync(viteIndexPath);
|
||||
console.log('Moved index.html to www directory');
|
||||
} else {
|
||||
console.error('Vite-built index.html not found at:', viteIndexPath);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
// Remove service worker files
|
||||
// Copy assets directory if it exists in dist-electron
|
||||
const assetsSrc = path.join(electronDistPath, 'assets');
|
||||
const assetsDest = path.join(wwwPath, 'assets');
|
||||
|
||||
if (fs.existsSync(assetsSrc)) {
|
||||
console.log('Moving assets directory to www...');
|
||||
if (fs.existsSync(assetsDest)) {
|
||||
fs.rmSync(assetsDest, { recursive: true, force: true });
|
||||
}
|
||||
fs.renameSync(assetsSrc, assetsDest);
|
||||
console.log('Moved assets directory to www');
|
||||
}
|
||||
|
||||
// Copy favicon if it exists
|
||||
const faviconSrc = path.join(electronDistPath, 'favicon.ico');
|
||||
const faviconDest = path.join(wwwPath, 'favicon.ico');
|
||||
|
||||
if (fs.existsSync(faviconSrc)) {
|
||||
console.log('Moving favicon to www...');
|
||||
fs.renameSync(faviconSrc, faviconDest);
|
||||
console.log('Moved favicon to www');
|
||||
}
|
||||
|
||||
// Remove service worker files from www directory
|
||||
const swFilesToRemove = [
|
||||
'sw.js',
|
||||
'sw.js.map',
|
||||
'workbox-*.js',
|
||||
'workbox-*.js.map',
|
||||
'registerSW.js',
|
||||
'manifest.webmanifest',
|
||||
'**/workbox-*.js',
|
||||
'**/workbox-*.js.map',
|
||||
'**/sw.js',
|
||||
'**/sw.js.map',
|
||||
'**/registerSW.js',
|
||||
'**/manifest.webmanifest'
|
||||
'manifest.webmanifest'
|
||||
];
|
||||
|
||||
console.log('Removing service worker files...');
|
||||
@@ -84,14 +78,13 @@ swFilesToRemove.forEach(pattern => {
|
||||
});
|
||||
|
||||
// Also check and remove from assets directory
|
||||
const assetsPath = path.join(wwwPath, 'assets');
|
||||
if (fs.existsSync(assetsPath)) {
|
||||
if (fs.existsSync(assetsDest)) {
|
||||
swFilesToRemove.forEach(pattern => {
|
||||
const files = fs.readdirSync(assetsPath).filter(file =>
|
||||
const files = fs.readdirSync(assetsDest).filter(file =>
|
||||
file.match(new RegExp(pattern.replace(/\*/g, '.*')))
|
||||
);
|
||||
files.forEach(file => {
|
||||
const filePath = path.join(assetsPath, file);
|
||||
const filePath = path.join(assetsDest, file);
|
||||
console.log(`Removing ${filePath}`);
|
||||
try {
|
||||
fs.unlinkSync(filePath);
|
||||
@@ -102,60 +95,54 @@ if (fs.existsSync(assetsPath)) {
|
||||
});
|
||||
}
|
||||
|
||||
// Modify index.html to remove service worker registration
|
||||
const indexPath = path.join(wwwPath, 'index.html');
|
||||
if (fs.existsSync(indexPath)) {
|
||||
console.log('Modifying index.html to remove service worker registration...');
|
||||
let indexContent = fs.readFileSync(indexPath, 'utf8');
|
||||
|
||||
// Remove service worker registration script
|
||||
indexContent = indexContent
|
||||
.replace(/<script[^>]*id="vite-plugin-pwa:register-sw"[^>]*><\/script>/g, '')
|
||||
.replace(/<script[^>]*registerServiceWorker[^>]*><\/script>/g, '')
|
||||
.replace(/<link[^>]*rel="manifest"[^>]*>/g, '')
|
||||
.replace(/<link[^>]*rel="serviceworker"[^>]*>/g, '')
|
||||
.replace(/navigator\.serviceWorker\.register\([^)]*\)/g, '')
|
||||
.replace(/if\s*\(\s*['"]serviceWorker['"]\s*in\s*navigator\s*\)\s*{[^}]*}/g, '');
|
||||
|
||||
fs.writeFileSync(indexPath, indexContent);
|
||||
console.log('Successfully modified index.html');
|
||||
}
|
||||
// Verify the final index.html structure
|
||||
const finalIndexContent = fs.readFileSync(wwwIndexPath, 'utf8');
|
||||
console.log('Final index.html structure:');
|
||||
console.log('- Has CSS link:', finalIndexContent.includes('<link rel="stylesheet"'));
|
||||
console.log('- Has main script:', finalIndexContent.includes('main.electron.js'));
|
||||
console.log('- No service worker references:', !finalIndexContent.includes('serviceWorker'));
|
||||
|
||||
// Fix asset paths
|
||||
console.log('Fixing asset paths in index.html...');
|
||||
let modifiedIndexContent = fs.readFileSync(indexPath, 'utf8');
|
||||
modifiedIndexContent = modifiedIndexContent
|
||||
.replace(/\/assets\//g, './assets/')
|
||||
.replace(/href="\//g, 'href="./')
|
||||
.replace(/src="\//g, 'src="./');
|
||||
// Copy main process files to the correct location
|
||||
console.log('Setting up main process files...');
|
||||
|
||||
fs.writeFileSync(indexPath, modifiedIndexContent);
|
||||
// The main process files are already in the correct location
|
||||
// Just verify they exist and are ready
|
||||
const mainPath = path.join(electronDistPath, 'main.js');
|
||||
const preloadPath = path.join(electronDistPath, 'preload.js');
|
||||
|
||||
// Verify no service worker references remain
|
||||
const finalContent = fs.readFileSync(indexPath, 'utf8');
|
||||
if (finalContent.includes('serviceWorker') || finalContent.includes('workbox')) {
|
||||
console.warn('Warning: Service worker references may still exist in index.html');
|
||||
}
|
||||
|
||||
// Check for remaining /assets/ paths
|
||||
console.log('After path fixing, checking for remaining /assets/ paths:', finalContent.includes('/assets/'));
|
||||
console.log('Sample of fixed content:', finalContent.substring(0, 500));
|
||||
|
||||
console.log('Copied and fixed web files in:', wwwPath);
|
||||
|
||||
// Copy main process files
|
||||
console.log('Copying main process files...');
|
||||
|
||||
// Copy the main process file instead of creating a template
|
||||
const mainSrcPath = path.join(__dirname, '..', 'dist-electron', 'main.js');
|
||||
const mainDestPath = path.join(electronDistPath, 'main.js');
|
||||
|
||||
if (fs.existsSync(mainSrcPath)) {
|
||||
fs.copyFileSync(mainSrcPath, mainDestPath);
|
||||
console.log('Copied main process file successfully');
|
||||
if (fs.existsSync(mainPath)) {
|
||||
console.log('Main process file ready at:', mainPath);
|
||||
} else {
|
||||
console.error('Main process file not found at:', mainSrcPath);
|
||||
console.error('Main process file not found at:', mainPath);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log('Electron build process completed successfully');
|
||||
if (fs.existsSync(preloadPath)) {
|
||||
console.log('Preload script ready at:', preloadPath);
|
||||
} else {
|
||||
console.warn('Preload script not found at:', preloadPath);
|
||||
}
|
||||
|
||||
// Clean up any remaining files in dist-electron root (except main.js, preload.js, and www directory)
|
||||
const remainingFiles = fs.readdirSync(electronDistPath);
|
||||
remainingFiles.forEach(file => {
|
||||
if (file !== 'main.js' && file !== 'preload.js' && file !== 'www') {
|
||||
const filePath = path.join(electronDistPath, file);
|
||||
console.log(`Removing remaining file: ${file}`);
|
||||
try {
|
||||
if (fs.statSync(filePath).isDirectory()) {
|
||||
fs.rmSync(filePath, { recursive: true, force: true });
|
||||
} else {
|
||||
fs.unlinkSync(filePath);
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn(`Could not remove ${filePath}:`, err.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Electron build process completed successfully');
|
||||
console.log('Final structure:');
|
||||
console.log('- Main process:', path.join(electronDistPath, 'main.js'));
|
||||
console.log('- Preload script:', path.join(electronDistPath, 'preload.js'));
|
||||
console.log('- Web assets:', path.join(electronDistPath, 'www'));
|
||||
Reference in New Issue
Block a user