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.