In this post I will combine the best of two worlds we will build our Ionic app using the PhoneGap build service.
Why would we want to do something like this, the reason is that with PhoneGap build we can build for multiple platform at once without having to setup development environments for all the platforms.
As we have prepared our app in Ionic the Ionic CLI creates the config.xml outside the www folder so we will need to make some changes to the config.xml file.
You need to be familiar with how to create a config.xml file.
Firstly, we will need to copy the config.xml file from outside of the www folder to inside it, PhoneGap build requires the config.xml file to be inside of the www folder. Make sure to copy the config.xml file inside and not to cut it otherwise you will not be able to use the Ionic CLI build process later. You can alternatively create a new config.xml file inside the www folder which I think is better because it helps keep things clean.
After doing that we will need to change some of the things inside the config.xml file
widget tag from this
to this for the config.xml file inside the www folder
<widget id = "com.ionicframework.myAppName"
version = "1.0.0"
xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
The next change is for the plugins, in ionic we add the plugin for our app using the CLI but for PhoneGap build this happens depending on the plugins listed in the config.xml file.
You need to visit the plugin’s repo and add the plugin to your app like so (As an example I am showing how to add AdMob plugin)
<plugin name="cordova-plugin-splashscreen" source="npm"/>
You need to do this for all the plugins. If you need to know more about how to add plugins in PhoneGap read here.
And that is all !
Now you can zip up the www folder and upload it to phonegap build and this will build the app.