In the current world of application development, we primarily target desktop and mobile devices. Both markets have various devices that run a hand few of operating systems (OS). In the mobile industry, the two significant players that cover the vast majority of consumers are iOS and Android. Like mobile devices, desktops also has three majorly used OS which are Linux, macOS, and Windows.
Each platform has its various programming languages, frameworks, toolsets, and nuances for builds an application. Nevertheless, end users just want to be able to use their favourite application between any environment. As a developer, we strive to reach each user and support their needs.
In this article, we are going to focus on how we can develop an application for all three desktop operating systems without needing to learn all these nuances and various languages and how our application could even target mobile devices. We can achieve all this with the combination of Electron and Cordova.
Let’s Start with Definitions
What is Apache Cordova?
With this framework, we can deploy to multiple platforms using a single set of source code. It removes the need for learning native languages for simple applications.
What is Electron?
Initially, Electron was used as the base of Atom, GitHub’s hackable text editor. Eventually, both Electron and Atom became open sourced. Electron, similar to Apache Cordova, also makes it possible to build cross-platform applications with web standard technologies, except it is targeting the desktop community. Electron was able to accomplish this by combining Chromium and Node.js into a single runtime. Ever since it has been released, it has been growing in popularity and used by many open source developers, startups, and well-established companies.
Apache Cordova Now Supports Electron
On 28th of February 2019, Cordova’s team announced their first official release of the Cordova Electron platform that supports Electron v4.0.1 and electron-builder.
Cordova used to support Ubuntu and continues to support the Windows and macOS platforms, but with the release of Electron platform, it provides an alternative means for building all three major platforms.
Additionally, Electron provides right out of the box its own support implementation for menus, dock integration, finder integration, documents, and etc without the need for additional plugins.
Why Use Cordova Electron?
- Takes an existing hybrid mobile or desktop application and expand to both markets simultaneously.
- Take advantage of existing browser supported Cordova plugins.
Let’s Start Building
For this article’s sample Cordova Electron application, we are going to build an app that uses the WebRTC camera functionality. I will be using a macOS environment to develop my app but you can follow with any OS of your choice.
First, let’s make sure we have the proper requirements for macOS. For other OS, please check the Cordova Electron Requirement documentation.
- PythonーVersion 2.7.x with TLS 1.2 Support
- RedHat Build Support (Optional)
- RPM (Optional)
For other OS prerequisites, you can check the Cordova Electron Requirement docs.
For all OS, we will also need to install Node.js to fetch the Cordova CLI tool. It is recommended to use the latest LTS version of Node which is currently 10.x (2019/05/16) and is a requirement of Cordova CLI.
Creating a Project
Using npm, let’s begin by installing Cordova and create a new project.
$ npm i -g cordova
$ cordova create cordova-electron-demo com.demo.app DemoApp
In the newly created Cordova project directory, we can use the following command to add the Electron platform.
$ cd cordova-electron-demo
$ cordova platform add electron
Previewing a Project
Now that the project is created with the Electron platform, we can preview our project by running the following command:
$ cordova run electron --nobuild
—-nobuild flag was appended to disable building when previewing as the build is not used. This will speed up the previewing speed.
To avoid Electron’s
Content-Security-Policywarning, remove the
'unsafe-eval'options from the meta tag where
Designing a Layout
To quickly build a design for our sample application, we will use Bootstrap’s v4.3.1 which can be fetched from BootstrapCDN. Bootstrap is an open source front-end component library that is pack with pre-designed form input elements and visual effects.
The sample application will display a user profile edit page with form input element with mocked data and a profile picture.
So finally, I ended up with the following HTML body:
Additionally, we have to add a function which handles the form validation for submission in the
In the Application Constructor, we will call the
disableFormSubmission function to enable the form validation method:
You can see your changes by executing the run command:
$ cordova run electron --nobuild
Taking a Picture
To be able to take a picture, we will need to implement the ability to access the web camera of your device. This can be done by leveraging the WebRTC functionality.
The following code below handles the logic for verify that the browser can access the user media device and taking the photo.
Let's re-run our application and click on the
Open Camera button to see if the application successfully launches and displays the camera video.
Next click on the
Capture button and see if it updates our profile picture.
Customizing the Application’s Window
In this demo, we will increase the window’s hight to better display our entire application.
Using Cordova’s recommended procedure, we are going to create an Electron settings file at the project’s root directory which will define BrowserWindow settings.
Next, set the relative path of this file as the value for the preference option
ElectronSettingsFilePath, in the
To override or set any BrowserWindow options, in this file we can add the options to the
Customizing the Icons
Finally, we can add custom icons to our app for a more personal feel.
Customized icons are declared with the
icons element(s) in the
For devices that support high-DPI resolutions, such as Apple’s Retina display, you can create a set of images with the same base filename but suffix with its multiplier.
For example, if the base image’s with a filename
icon.png is as a standard resolution, then the
firstname.lastname@example.org will be treated as a higher resolution image with a DPI doubled.
Although I’m using macOS, I won’t be using high-resolution images in this tutorial. I’ll just add one
512x512 size icon.
<icon src="res/electron/icons8-darth-vader-512.png" />
You can learn more about icon customization in Cordova’s Documentation.
config.xml should look something like this:
Note: In the
config.xmlwe can also change the name of our app, add a description, specify version and etc.
Building a Project
There are two types of builds: A debug/development and release build.
$ cordova build electron
$ cordova build electron — debug
$ cordova build electron —release
Default Build Configurations
By default, with no additional configuration,
cordova build electron will build default packages for the host operating system that triggers the command. Below, are the list of default packages for each operating system.
Since the Electron framework is for creating cross-platform applications, multiple configurations are required for each OS build. If you would like to customize the build configurations, they all should be placed within the
build.json file located in the project's root directory. The
build.json file contains three properties that separate the build configurations for each OS.
Adding a Package and Arch
arch property is a list of architectures that each package is built for. When the property is defined, the default arch is not used.
The configuration example below will generate for macOS an
zip using the
In a terminal, when building, we should see a printout of the three packages that are being built.
Use the Same Codebase for Android Application
The powerful thing about combining Electron with Cordova is that now you can take the same codebase and build for mobile platforms such as Android. To support Android, we will need to add the Android platform to our Cordova project.
$ cordova platform add android
Set App Permission on Android
Next, we need to ensure that the Camera resources for Android have the appropriate permission. We can declare this in the
config.xml file. Since Android needs permissions defined on the
AndroidManifest, we can use the
config-file attribute to append these permissions. The
config-file tag should be nested inside the
Also, we have to update the widget's
xmlns tag for Android.
Building for Android and Electron
Before we can build for Android, we need to make sure all build dependencies are installed.
- Java SDK
- Android Studio
Please, see Cordova Android documentation for more details.
Once you’re done with setting up the Android environment and updated
config.xml, you can build for both Electron and Android.
$ cordova build
To test the camera’s functionally, you must run the application on your device.
For Remote Debugging instructions, please see the Get Started with Remote Debugging article.
Once you have prepared remote debugging, you can execute the following command to build and deploy the app to the mobile device.
$ cordova run android --device
We can inspect the application by opening the Google Chrome inspector at the following URL
chrome://inspect/ . This URL can only be used in Google Chrome.
We should see something like this:
When interacting with the app on the mobile device, it should display a mirror image of the app on the device in the Chrome Inspector. For example: after taking a photo with the mobile device, we should see the appropriate changes in the inspector.
If the camera doesn’t show up, you might need to manually enable Camera permission for the DemoApp in the Android settings menu.
With the new introduction of the Cordova Electron platform, it opens the doors for supporting Linux platforms with a single codebase and provides developers with an alternative way to build all three major desktop platforms and including mobile platforms in one. As well, bring the full potential of leveraging Electron’s powerful and pre-packaged features and hopefully, make it easier for developers to support cross-platform applications even more!
You can find all the application code in my GitHub repository.