On Mac an Electron icon pops up in the Dock. Hit Control-C to kill the application. Note: The npm start command is just running electron. You can use electron. Directly, but you will need to install electron globally with npm install -g electron. In general, it's better to just use the locally-installed electron binary.

As this process is not documented properly anywhere so here is my try to simplify this process for you.

You can go through my repository which uses the latest version of electron and electron-builder.

The whole process can be divided into the below steps.

1. Building an electron app
2. Sign the build with certificates
3. Publish the app

Prerequisites

1. Apple developer account -> in which you need to enroll in their Apple Developer Program (which may cost you some bucks);).
2. From developer.apple.com -> account -> Certificates, Identifiers and Profile we can get certificates, identifier and provision profile for our app.
3. After enrolling yourself you need following certificates from your account. for more reference
   • 3rd Party Mac Developer Application certi
   • 3rd Party Mac Installer certi
   • Developer ID application certi
   • Developer ID Installer certi
   • Mac Developer certi
4. provision profile -> which also you can download from your apple account.

For now, we are building the desktop app using an electron-builder later in this blog will show you how to make the build using an electron-packager.

So now install all the certificates in your mac system's keychain.

First of all please go through the file structure which I am following.

Note that we need embedded.provisionprofile file at the root of the project.

Here is the example of my entitlements.mas.plist file

Update the TEAM_ID with your TEAM_ID which you can get from your apple account and update necessary entitlements according to your project's requirement. You can find the documentation of entitlements here

For building the electron app let's configure package.json file.

As mentioned in above gist you have to change target for mac to mas which is short term for Mac App Store. With that you need to provide path for provision profile and mas plist file. Change the type parameter to distribution, as we are signing the app for public distribution on mac app store.

Now all we want is right here, So let's build the app.

Fire your mac build command according to your package.json configuration.

As you seen in my repository's package.json script, I have to fire
yarn build
command to generate MAS build.

Main thing is that electron-builder is using [electron-osx-sign](https://github.com/electron/electron-osx-sign) package to sign your .app file internally so you don't have to worry about it.

Now you can see .pkg file in your output folder which we are going to use for publication.

Now you can see .pkg file in your output folder which we are going to use for publication.

Finally, It's time to upload the build to Mac App Store.

• Follow below give path:
  1. Open Xcode in your mac.
  2. From Xcode menu bar, open Xcode Menu -> Open developer tool -> Application Loader.
  3. From given 2 options, choose deliver your app option and choose .pkg file of your application.
  4. Next screen will look like this.
  5. Click on next and it will upload your build.
  6. Go to appstoreconnect.apple.com and fill up all the necessary fields.
  7. Find the Build section in that form from which you can select your uploaded build version for submitting for review. (After uploading the build it will be in processing state for some time)
  8. After submitting the build successfully. It will take around 24 hours for reviewing the build.
  9. Your app will be ready for sale now :)

Build the electron app with electron-packager

Why?

• I recently faced one issue like I am not able to build and upload build to Mac App Store with electron latest version 6.0.12 and electron-builder version 21.2.0. It was giving me helpers error while uploading build from Xcode.

So I chose another way to upload build which is electron-packager.

• Steps:
  1. Install electron-packager via yarn or npm.
  2. Now let's build app with following command.
  3. After successfully building .app file let's sign the app with following command.
  4. Now if you noticed, we are still playing with .app file, so let's build .pkg file to upload it to the Mac App Store. For generating .pkg file we are going to use electron-osx-flat.
  5. Now you have signed .pkg file, so follow upload procedure as mentioned earlier in this post.

If you want to publish electron app to windows store here is my friend's article.

Thank you for reading.
Keep exploring :)

In this post I am going to convert our Vue.js QReader app we build earlier into a native desktop app using Electron, gone are the days when if you wanted to create an app for a desktop you needed to know languages like C++, .Net or Objective C. With tools like electron you can build a fully native and cross platform for desktops using your web skills JavaScript, HTML & CSS. Let’s get started with some intro about Electron.

About Electron

Electron is a framework for creating native and cross-platform applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts and gives you API so you can focus on the core of your application. Electron is an open source library developed by GitHub Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

