DEV Community

loading...
Cover image for Create an electron-app using svelte build script included

Create an electron-app using svelte build script included

Abdallah Mohammed
My Github https://github.com/Abdallah-Moh
・1 min read

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

Discussion (0)