Skip to main content

Adding Plugins To Phonegap Build Apps

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. :-)