Cross-Platform development with Cordova and Electron

Building Desktop and Mobile App using the same codebase

Gedas Gardauskas
May 30, 2019 · 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

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.

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.

  • 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
  • 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 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 —-nobuild 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 Content-Security-Policy warning, remove the 'unsafe-inline' and 'unsafe-eval' options from the meta tag wherehttp-equiv=”Content-Security-Policy".

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 {project-path}/www/js/index.js file.

Form Submission Validation Logic (index.js)

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
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 Open Camera button to see if the application successfully launches and displays the camera video.

Example Photo Capture Functionality

Next click on the Capture 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 ElectronSettingsFilePath, in the config.xml file.

ElectronSettingsFilePath Preference Option (config.xml)

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

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 config.xml 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 icon.png is as a standard resolution, then the icon@2x.png 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.

Now our config.xml should look something like this:

Custom Installer and Application Icon (config.xml)

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

$ cordova build electron
$ cordova build electron — debug
$ cordova build electron —release

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.

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 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.

Built Application with Custom Icon

Adding a Package and Arch

The 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 tar.gz, dmg and zip using the x64 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 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 <platform name="android">.

AndroidManifest Permission (config.xml)

Also, we have to update the widget's xmlns 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 config.xml, 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 chrome://inspect/ . 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…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store