Installers and the wizard¶

Exercise installers-and-wizard-annex.pdf · PDF

Picture two installers for the same app, with the same code. One has a grey sidebar and a generic icon. The other shows the app's colours, icon and name. Which one do you trust with your files?

The user looks at that screen for about three seconds. It is the first screen of your app, and you did not design it in Unit 1. This page fixes that. You will see what each system shows when somebody installs your app, and you will brand the part you control.

The front door¶

Keep one picture for this page: the installer is the front door of your app.

Nobody visits a house for its door. But a door with no number, bell or name makes you check the address twice. On the previous page you packed the suitcase. Now you design the door it arrives at.

An installation wizard is the series of windows that guides a user through installing a program, one step at a time, with Next and Back buttons.

One app, seven packages¶

A bundle target is a package format Tauri can produce. These are the values bundle > targets accepts:

NSIS (Nullsoft Scriptable Install System) and WiX are the two tools Tauri uses behind the scenes to build Windows installers.

Why are the sizes so different? NoteBox's .deb weighs 2.9 MB because it only declares that it needs libwebkit2gtk-4.1-0 and libgtk-3-0, and apt fetches them. An AppImage carries everything with it. The Tauri docs warn that this takes the size from the 2-6 MB range to 70 MB or more. Same app, more than twenty times the weight: it packed the bed.

Each row can only be built on its own system. msi needs Windows, because WiX only runs there. dmg needs a Mac.

sudo apt install nsis lld llvm
rustup target add x86_64-pc-windows-msvc
cargo install --locked cargo-xwin
npm run tauri build -- --runner cargo-xwin --target x86_64-pc-windows-msvc

What you can change¶

The NSIS wizard walks through these pages, in order:

flowchart LR
    A["<b>Welcome</b><br>sidebar image"] --> B["<b>License</b><br>only with licenseFile"]
    B --> C["<b>Install location</b><br>header image"]
    C --> D["<b>Start menu folder</b><br>header image"]
    D --> E["<b>Installing</b><br>header image"]
    E --> F["<b>Finish</b><br>sidebar image"]

Two more pages appear only in special cases. With installMode set to both, a page asks who to install for. If a previous installation is found, a page asks whether to reinstall.

The images are the only pixels you control without writing your own template. All these keys live under bundle > windows > nsis, with paths relative to src-tauri/:

One related key sits one level up, not under nsis: bundle > licenseFile. It adds the License page, the only page where the user accepts your terms. No file, no page.

Install mode¶

Languages¶

If the operating system's language is in your languages list, the wizard uses it. If not, it uses the first language in the list. "Spanish" works out of the box.

"Catalan" is only half there. The build passes and the standard pages come out translated, but Tauri's own texts do not. To complete it, write those strings in a file and point to it with customLanguageFiles.

The other doors¶

And on Ubuntu?¶

No wizard, so the door is the card the software installer shows for your .deb. Those fields come from the label:

Empty fields look as unfinished as a grey sidebar.

Design the front door¶

In Figma, make one frame per image for your own app: sidebar at 164 × 314 and header at 150 × 57. The frame is the export, so do not resize it. Then paste both onto a mock-up of the wizard screens to see them in context.

The rules:

• Fill the whole frame. No transparency: .bmp files have none, and transparent pixels come out white or black depending on the converter.
• Use flat colours from your palette, your app icon and the app name. There should be nothing to read: the user gives it three seconds.
• The header sits next to the wizard's own title text, so keep it calm. No slogans.
• Use the same icon in the app, the installer and the uninstaller.

What usually goes wrong:

Export, convert, wire¶

Export. Select the frame, then Export, PNG, 1x. You get sidebar.png and header.png.

Convert. Figma cannot export .bmp, and NSIS reads nothing else. Use the png2bmp.mjs converter shared in Classroom, saved in your project's scripts/ folder. It needs only Node.js.

mkdir src-tauri/installer
node scripts/png2bmp.mjs sidebar.png src-tauri/installer/sidebar.bmp
node scripts/png2bmp.mjs header.png  src-tauri/installer/header.bmp

The script prints what it wrote: 164 x 314 px, 24-bit BMP. If it says 328 × 628, you exported at 2x. Go back and export at 1x.

Other tools do the same job. With ImageMagick, run magick sidebar.png BMP3:sidebar.bmp. On Windows, use Paint, then Save as, 24-bit Bitmap.

Wire. In tauri.conf.json:

"bundle": {
  "licenseFile": "../LICENSE",
  "publisher": "IES Son Ferrer",
  "shortDescription": "NoteBox, a tiny notes app",
  "windows": {
    "nsis": {
      "sidebarImage": "installer/sidebar.bmp",
      "headerImage": "installer/header.bmp",
      "installerIcon": "icons/icon.ico",
      "installMode": "currentUser",
      "languages": ["English", "Spanish"],
      "displayLanguageSelector": true
    }
  }
}

Merge these keys into the bundle you already have. Do not replace it, or you lose your targets, icon and resources.

Check. On Ubuntu, run the build as usual:

npm run tauri build -- --bundles deb

The nsis block is read and validated, even though it is not used. A typo in a key stops the build with the name of the wrong key. To see the wizard itself, build with --bundles nsis on Windows.

Here is every size in one place:

Key takeaways¶

• Tauri has seven bundle targets: nsis and msi for Windows, deb, rpm and appimage for Linux, app and dmg for macOS. Each is built on its own system.
• Only nsis and msi show a wizard. Linux and macOS show your metadata, so fill in the description, category and publisher.
• The NSIS wizard is customised under bundle > windows > nsis: a sidebar of 164 × 314, a header of 150 × 57 and an icon. licenseFile sits one level up and adds the License page.
• installMode: currentUser needs no administrator rights, while perMachine and both do.
• Installer images must be real .bmp files, exported at 1x, with no transparency. Convert them, never rename them.

Quick check¶

The door looks right. But who guarantees the parcel was not opened on the way, how do you install it on 300 PCs without touching one, and how does it leave no trace? That is Sign, silent, update.