Svelte Electron with Skeleton UI Toolkit

[@Patrick-.-]

Thanks, this worked!
Edit: fully building into though did not work out of the box. You need to add build.config.json (see repo for code) (and I was missing the electron builder so I needed to install that too).

[@timmyb4204]

This was great! I was intimidated but came across this video and it made it super simple! You rock!

[@davehkhed]

Put screenshots of code thru image reader, and formatted it with GPT if anyone in the future wants a transcription, check the replies to this comment.

[@davehkhed]

"// electron.cjs
const windowStateManager = require('electron-window-state');
const { app, BrowserWindow, ipcMain } = require('electron');
const serve = require('electron-serve');
const path = require('path');
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({
backgroundColor: 'whitesmoke',
minHeight: 450,
minWidth: 600,
webPreferences: {
enableRenoteModule: true,
contextIsolation: true,
nodelntegration: 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) {
mainWindow.loadURL(`localhost:${port}`).catch((e) => {
console.log("Error loading URL, retrying", e);
setTimeout(() => {
loadVite(port);
}, 200);
});
}

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}`);
});"

[@davehkhed]

" // 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));
}
}); "

[@benjamindorge5936]

Thanks for doing that! 😀

[@davehkhed]

@@benjamindorge5936 I think RUclips deleted them 🧐. I can’t see them now :/

[@sashbot9707]

@@davehkhed electron.cjs: const windowStateManager = require('electron-window-state');
const {app, BrowserWindow, ipcMain} = require('electron');
const path = require('path');
try {
require('electron-reloader')(module);
} catch (e) {
console.error(e);
}
const port = process.env.PORT || 5173;
const dev = !app.isPacked;
let mainWindow;
let serveURL;
import('electron-serve').then((module) => {
serveURL = (module.default || module)({directory: '.'});
}).catch(console.error);
function createWindow() {
let windowState = windowStateManager({
defaultWidth: 800,
defaultHeight: 600,
});
const mainWindow = new BrowserWindow({
backgroundColor: 'whitesmoke',
minHeight: 450,
minWidth: 500,
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) {
mainWindow.loadURL(`localhost:${port}`).catch((e) => {
console.log('Error loading URL, retrying', e);
setTimeout(() => loadVite(port), 200);
});
}
function createMainWindow() {
mainWindow = createWindow();
mainWindow.once('close', () => {
mainWindow = null;
});
if (dev) {
loadVite(port);
} else {
if (serveURL) {
return serveURL(mainWindow);
} else {
console.error("electron-serve was not properly imported, the server could not start.");
}
}
}
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}`);
});