David.dev 🎪

about ~ apps

2019-11-10 #electron

How to Submit your Electron App to the Microsoft Store

While the good folks at Electron are fixing the issue for submitting to the apple store I decided to take the dust of my windows razer laptop and do what electron is supposed to do so well: build a windows version for my retro MP3 player. 

With the excellentElectron Windows Store package I thought that submitting it would be trivial. Not really! Missing some important steps will result in several wasted hours debugging. There are several not-so-documented steps that you need to take into account to prepare your app for submission to the Microsoft store (or windows apps store)

Step 1

You will need a Microsoft Developer Account. This has a cost of around 19$. To package you also need the Windows SDK.

Step 2

You will now need to register your app (and register the relevant name) through the dashboard you will need to complete this before you start making your .appx package (the format accepted by the Microsoft/Windows store). 

Step 3

Select your freshly created app in the dashboard and navigate to Product Management-->Product Identity. Here you will find the Package/Identity/Name and Package/Identity/Publisher Both are important for the next steps so save them in a text file for future reference

Step 4 

you can now package your app using electron-builder with npm run build (PS I also tried with electron-packager but I do get an icon error that seems not so easy to fix). If you are on a Windows machine you don't need to specify anything on package.json. Electron-builder will automatically create the win-unpacked that we need for the next step.

Step 5

Now you can run electron-windows-store for example just specifying input, output folder, app version and name

npx electron-windows-store --input-directory C:\Users\gurug\Downloads\trommel\trommel-master\dist\win-unpacked out --package-version 1.0.0.0 --package-name trommel 
 

this will take you through the electron-windows-store setup now very important answer yes to create certificate and as organization use Package/Identity/Publisher as per step 3 that will look like like this 

CN=123456-9A2B-1122-ABC1-11234ABCD",

this step is essential else electron-windows-store will create a development certificate will be 

CN=development

that all not be accepted by the Microsoft Store.  Note that you do not need to buy a developer certificate to submit your app to the store. A self-signed developing certificate that is generated by electron-windows-store will work fine as long as the publisher matches what is displayed in your apps dashboard for your specific app (see Step 3).

also the default bin location used by electron-windows store

C:\\Program Files (x86)\\Windows Kits\\10\\bin\\x64",

doesn't match the default installation of the latest Windows SDK 

the format I have is 

C:\\Program Files (x86)\\Windows Kits\\10\\bin\\10.0.18362.0\\x64",

so be sure to modify it on the cli setup. 

Step 6 

We can now build the package using

C:\Program Files (x86)> npx electron-windows-store --input-directory C:\Users\(PATH_TO_YOUR_win-unpacked_folder)
\out --package-version 1.0.0.0 --package-name (yourAPPNAME) --publisher-display-name (YOUR_DISPLAY_NAME) --identity-name AS_STEP_3

you should now have a properly signed .appx package that you can upload for approval in the Microsoft/Windows app store. 

This is it for now! Will report back with the outcome from the store. (currently in verification).