Guide for PhoneGap Build Users

In this page, we will demonstrate a quick and easy steps to migrate a PhoneGap project into Monaca Cloud IDE. After finish this guide, you would be able to run, test/debug and build an app from your PhoneGap project using Monaca! Let’s get started!

Prerequisite

  1. Before starting the migration process, please make sure to read about the Key Differences in order to have a seamless migration.

Importing PhoneGap project into Monaca Cloud IDE

  1. Zip your PhoneGap project.

  2. From Monaca Dashboard, select Import and choose Upload Project Package

  3. Browse your project ZIP file.

  4. Input Project Name and Descript then Click Import Project to import the project into Monaca.

  5. Click Open in Cloud IDE to open your project in Monaca Cloud IDE.

  6. Click Run Update to update your project to the latest Monaca’s structure.

  7. When the update process is finished, you can view your app in the Preview window by clicking on + button then choose New Previewer

    The views or operations in the Preview window might not work properly when Ajax requests or Cordova APIs are used. Read more on Live Preview Limitations . In this case, you can test/debug your project with Monaca Debugger (we will talk about this in the next section).

Debugging with Monaca

Monaca Debugger is an application for testing and debugging your Monaca apps on real devices in real-time. When developing Monaca apps in the Cloud IDE, all changes made to your project file(s) will be synced with your Monaca Debugger in real-time as soon as you save them.

Let’s get started with Monaca Debugger as follows:

  1. Install Monaca Debugger app on your device from Google Play or AppStore.

    If you want to install Monaca Debugger on Android emulator, please refer to Monaca Debugger for Android Emulator .
  2. Launch Monaca Debugger app and sign in with your Monaca account. Make sure you are using the same account for Monaca Cloud IDE.

  3. To run a project, simply tap on the project name in Monaca Debugger or click on Run on Device in Monaca Cloud IDE.

  4. Your project should now be running in the debugger. Go ahead and try out the various operations of your project! After that, try making some code changes and save them. Then, you should see the changes reflected in the debugger.

Building the app

After your app migration, let’s start building it. For simplicity, we only show how to create a debug build for Android in this guide.

  1. From Monaca Cloud IDE, go to Build → Build App for Android .

  2. The debug build is selected by default. Click Start Build. Then, the build window will be opened in a new tab.

  3. It may take several minutes for the build to complete. Please wait. The following screen will appear after the build is successfully completed. You can then choose various ways to install the build app into your device.

That’s it! With just that you’ve succesfully built the migrated project with Monaca! That’s easy, right?

Where to go from here

To learn more about Monaca, please refer to the following materials: