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.
Results
Here's the results:
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)
I love that in the beginning of the post there's a table with the previous episodes of the series. Keep it up!