Building a Desktop App using Svelte and Electron
Josh Jackson - @Pjaerr
Getting Started 🥚
npx degit sveltejs/template my-desktop-app
npm install
npm install electron1.
Getting Started 🥚
1.
npx degit sveltejs/template my-desktop-app
npm install
npm install electronconst { 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
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!