Get started with starter kit

Since we will be just wrapping our web app into an Electron web view we can start with the kit provided by Electron, let’s open the terminal and run following commands, I assume you already have Node.js and NPM installed.

Folder Structure of Electron

Here is our app folder structure.

Index.html is the default page and main.js is main process entry point, I will explain main and renderer process later in this post.

Load our App in Electron Window

Now by default electron is loading a local index.html file, if your app is local you thats fine, but in our case, we want to use our already running app, so we will load the URL. Let’s open the main.js and tweak the createWindow() function on line 14 to load the URL.

Now if you npm start in the terminal you should see our app loaded from url.

Main & Renderer Processes

Let’s dive into core concept of processes, so what is a process you might ask? In operating system level an instance of a computer program that is being executed is called a process. For example, if I start an Electron application and then check the Activity Monitor in macOS or Task Manager on Windows, I can see how many processes are associated with my Electron program.

Main process

The main process is responsible for creating and managing BrowserWindow instances and various application events, If you know vue.js you can think it like root component. You can register global shortcuts, create native menus and dialogs, respond to auto-update events, and more. As name suggest our main process will be main.js file in this case. Most of Electron APIs are available in the main process with all node.js modules you installed.

Renderer Process

The renderer process is responsible for running the user-interface of your app, a web page which is an instance of webContents. All DOM APIs, node.js APIs, and a some of Electron APIs are available in the renderer.

Here is the list of API for all processes as of Electron v1.6.7.

Enough with the theory, let’s complete our app.

Fix white splash screen on load

The think is when the main process creates window it shows on screen but it can take a little while to completely initialize web view and fetch the URL can also take some time, that’s why it shows white splash, we can fix it by changing a color of the background to match our app or we can listen for page ready event.

Let’s modify new BrowserWindow() by passing show: false, which will not show the window, we will add a listener for ready then we will ask window to come on screen.

If your app is heavy (needs lots of data preloaded on launch) it can take some time to load the app, which will feel like slow launch, user will not see anything happening until app loads, one way you can keep the user engaged by building a splash screen which will show loading state initially.

App Name

By default when you launch the app it will display Electron in the menu bar, but we need it to be QReader, we can change it by updating your packages.json and adding productName field which will be used to name it later when we generate our app file.

App Icon

In order to assign a custom icon you will need a PNG 1024 x 1024px square icon, I am using this artwork. There are plenty of image converter utility out there, but I prefer ICONVERTICONS which does all the conversion we will need, .ico for windows, .icns for mac and .png will work for linux. Here is the icon I am going to use:

Once you downloaded all the converted icons paste them into below folder structure. Create assets folder in root first.

Now we have the icon, next, we will need to use it in our app. let’s pass icon in new BrowserWindow configuration.

Open target=_blanks links in New window

If you open a feed link, it should open in the browser window, but in our current app as you can see it is opening in a new window which is not we want.

We can fix it by running listening for new-window event on the webContents. Add this in main.js.

That fixes this issue, now we need a launcher for app, lets build the .app file for mac, you can also build for window and linux.

Generate Electron Package

Lets pull the electron-packager as dev dependency from npm.

Now we have it, lets generate package for mac.

Mac Build

It will generate the .app file into release-builds/QReader-darwin-x64 folder.

Linux Build

Windows Build

Here are options details for packager

overwrite: replaces any existing output directory when packaging.

platform: The target platform to build for

arch: the architecture to build for

icon: sets the icon for the app

Electron Mac App

prune: runs npm prune –production before packaging the app. It removes unnecesary packages.

Electron App Icon Mac App

out: the name of the directory where the packages are created.

Electron App Icon

Now you can run the app by just clicking on app icon. and you can see you the name of app is also changed from Electron to QReader.

Electron App Icon Mac Download

Conclusion

Electron App Icon Mac Desktop

I have covered only the basics in this post, I will suggest you must install the API Demos app from Electron if you really wanted to learn more. with electron its very easy to build native desktop app, if you know the html, css, and javascript you are all set. Let me know what you have created with Electron, if you have any question let me know in comments.