Electron— A Complete Guide for building windows executable

Introduction 

It’s not just enough to create applications, we have to publish them on stores or websites for our real users to start using them. Also, as per current needs, applications should support all major OS like Windows, macOS, and Linux.

Today, we will learn how to generate a build of electron app for windows OS.

We will build the app using electron-builder and vue-cli-plugin-electron-builder and will package it with electron-windows-store.

Interested in MacOS desktop build? check out our following article,

Sponsored

We are what we repeatedly do. Excellence, then, is not an act, but a habit. Try out Justly and start building your habits today!

Background

Some days ago, we got a requirement to generate windows build of an electron desktop app.

We went through a few references but didn’t find enough guides. After spending much more time we finally got it done with fewer but simple steps.

I strongly feel that the efforts I have put in can be worthy for others as well. So, today I’m sharing the steps with which you can build your desktop app without wasting your time.

I have used Vue.js inside the electron.js app for creating an app. You can do the same config with whichever framework you have used.

Note: I’m assuming you have created a Microsoft store account and a product app on Microsoft store. Also, you already have Publisher dentity (CN=developmentca) . If not yet, you can start from here.

1. Install dependencies

As vue-cli-plugin-electron-builder built on top of the electron-builder, it will be installed when we install vue-cli-plugin-electron-builder .

Install using npm,

npm i vue-cli-plugin-electron-builder --save-dev

2. Prepare images

Images are a visual representation of our app. For windows os, we will need icons and logos of different sizes to build the app.

Here is a list of images required for the windows app.

• storeLogo.png — Logo used on Microsoft store.
• square150x150Logo.png — Will be used on the start menu of windows and on Microsoft store listing apps .
• square44x44Logo.png —Will be used on Start menu app list and task bar .
• wide310x150Logo.png — will be used on Start menu on windows.

Prepare all images as per the given name and sizes, and place them in resources/appx of the root directory.

3. Add app configs

AppX config should be like the below,

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        productName: "Your product name",
        directories: {
          buildResources: "resources",
        },
        win: {
          icon: "resources/appx/storeLogo.png",
          target: ["nsis", "appx"],
        },
        appx: {
          identityName: "Your app identity name",
          publisher: "Your app publisher identity",
          publisherDisplayName: "Your app publisher name",
        },
      },
    },
  },
};

• buildResources: "resources": Used to add all images to the build during build time.
• icon: "resources/appx/storeLogo.png": Will be used in Microsoft store for publishing app.
• target: [“nsis","appx"]: Final build target.
• identityName: Product’s identity name from Microsoft store.
• publisher: Publisher’s identity from Microsoft store.
• publisherDisplayName: Product’s PublisherDisplayName from Microsoft store.

You can add more properties as per the requirements given on the electron-builder docs.

4. Generate build

Till now, we are done with all configurations.
Now let’s jump to the app building.

Add the following command inside the scripts block of the package.json file.

"build:win": "vue-cli-service electron:build --windows"

Now, you can build an app with the following command.

npm run build:win

You will find .appx and .exe apps in dist_electron directory.

5. Packaging app for publishing on the Microsoft store

we will use electron-windows-store for packaging windows appX. Install it using the given command on windows os.

npm i -g electron-windows-store

Follow the below steps to create an AppX bundle, which we will publish on the Microsoft store.

1. Download the Windows SDK kit same as your windows os version from the link, install it, and get the installed SDK path. In my case, it is at C:\Program Files (x86)\Windows Kits\10\bin\10.0.22621.1\x86
2. Open PowerShell in Administrator mode. and set execution policy by running the following command.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

3. Now, run the below command. This will open the CLI windows-store.

electron-windows-store

4. It will ask some questions like creating certificates and to add publisher identity and SDK path . Answer them accordingly.

5. Stop the process by ctrl+c .

electron-windows-store settings saved at
C:\Users\${username}\.electron-windows-store and certificates saved at C:\Users\${username}\AppData\Roaming\electron-windows-store .

If you feel anything wrong with it, just delete them and follow from 3rd step again.

Now, it’s time to build a production-ready build for publishing on the Microsoft store.

To create the AppX build, run the below command,

electron-windows-store --input-directory "Your dist_electron path" --output-directory "Your output path" --package-version 1.0.0.0 --package-name "Your .exe name" --package-display-name "Your app display name" --publisher-display-name "App's publisher identity name" --identity-name "App's product identity name" -a "Resources path"

This command will use the electron-windows-store configuration which we have created from the above steps and generate the AppX build.

Let’s understand all options…

• — input-directory: Input directory path of apps. We can consider dist_electron in our case. Make sure it should have .exe .appx files only.
• — output-directory: Output directory path.
• — package-version: version of the package. It must end with .0, so if your version is 1.0.2, then it should be 1.0.2.0 .
• — package-name: name of your .exe
• — package-display-name: Your app’s reserved display name
• — publisher-display-name: Product’s PublisherDisplayName from the store
• —identity-name: Product’s identity name from the store
• -a: Resource folder path which contains images.

Now, you have the final production-ready build to upload to the Microsoft store.

Upload appx package on the windows partner dashboard and submit it to the store.

The certification process by Microsoft Store will take some days. If everything goes fine, you should have your windows app published on the Microsoftstore🎉.

Signing off thoughts

Building a Windows app using an electron-builder is easy, except for the packaging and code signing process by the windows store.

You can also configure the build on CI/CD to automate the building process. That way, whenever you perform any changes in your existing code, the build will be generated automatically and will also be uploaded to the store.

We’re Grateful to have you with us on this journey!

Suggestions and feedback are more than welcome! 

Please reach us at Canopas Twitter handle @canopas_eng with your content or feedback. Your input enriches our content and fuels our motivation to create more valuable and informative articles for you.

Related Useful Articles