Migrating From Phone Gap to Monaca

Alas Phone Gap is no more, Adobe suspended funding for the project in July 2020. However there are great alternatives available. Monaca provide a cloud based hybrid app development environment and all the tools you need to publish your apps. Monaca like Phone Gap has free and paid for services. However unlike Phone Gap the Apache Cordova plugin availability is regulated. The free service offers you access to a limited amount of plugins, but for a subscription fee these can all be unlocked and licensed for publication with your app.

Migrating to Monaca

Migrating an app over to Monaca from Phone Gap is relatively simple. The main difference is the structuring of the file system. All assets such as fonts, JavaScripts and images need to to moved into a single directory named components, the CSS files are located in their own directory. Another key differences is the use of a package.json file. There is more information in this guide published by Monaca on migration from Phone Gap .

Monaca CLI

Monaca CLI can be installed to your PC via npm. The Monaca CLI is great for starting the migration process, this is as well as creating projects and importing files into the cloud development environment. Npm is the worlds largest software repository and can be easily installed with the CLI (Command Line Interface). If you have been working with Phone Gap in the past you will already be familiar with npm as it is the home of many of the Cordova plugins.

The easiest way I to migrate an app from Phone Gap to Monaca is to create a new Monaca project. Information on how to install Monaca is available in the Monaca CLI overview. A prerequiste is to have Node js installed on your system.

When creating a sample project simply select ‘No Framework’ from the category options and then ‘Blank’ in the template options. The package.json file is included in the files and folders installed on your PC. From that point just copy your existing app files into the relevant directories and update your links in the HTML files.

There are other nuances in the Monaca app configuration such as the absence of a cordova.js file and the inclusion of a loader.js and loader.css files. These key differences all clearly detailed in the Monaca documentation. After integrating the files from the Phone Gap build you can simply upload to Monaca from the CLI

Monaca Project Creation

Advantages of Monaca

Unlike Phone Gap Monaca offers a cloud IDE, this is as well as a companion app that can be used for previewing and debugging app developments. The Cloud IDE covers all aspects of app creation and publication. The cloud editor works best in the Chrome browser, there are also local kits available for development on your PC. The cloud editor is great for simple file edits and features an app preview screen with multiple device options for testing app responsiveness.

The app previewer can be installed on both iOS and Android devices. It features a debugger which is advantageous as well as a screenshot tool, which is also very useful. Eventhough working with Monaca costs more than Phone Gap I have found it be a lot more user friendly. Support (available for paid plans only) is also very good with fast response times.

Publishing the App

Prior to publishing the app needs to be signed with keychain certificates. For signing and certificate generation for iOS an Apple Mac computer with El Capitan iOS or higher is required. The platform specification for the Mac is important as towards the end of your project you may wish to install Xcode to publish the App to App Store Connect (minimum Xcode version 8). To download Xcode you will need an Apple ID however to generate keys for development and production you will need to sign up as an Apple Developer. This currently costs 99 USD per year.

To publish to the Google Play Store you will be required to sign up as a developer this requires a one off registration fee of $25. The self signed certificate can be created with the windows keytool appliation. For more information read this article on certificate generation.

App Published to Google Play