Key Differences
Before migrating your PhoneGap projects into Monaca, you should read through some key differences between PhoneGap and Monaca projects in order to have a seamless migration.
File and folder structures
File and folder structures of Monaca and PhoneGap projects are quite different:
PhoneGap project structure
Monaca project structure
The main differences are res
folder location and package.json
file.
In Monaca project, the default res
folder is stored in the root folder. But if the src
attribute of the project's config.xml
file is set correctly, the default res
folder is not used. Moreover, package.json
file is required and used for managing the Cordova plugins.
Because of these differences, when importing a PhoneGap project into Monaca, some files and folders will be changed.
Build environment
Before getting started with the migration, you may want to know about the supported Cordova versions and build environments in Monaca.
All newly created projects in Monaca will be using the latest supported Cordova version by default. If you want to use a lower version, please contact us.
For more information about build environments for lower Cordova versions, pleaser refer to Supported environments.
Remarks
When migrating a project into Monaca, there are a few things you should be aware of:
Some installed plugins may disappear
In Monaca, Cordova plugins are managed by the package.json
file. If your plugin information is defined in the config.xml
file, you will need to import them again into Monaca. Please refer to Importing Cordova plugins.
Using third party Cordova plugins requires a custom debugger
The store version Monaca Debugger (found in Google play or AppStore) includes only the core Cordova plugins. If your project contains any third party Cordova plugins besides the core Cordova plugins, you will need to build a custom debugger to test it. Custom debugger will only include the plugins used in the project. Please refer to:
Managing the CSS/JavaScript libraries
In the Monaca Cloud IDE, there is a GUI page for managing the CSS/JavaScript libraries. You can see it by going to Configure → JS/CSS Component Settings.
You can then add the CSS/JavaScript libraries you need. However, this works only if you include the following lines in the index.html
file:
Please note that the loader.js
file loads also the cordova.js
file. Therefore, if you are going to include the above lines, you can remove this line:
Last updated