Setting up electron-forge with sveltekit - white screen on package - electron

Question

I am in the process of creating an electron-sveltekit starter. I have the development process working as expected but when I go to package the application it only shows a white screen when it is opened. Does anyone know how to resolve this issue?
Here is a link to my repo - https://github.com/N00nDay/sveltekit-electron-starter
package.json
...
"scripts": {
"start": "cross-env NODE_ENV=dev npm run start:all",
"start:all": "concurrently -n=svelte,electron -c='#ff3e00',blue \"npm run start:svelte\" \"npm run start:electron\"",
"start:svelte": "vite dev",
"start:electron": "electron-forge start",
"package": "cross-env NODE_ENV=production npm run package:svelte && npm run package:electron",
"package:svelte": "vite build",
"package:electron": "electron-forge package",
"make": "electron-forge make",
"build": "vite build",
"preview": "vite preview",
"test": "playwright test",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:unit": "vitest",
"lint": "prettier --plugin-search-dir . --check .",
"format": "prettier --plugin-search-dir . --write ."
},
...
forge.config.cjs
module.exports = {
packagerConfig: {
dir: './build'
},
rebuildConfig: {},
makers: [
{
name: '#electron-forge/maker-squirrel',
config: {}
},
{
name: '#electron-forge/maker-zip',
platforms: ['darwin']
},
{
name: '#electron-forge/maker-deb',
config: {}
},
{
name: '#electron-forge/maker-rpm',
config: {}
}
]
};
svelte.config.cjs
import adapter from '#sveltejs/adapter-static';
import { vitePreprocess } from '#sveltejs/kit/vite';
/** #type {import('#sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
adapter: adapter({
fallback: '/index.html'
}),
prerender: {
entries: []
}
}
};
export default config;
electron.cjs
const windowStateManager = require('electron-window-state');
const { app, BrowserWindow, ipcMain } = require('electron');
const serve = require('electron-serve');
const path = require('path');
const url = require('url');
const isDev = require('electron-is-dev');
try {
require('electron-reloader')(module);
} catch (e) {
console.error(e);
}
const serveURL = serve({ directory: '.' });
const port = process.env.PORT || 5173;
const dev = !app.isPackaged;
let mainWindow;
function createWindow() {
let windowState = windowStateManager({
defaultWidth: 800,
defaultHeight: 600
});
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
enableRemoteModule: true,
contextIsolation: true,
nodeIntegration: true,
spellcheck: false,
devTools: dev,
preload: path.join(__dirname, 'preload.cjs')
},
x: windowState.x,
y: windowState.y,
width: windowState.width,
height: windowState.height
});
windowState.manage(mainWindow);
mainWindow.once('ready-to-show', () => {
mainWindow.show();
mainWindow.focus();
});
mainWindow.on('close', () => {
windowState.saveState(mainWindow);
});
return mainWindow;
}
function loadVite(port) {
const appURL = app.isPackaged
? url.format({
pathname: path.join(__dirname, '/../build/index.html'),
protocol: 'file:',
slashes: true
})
: `http://localhost:${port}`;
mainWindow.loadURL(appURL);
if (!app.isPackaged) {
mainWindow.webContents.openDevTools();
}
}
function createMainWindow() {
mainWindow = createWindow();
mainWindow.once('close', () => {
mainWindow = null;
});
if (dev) loadVite(port);
else serveURL(mainWindow);
}
app.once('ready', createMainWindow);
app.on('activate', () => {
if (!mainWindow) {
createMainWindow();
}
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
ipcMain.on('to-main', (event, count) => {
return mainWindow.webContents.send('from-main', `next count is ${count + 1}`);
});
preload.cjs
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
send: (channel, data) => {
ipcRenderer.send(channel, data);
},
sendSync: (channel, data) => {
ipcRenderer.sendSync(channel, data);
},
receive: (channel, func) => {
ipcRenderer.on(channel, (event, ...args) => func(...args));
}
});