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!

Import

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

index.js

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`,
    },
  })
  win.maximize()
  if (app.isPackaged) {
    win.loadFile(`${__dirname}/public/index.html`)
  } else {
    win.loadURL("http://localhost:5000/")
  }
}

app.on("ready", createWindow)

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

Build

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.

Results

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!

Discussion (1)

Collapse
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!