DEV Community

Cover image for Create an electron-app using svelte build script included
Abdallah Mohammed
Abdallah Mohammed

Posted on • Edited on

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)
Enter fullscreen mode Exit fullscreen mode

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" },
Enter fullscreen mode Exit fullscreen mode

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

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>
Enter fullscreen mode Exit fullscreen mode

run npm run dev again and you will get
image

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
image

Top comments (0)