Create a CouchApp with CouchAppJS
« Sunday, November 02, 2014 »


For the last few weeks, I got a more and more interested in development with CouchDB. I never really had any interest in hosting CouchApps but I'm getting more and more interested in hosting static sites using AngularJS and html/javascript frameworks alike.

For that reason, I wrote CouchAppJS. It adds some feature that aren't available on theoriginal CouchApp because CouchApp was written in Python and not in Javascript. Having CouchApp written in Javascript, allows for a better integration of tools like the Bower package manager and existing javascript modules. It's also technically possible to tests the code that will be pushed to the server before even pushing to the server.

Here's a small tutorial on how to get started with CouchAppJS.

Installation

It's as easy as doing

npm install -g couchappjs

Or you can clone the project from here.

Deploying our first CouchApp

For this small tutorial, we'll see how we can publish a static site in no time. First, clone the project located at this address on your computer: https://github.com/tastejs/todomvc . Then create the CouchApp project with the command couchapp init.

$ couchapp init
Couchapp name: TodoMVC
Description:
Server hostname: (http://localhost:5984)
Database: todomvc
Use bower to load dependencies (false) true
Preview: couchapp.json
{
  "name": "TodoMVC",
  "description": "",
  "useBower": true,
  "targets": {
    "dev": {
      "hostname": "http://localhost:5984",
      "database": "todomvc-dev"
    },
    "prod": {
      "hostname": "http://localhost:5984",
      "database": "todomvc"
    }
  }
}
Initializing project into: /Users/llacroix/devel/TodoMVC

When you answer all questions as above, it should print the json file to the terminal and it should look like above. Make sure that you typed true for useBower. Also pay attention to the target's database. The dev target has the prefix -dev. It can be edited to something else later as you need.

Now it's time to add files to our CouchApp. Find the folder named angularjs-perf inside the todomvc repository you just cloned. It should be located into examples/angularjs-perf. Copy its content into the folder attachments of the couchapp project.

Make sure the database exists on your couchdb server and you can proceed. Make sure that you have access to the database. If you need to authenticate, put the user and password in the url for basic auth.

For example:

http://user:password@localhost:5984

If everything is fine, we can now proceed to push our app. But before we just do that, I have to say that you're not forced to push the app to get an idea of what is going to get pushed to the server.

You can add the parameter --pretend to the command couchapp sync to pretend to do a push to the server and couchapp will print the design document to stdout. There is also the command --watch which makes it possible to push continuously on each changes. You can combine --watch and --pretend to see as you edit your app, what is going to be pushed before you do any push to couchdb.

Now let's push our app and just enter the following command:

couchapp sync

Now, you should be able to load the following url: http://localhost:5984/todomvc-dev/_design/TodoMVC/index.html

Conclusion

If you have a simple static application, it can be easily hosted on couchdb. That way, you can also use all the nice features that come with couchdb. Later on, if you decide to use commonjs plugins, you'll be able to exploit the stregth of nodejs directly inside couchdb for anything that doesn't require IO.

comments powered by Disqus

Copyright © 2015 Loïc Faure-Lacroix