Electron Adventures: Episode 80: Svelte Unicodizer Package

#javascript #electron #svelte

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

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"
  },

`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()
})

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.