Cross-Platform development with Cordova and Electron

Building Desktop and Mobile App using the same codebase

Gedas Gardauskas
May 30 · 9 min read

Cordova and Electron

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?

Apache Cordova is an open-source framework, that allows developers to use standard web technologies — HTML5, CSS3, and JavaScript to build “Hybrid” cross-platform applications.

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.

Cordova achieved this by using the platform’s native WebView component. Additionally, there is a JavaScript-to-Native bridge that allows an application to leverage native features, for example, geolocation, camera or even system functionality. If a plugin is missing and you need access to a specific native feature, you can always develop a plugin that supports the feature but will require native language understanding.

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.

Prerequisites:

  • PythonーVersion 2.7.x with TLS 1.2 Support
  • Xcode
  • RedHat Build Support (Optional)
  • Homebrew
  • 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

The flag was appended to disable building when previewing as the build is not used. This will speed up the previewing speed.

Cordova Electron App Preview with Default Template

To avoid Electron’s warning, remove the and 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:

Sample App Layout (index.html)

Additionally, we have to add a function which handles the form validation for submission in the file.

Form Submission Validation Logic (index.js)

In the Application Constructor, we will call the function to enable the form validation method:

this.disableFormSubmission();

You can see your changes by executing the run command:

$ cordova run electron --nobuild
Cordova Electron App Preview with Custom Form Layout

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.

Picture Capture Functionality (index.js)

Let's re-run our application and click on the button to see if the application successfully launches and displays the camera video.

Example Photo Capture Functionality

Next click on the button and see if it updates our profile picture.

Example Taken Photo in App Sample

Customizing the Application’s Window

Electron provides many options to manipulate the BrowserWindow. For a full list of options, please see the Electron’s Docs — BrowserWindow Options.

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.

BrowserWindow Settings (settings.json)

Next, set the relative path of this file as the value for the preference option , in the file.

To override or set any BrowserWindow options, in this file we can add the options to the property.

Customizing the Icons

Finally, we can add custom icons to our app for a more personal feel.

Customized icons are declared with the element(s) in the file.

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 is as a standard resolution, then the 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 size icon.

<icon src="res/electron/icons8-darth-vader-512.png" />

You can learn more about icon customization in Cordova’s Documentation.

Now our should look something like this:

Custom Installer and Application Icon (

Note: In the we 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.

Debug Builds

$ cordova build electron
$ cordova build electron — debug

Release Builds

$ cordova build electron —release

Build configurations

Default Build Configurations

By default, with no additional configuration, will build default packages for the host operating system that triggers the command. Below, are the list of default packages for each operating system.

Default Packages for Each Operating System–Cordova Electron Build Configurations

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 file located in the project's root directory. The file contains three properties that separate the build configurations for each OS.

Built Application with Custom Icon

Adding a Package and Arch

The 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 , and using the arch.

Custom Build Configuration (build.json)

In a terminal, when building, we should see a printout of the three packages that are being built.

Built Package Output Paths Displayed in Terminal

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 file. Since Android needs permissions defined on the , we can use the attribute to append these permissions. The tag should be nested inside the .

Also, we have to update the widget's tag for Android.

Updated Widget Tag for Android (config.xml)

Building for Android and Electron

Before we can build for Android, we need to make sure all build dependencies are installed.

  • Java SDK
  • Gradle
  • Android Studio

Please, see Cordova Android documentation for more details.

Once you’re done with setting up the Android environment and updated , you can build for both Electron and Android.

$ cordova build
Example Terminal Build Output

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 . This URL can only be used in Google Chrome.

We should see something like this:

Example Chrome Developer Tool’s Inspector Window (First Load)

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.

Example Chrome Developer Tool’s Inspector Window (After Taking Picture)

If the camera doesn’t show up, you might need to manually enable Camera permission for the DemoApp in the Android settings menu.


In Conclusion

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.

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Gedas Gardauskas

Written by

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.