DEV Community

Tomasz Wegrzanowski
Tomasz Wegrzanowski

Posted on

Electron Adventures: Episode 80: Svelte Unicodizer Package

In previous episode we created a Unicodizer app. Now it's time to package it!


Let's try to follow the same steps, and use Electron Forge importer:

$ npm install --save-dev @electron-forge/cli
$ npx electron-forge import
Enter fullscreen mode Exit fullscreen mode

That instantly causes problem that rollup wants npm run start to run sirv public --no-clear, and Electron Forge wants to take it over for electron-forge start. So let's edit scripts section to support all commands:

  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear",
    "electron": "electron .",
    "forge-start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
Enter fullscreen mode Exit fullscreen mode


Before we start packing anything, we can already notice that index.js is trying to open http://localhost:5000/, which will not be there in packaged version.

We can use app.isPackaged to figure out which version we want.

let { app, BrowserWindow } = require("electron")

function createWindow() {
  let win = new BrowserWindow({
    webPreferences: {
      preload: `${__dirname}/preload.js`,
  if (app.isPackaged) {
  } else {

app.on("ready", createWindow)

app.on("window-all-closed", () => {
Enter fullscreen mode Exit fullscreen mode


Now we need two commands to build the app. npm run build compiles Svelte code to public/build/bundle.js and public/build/bundle.css. npm run package creates an Electron package in out.

It would be more convenient if we could get it down to one command, but it's good enough.


Here's the results:

Episode 80 Screenshot A

Episode 80 Screenshot B

As usual, all the code for the episode is here.

The series is still planned to go for full 100 episodes, but for now I'll be taking a couple weeks break. See you soon!

Top comments (1)

chibichibibr profile image
Amanda Cavallaro

I love that in the beginning of the post there's a table with the previous episodes of the series. Keep it up!