Publishing Electron App to Windows Store
The publication process of an electron app can be quite difficult as every platform provides support to publish app in their native development tool like for windows, There is a visual studio that does all work for certification and all, and thus for electron, we have to do it all manually.
If you are looking for publishing your electron app to the Apple App store also.
Here is my friend’s article.
Big thanks to electron-windows-store without this library it would be almost impossible.
The whole process can be divided into three steps.
- Building your electron app.
- Set-up of electron windows store.
- Making electron windows store command to make the .appx package.
-> Building your electron App.
I’m assuming here that you already know about the built process of your electron-app.
I recommend you to use electron-builder for packaging your electron-app. Create NSIS package and don’t try to add all code signing in the config of electron-builder, we will do that using an electron windows store later on. Make sure there should be an unpacked app(Click and launch type) wherever you are saving your build. We are going to use that unpacked folder later.
-> Set-up of Electron Windows Store
Installing electron-windows-store
npm i -g electron-windows-store
~Prerequisites
→ Installing windows-kit
launch run by pressing window + r and write winver.
Get your Windows version from the dialogue box.
Now download windows kit same as your version of windows from below link
Install SDK at the default location.
Get installed SDK path,
`C:\Program Files (x86)\Windows Kits\10\bin\${Downloaded windows version}\x64${Your OS type}`
Copy the above path and save it for later use,
→ Getting your publisher ID
Create a Microsoft developer account from the below link.
Signup form will ask for publisher name. Just enter your app name and it must be unique.
After creating your Microsoft partner account go to below link
Go to product Management and Product Identity.
→ Finally, it’s time to get started with electron windows store
Open PowerShell in Administrator mode
Then, configure your PowerShell:
Run below command to set an execution policy
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
Run below command, It will start CLI and asks for some info
electron-windows-store
It starts CLI and first asks you for
Did you download and install the Desktop App Converter? It is *not* required to run this tool. (Y/n)
Give n there, As we are using file copying method Desktop App Converter will not be required,
You need to install a development certificate in order to run your app. Would you like us to create one? (Y/n)
Give Y there, This will create a certificate for signing your app,
Please enter your publisher identity: (CN=developmentca)
Copy Package/Identity/Publisher from the Microsoft partner tab that we open in step two of the prerequisite. And paste it here, It will be something like this CN=*******************,
Please enter the location of your Windows Kit’s bin folder: (C:\Program Files (x86)\Windows Kits\${windows_version}\bin\x64)
Now Paste the path of a windows kit We set up in the first step of prerequisite. Then it will create a certificate for you, Then stop the process by entering Ctrl+c.
All Done! For CLI, CLI saves all these data in one file
You can see these settings of CLI at file
C:\Users\${username}\.electron-windows-store,
If you think something has gone wrong just delete .electron-windows-store file. And run electron-windows-store in Powershell it will start CLI again.
CLI stores certificate at,
C:\Users\${username}\AppData\Roaming\electron-windows-store
In case the Certificate didn’t work. delete certificates stored at the below location and delete .electron-windows-file and start everything over again.
-> Making electron windows store command to create the .appx package
This is the final step, In this step, we have to create an electron-windows-store command that will create an appx for you.
~Prerequisites
We will need your app logo in specific formats for publishing, All image’s background should be transparent. For more info refer below link,
- Square 256x256 in .icns formate named “icon.icns”
- Square 44x44 Logo named “SampleAppx.44x44.png”
- Square 50x50 Logo named “SampleAppx.50x50.png”
- Square150x150Logo named “Square150x150Logo.png”
- Wide310x150Logo named “Wide310x150Logo.png”
Create one folder called Resources at the root in your project and put all these images in that folder.
Building electron-windows-store command.
You can refer above link if you want more info.
Your demo command will look like this,
electron-windows-store — input-directory C:\MyElectronApp\dist\win-unpacked — output-directory C:\MyElectronApp_Appx — package-version 1.0.0.0 — package-name MyElectronApp — package-display-name ‘MyElectronApp’ — publisher-display-name ‘MyElectron DestopApp’ — identity-name MyApp.MyElectronApp -a C:\MyElectronApp\Resources\
- input-directory > your apps win-unpacked folder path,
- output-directory > Output directory for appx
- package-version > Your package version but try to keep last digit 0 example 1.0.0.0 then make 1.0.1.0 and then 1.0.2.0
- package-name > name of your .exe in win-unpacked folder
- package-display-name > Your reserved app name
6. publisher-display-name > Enter your product’s PublisherDisplayName
7. identity-name > Copy paste Enter your product’s Identity/name
8. -a > Enter path of the Resources folder at the root of your project containing all the icon images.
Press Enter and All Done. You will find an appx package at your output directory.
Upload that package at the windows partner dashboard and then go for submit to store.
You have to wait for few days for the certification process. If all goes well, your app will be in the windows store after certification process ends.
