Hooks every cordova project should have

Hello everyone,

Ever get tired of installing plugins and coping icons and splashscreens to your cordova project every time you add platform? Why don’t just automate them, wondering how? Here is the solution “Hooks”, yes cordova hooks!

Cordova hooks are the special scripts which allow you to automate the basic features in your cordova project, this uses cordova CLI to automate. In your project’s root folder you found a “hook” folder and there are different subfolder like after_build, after_platform_add, before_build, before_platform_add, etc, which are use to run hook scripts, if there is no folder then create them. You can find the rest of the name here.

Now, here I’m going to help you create hook for adding plugins and coping icons and splashscreens:

Adding Plugins

As we know while creating cordova projects many plugins were required even for the basic functionalities like camera,files,geolocation,etc. Rather than installing them manually by every developer we just automate them using hook in after_platform_add step. Now every time you install platform all the plugins listed gets downloaded and installed automatically. Below is the code to do this:

var pluginslist = [
    "org.apache.cordova.device",
    "org.apache.cordova.camera",
    "org.apache.cordova.file",
    "org.apache.cordova.geolocation"
];
  
var fs = require('fs');
var path = require('path');
var sys = require('sys')
var exec = require('child_process').exec;
 
function puts(error, stdout, stderr) {
    sys.puts(stdout)
}
 
pluginslist.forEach(function(plugin) {
    exec("cordova plugin add " + plugin, puts);
});
 

Adding Icons and Splashscreens

All the cordova projects have their own custom icons and splashscreens, and since cordova didn’t provide any functionality to replace them, hence we have to manually copy them to their required folders, I keep my files in defaults folder But with the use of hook we can automate this also, below you will find the code for doing this:

var filestocopy = [{
    "defaults/icons/icon-72.png":
    "platforms/ios/YourAppName/Resources/icons/icon-72.png"
}, {
    "defaults/icons/icon.png":
    "platforms/ios/YourAppName/Resources/icons/icon.png"
}, {
    "defaults/splash/Default@2x~iphone.png":
    "platforms/ios/YourAppName/Resources/splash/Default@2x~iphone.png"
}, {
    "defaults/splash/Default-568h@2x~iphone.png":
    "platforms/ios/YourAppName/Resources/splash/Default-568h@2x~iphone.png"
}];
 
var fs = require('fs');
var path = require('path');
var rootdir = process.argv[2];
 
filestocopy.forEach(function(obj) {
    Object.keys(obj).forEach(function(key) {
        var val = obj[key];
        var srcfile = path.join(rootdir, key);
        var destfile = path.join(rootdir, val);
        var destdir = path.dirname(destfile);
        if (fs.existsSync(srcfile) && fs.existsSync(destdir)) {
            fs.createReadStream(srcfile).pipe(
               fs.createWriteStream(destfile));
        }
    });
});
 

In above code I added few icons and splashscreens, you can add more to the list and place the  script inside after_prepare hook.

By using these hooks you can make your app build process easy, quick and good thing is you can repeat it as many time you want.

Enjoy!!!

THANKS