Create an electron-app using svelte build script included

First generate the svelte app

install degit if not installednpm install -g degit
Setup svelte app using degit sveltejs/template app-name
cd app-name and run npm install
now your svelte app is ready

Add electron

npm install -D electron
create an index.js file in the project root
paste code below

const { app, BrowserWindow } = require('electron')
const path = require("path");
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile(path.join(__dirname, 'public/index.html')
}
app.on("ready", createWindow)

now add "main": "index.js" in your package.json
then replace scripts in package.json with

"scripts": {
    "build": "rollup -c && electron-builder",
    "dev": "rollup -c -w",
    "start": "electron .",
    "validate": "svelte-check"
},

now open terminal and run npm run dev a window will popup like this

to fix this go to public/index.html file and replace it with this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>App Name</title>

    <link rel="stylesheet" href="global.css" />
    <link rel="stylesheet" href="build/bundle.css" />

    <script defer src="build/bundle.js"></script>
  </head>

  <body></body>
</html>

run npm run dev again and you will get

Now for building install electron builder

npm i -D electron-builder
now run npm run build
wait till command ends and you should get a dist folder

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now