Third-party modules

Shared modules

We've already covered adding your own CommonJS modules to an app in Using CommonJS modules, now we're going to look at including other people's modules. These modules are shared as packages in the Kanso repository.

You can see a list of available code on the Packages page.

Adding dependencies

To include a package containing some useful modules, we just add it to our kanso.json, much like we've already done for the attachments, modules and properties packages. The difference is, this new package will provide our app with a module, instead of providing build steps which tell Kanso how to construct it.

Let's add the db package as a dependency in kanso.json:

{
    "name": "example-app",
    "version": "0.0.1",
    "description": "The simplest possible app",
    "attachments": ["index.html"],
    "modules": ["lib"],
    "load": "lib/app",
    "dependencies": {
        "attachments": null,
        "modules": null,
        "properties": null,
        "db": null,
        "jquery": null
    }
}

The db module provides methods for interacting with with CouchDB: fetching documents, querying views etc. However, it also uses jQuery for making AJAX requests, so we've added that to our project directory and listed it in the attachments setting in kanso.json.

Using third-party modules

Now, let's update index.html to make use of the new code. For information on the modules a package adds to your app, you'll have to check the package's documentation. In this case, it's just a single module called db.

<h1>Hello, world!</h1>
<ul id="makes"></ul>

<script type="text/javascript" src="modules.js"></script>
<script type="text/javascript">
    var db = require('db').current();
    var $ = require('jquery');

    db.getView('example-app', 'makes', function (err, data) {
        if (err) {
            // an error occurred
            return alert(err);
        }
        for (var i = 0; i < data.rows.length; i++) {
            $('<li/>').text(data.rows[i].key).appendTo('#makes');
        }
    });
</script>

For more details on using the db module, check out the db package page.

To delve deeper, continue with Users and authentication.