Building a Desktop App using Svelte and Electron

Josh Jackson - @Pjaerr

Getting Started 🥚

npx degit sveltejs/template my-desktop-app

npm install

npm install electron

1.

Getting Started 🥚

1.

npx degit sveltejs/template my-desktop-app

npm install

npm install electron

const { app, BrowserWindow } = require("electron");

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile("./public/index.html");
});

app.on("window-all-closed", () => {
  app.quit();
});

2.

Getting Started 🥚

3.

<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>
	<meta http-equiv="Content-Security-Policy" 
          content="script-src 'self' 'unsafe-inline';" />
	<title>Svelte App</title>

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

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

Getting Started 🥚

3.

<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>
	<meta http-equiv="Content-Security-Policy" 
          content="script-src 'self' 'unsafe-inline';" />
	<title>Svelte App</title>

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

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

4.

"scripts": {
	"start": "npm run build && electron main.js"
}

Getting Started 🐣

Using NodeJS in our Svelte Files

<script>
  const fs = require("fs");

  let value = "";

  const saveTextFile = () => {
    fs.writeFile(__dirname + "/myfile.txt", value, err => {
      if (err) console.error(err);
    });
  };
</script>

<textarea bind:value />

<button on:click={saveTextFile}>Save Text File</button>

Using The Electron API

<script>
  const { dialog } = require("electron").remote;
  const fs = require("fs");

  let value = "";

  const saveTextFile = () => {
    dialog
      .showSaveDialog({
        title: "Save File",
        properties: ["showOverwriteConfirmation"],
        filters: [
          {
            name: "Text Files",
            extensions: ["txt"]
          }
        ]
      })
      .then(({ canceled, filePath }) => {
        if (canceled) return;

        fs.writeFile(filePath, value, err => {
          if (err) return;
        });
      });
  };
</script>

<button on:click={saveTextFile}>Save Text File</button>

<textarea bind:value />

Sending Messages between Svelte and Electron

const { app, BrowserWindow, dialog, Menu, MenuItem } = require("electron");

app.whenReady().then(() => {
  const menu = new Menu();

  menu.append(
    new MenuItem({
      label: "Save",
      accelerator: "CmdOrCtrl+S",
      click: () => {
        dialog
          .showSaveDialog({
            title: "Save File",
            properties: ["showOverwriteConfirmation"],
            filters: [
              {
                name: "Text Files",
                extensions: ["txt"]
              }
            ]
          })
          .then(({ canceled, filePath }) => {
            if (canceled) return;

            mainWindow.webContents.send("savefile", filePath);
          });
      }
    })
  );

  Menu.setApplicationMenu(menu);
});

Sending Messages between Svelte and Electron

<script>
  const { ipcRenderer } = require("electron");
  const fs = require("fs");

  let value = "";

  ipcRenderer.on("savefile", (e, filePath) => {
    fs.writeFile(filePath, value, err => {
      if (err) return;
    });
  });
</script>

<textarea bind:value />

Thanks for listening!

https://joshuaj.co.uk/blog/building-desktop-app-svelte-electron

Building a Desktop App using Svelte and Electron

By Joshua Jackson

Building a Desktop App using Svelte and Electron