Using PhoneGap Build & Ionic

ionic_pgb

Recently someone asked how to use PhoneGap Build and Ionic together. Being slightly familiar with both, I thought a short post on this would be in order. If you are not familiar with PhoneGap Build, it is a service from Adobe that allows you to compile your PhoneGap apps in the cloud. If you have a Creative Cloud account, you have access to this service. The service is fairly straightforward, take your web app, an associated config.xml file, and the app’s icons & splash screens, zip them up, then upload that file to PhoneGap Build. After a bit of work, you have native iOS and Android apps ready to be installed (providing you have your signing keys in order).

Using PhoneGap Build with Ionic based applications requires a few extra steps. First, we need to generate a production-ready version of our application. Normally, the Ionic build scripts that are run by the Ionic CLI handle this for use. But we are not building locally so this won’t help us. Instead, you need to make that call yourself. The command to generate a production ready app is

$ ionic build --prod –release

The Ionic CLI will run a set of commands generating your app in its production-ready state. This output is located in the www folder.

Now, we need to assemble the rest of the items that PhoneGap Build requires. In new folder, first copy over all the assets within that www folder. Next, copy over the config.xml file. If you are not familiar with this file, this is what PhoneGap/Cordova uses to define most of your app’s properties (icons, splash screens, plugins, etc). Speaking of icons and splash screens, we need to copy over the resources directory as well. In the end, you should have a folder that looks like this:

Screen Shot 2018-03-15 at 8.24.31 AM

With all our required elements in place, simply zip this directory and upload it to PhoneGap Build. If you need more help understanding PhoneGap Build, you can check out my Lynda.com course.

Now, alternatively, you can use Ionic’s own Ionic Pro service to do the same thing, with a more integrated workflow.

Hope this helps!

 

 

Advertisements

2 comments

  1. When I run the ionic build command the structure of the folders and files in the www folder is a quite different, with a lot of files in the root of the www directory and the src directory is no longer generated, I’m thinking Ionic is now generating a different structure, I’m using the last version of Ionic right now (4.10.3). Can you help me?

    1. Ionic 4/Angular 7 did update the structure of the www folder. The js files are broken into smaller chunks for faster loading. Include all the files, plus the elements mentioned in the post and you should be good to go. Although I would take a good look at Ionic’s AppFlow as an alternative.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.