Building Desktop and Mobile Applications with Monaca

Sep 30, 2019 · 3 min read

The Cordova team has recently launched the new Cordova Electron platform which gives Monaca users the ability to expand their smartphone application to the desktop market as a desktop application.

Note for Monaca Users: The Electron platform is now available for all plans including the Free Plan.

In this article, we will illustrate how we can build desktop applications with Monaca. If you want to find out more about Cordova Electron, we have the right blog just for you here.

Creating an Electron Application

First of all, we will create a TODO application with an already prebuilt template provided by Monaca. The best way to start locally is by using the Monaca CLI tool to create a brand new Monaca project with the prebuilt template. We will also use this tool to perform various development and build tasks.

Monaca CLI is the full stack development tool for hybrid apps. It is compatible with Cordova CLI and makes the development much easier and faster.

If you haven’t installed it to your environment already, you can install it by running npm install -g monaca in your favorite terminal. Then you can run the following commands to create and preview the sample electron application.

The TODO application template that we are using is unique from other traditional TODO apps. It has a special feature that allows users to insert a picture along with the todo memo. The functionality uses the device’s built-in camera for capturing images. For more implementation details of this feature, please refer to this tutorial.

Building an Application

To build the application, I suggest using the Cloud IDE. You can quickly access the Cloud IDE Build page from the terminal by running the following command.

After the project has uploaded to the cloud successfully, a new browser tab will be open as below.

From this page, we can see that Monaca supports various platforms. The currently supported platforms are Android, iOS, Windows, macOS, Linux, and PWA.

In this example, we will build a releasable macOS application. The build page itself is very simple and straightforward.

  • Select “macOS” form the left panel.
  • Choose “Build for Release” as the build type.
  • Click the “Start Build” button.

It may take a few minutes for the project to build based on the project size, your account subscription plan, and how many builds are in the queue. Once the build is successful, you can download the package from the build result page.

The same source code could be built for different platforms as well. For more detail about building other platforms, please refer to the guideline here.

Other Useful Resources

For more tutorials with Electron platform, we compile some useful tips and tricks here.

Monaca is built on top of the Cordova framework, Therefore, any Cordova projects can be imported to Monaca. However, if you are coming from a different framework/platform, please refer to this migration guideline.

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