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 runnpm 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
Top comments (0)