tldr; skip to the end for the step-by-step instructions.

I made my first desktop app, using Electron (and Vue).

If you don't know what Electron is, the high-level description is that it's a lovely wrapper around a chromium browser. This means you can turn a nice single-page web app into a desktop application, using web tech you already know - javascript, css, html. It's pretty great.

[And if you don't want to start from scratch, you can use Vue, and the amazing electron vue-cli builder plugin (https://nklayman.github.io/vue-cli-plugin-electron-builder/), which is what I did because I am lazy]

App Created! We're done! Right?

Well, no. You've made the electron app and now you have to code-sign it, unless you don't mind that your users are getting security warnings.

I'm on a mac. The actual code-signing was a pretty easy process once I managed to find the relevant links. With adequate google-fu, you'll find out how to do it without too much fuss. I'll skip past code-signing mac apps, because other folks can tell you how to do that ok.

Windows, on the other hand ...

Trying to code-sign the Windows build of your application from a Mac is dark magic, it turns out, or at least that's the way it seems to be described; lot's of "brew install" this and "source compile" that. You'll find plenty of articles on it. Do they work? Who knows? None of them seem to be saying the same thing, and if they are, I'm certainly not proficient enough to figure out what they're trying to get me to do. And when I do follow those old instructions, it turns out something else breaks or doesn't work. This is rough going. There has to be an easier way, right?

electron-builder

It turns out there are different plugins you can use to compile your source into a nice build. The one that was chosen for me by the Vue Cli was electron-builder.

They have some decent documentation, but as of 2019, some of it gets really confusing really fast. I'm not going to link to the documentation in question, because I'm sure at one point, it was working great. Just like this will probably work great for you in 2019 and maybe not so much in 2023, etc etc.

Get to it already!

Here are the steps I took to code-sign a Windows app from a Mac in 2019

1. Make a CSR (certificate signing request) using Keychain Access (a program on your mac). Use "Certificate Assistant" from the menu.
2. Make sure to select "Save to Disk" for the CSR
3. Buy a code signing cert from a cert authority (https://docs.microsoft.com/en-us/windows-hardware/drivers/dashboard/get-a-code-signing-certificate). Use the CSR you generated earlier when it asks you for it.
4. Download that cert. Install it in your keychain. (using Keychain Access)
5. In Keychain Access, find the cert, and export it as a .p12 cert.
6. On export, notice that you have an option to supply a password for the cert. You can if you want to, but you can also just hit 'enter' and provide NO password.
7. When you build your electron app for windows, specify the path to the .p12 cert. WIN_CSC_LINK=/path/to/your/cert.p12 yarn electron:build --win

Note: in Step 6, you do not need to add a password, but if you do, then in Step 7, you need to also add in the ENV variable of WIN_CSC_KEY_PASSWORD=YourPassword as well to that command line in order for it to be able to parse the certificate properly.

You should be able to see by looking at the build log that the certificate is signed.

Last Note - Microsoft SmartScreen

Microsoft Smartscreen doesn't just care that your app is code-signed properly; it's also looking at your reputation. And thus, if your app is new, then your users will likely get a warning screen from Microsoft SmartScreen until your app has proven itself to not be some kind of password-stealing ransomware sleeper agent. The cert is published though, and so this should be the only warning, if any, that you get.