Adding Plugins To Phonegap Build Apps

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial I will show you how to add plugins to phonegap build apps. When it come to building apps with the phonegap build service in the cloud everything is configured by the config.xml file.

As we are moving further into my phongap build beginner course now you should be comfortable with using the phongap build interface by now.In the previous tutorial I covered how to create a basic config.xml file form scratch here. We will be working with the same config.xml file which we created in the previous tutorial.

Plugins in phonegap build apps can be added either form a git repo or as a npm package. All we need to do is to add <plugin> tag to our config.xml file with name and source attribute.

Form NPM

Here the name of the plugin can be obtained by searching the cordova plugin repo here.  More on how to select a plugin in the tutorial video below.

Form Git

To add form a git repo you need to add the git url as the value of the spec attribute.

Adding plugin this way will get the master branch of the repo.

 

A few things to note before we move ahead the order in which you add the plugins does not matter. Also you can add plugins that are form both git as well as npm but remember not to add the same plugin twice.

Full documentation for adding plugins can be found here.

Installing a specific version of phonegap plugin

There will come a time when you will need to install a specific version of a plugin for some reason.

Form NPM

This can be easily achieved by adding the spec attribute to the plugin tag when you are using npm to get your plugins along with the name attribute.

here the plugin with the verison 1.11 will be fetched.

 

You can use the ~ tilde symbol in front of the version number to get fussy matched versions. For example the following will get plugin with major version 1.x and will get the highest minor version

So if the highest minor version is 1.5 it will fetch that version of the plugin.

We can take the fussy match one level deeper as well to match for [major].[minor] versions and get the highest patch as follows

This will get the highest patch version of the plugin 1.5.x

 

From Git

If you wish to add a specific branch or commit form a git repo you can add the name of the branch with the url of the repo separated by a hash(#)

As show above the #sub-branch should be the name of the branch / commit that you want to use form the git repo. Read more about it here.

 

Checking available plugin versions

It is easy to get the plugin branch / commit when you are adding plugins for a git repo as github gives a list of all the available branches, but if you are adding plugins for NPM you can check which versions of a plugin are available you can do that as show here.

 

Adding plugins to config.xml file

Now it’s time to actually add a few plugins to the config.xml file that we created in the previous tutorial. So after adding the plugins we get the following code in config.xml file.

Conclusion

Once you know what values to use adding plugins for phonegap build is literally as easy as just adding a tag to the config file. As mentioned in the video the phonegap build repository is depricated so make sure you are using npm or github as you plugin source.

Watch Video Tutorial Here:

 

Full Course Curriculum : Click here

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Pingback: Phonegap Build Beginner Course - pointDeveloper.com()

  • Pingback: Whitelisting Phonegap Build Apps And Connecting To Internet - pointDeveloper.com()

  • Pingback: How To Build Ionic App with PhoneGap build - pointDeveloper.com()

  • Hello –

    Came across your page via Google search to ensure I have the latest update for PhoneGap CLI (still very confused)

    I have built an app via Bubble Programming, and using PhoneGap to upload for iOS. I have successfully created a package but while testing the app I’m getting the following error message: “Sorry, we ran into a temporary bug and can’t complete your request. We’ll fix it as soon as we can; please try again in a bit!”

    When I look in my PGB profile, it says that I don’t have any plugins and currently don’t have the latest version of PGB. Upgrade to cli-6.3.0. I followed your instructions in the doc section but still don’t see that I successfully upgraded to the latest version.

    • If you have the latest version then you will not see any message, it only gives a prompt when you do not have the latest version..Phonegap build services does have some down-time now and then. So apps build using that period will have that issue..

      You can check the status of the build service here http://status.build.phonegap.com/

      As a side note, the PhoneGap CLI and PhoneGap Build are two different things, a thing to keep in mind is that the config.xml file often needs to be moved inside the www folder when moving from PhoneGap CLI to build