PouchDB: Quickstart With Ionic 2

So easy, I almost cried.

Author’s Mindless Ramblings:

During a rough night of wicked bad insomnia in which I spent 12 hours researching alternatives to Firebase (because reasons). I decided PouchDB was not only the best alternative, it’s probably the best BaaS service option available (because more reasons). Not going too in-depth with this yet. I’m just trying out PouchDB and documenting my journey.

Actual Useful Information:

• Sign up for Cloudant.
  This is an enterprise level solution and an IBM product but don’t let that scare you. It’s actually really affordable and easy. There’s no setup, just sign up and go. While there’s no “free tier”, you’re only charged when your usage exceeds $50 (a long time).
• Fire up a new Ionic 2 app.

ionic start -v kittens blank
cd kittens

• Install PouchDB.

npm install -g pouchdb
npm install --save pouchdb
npm install --save-dev @types/pouchdb

• Open up src/pages/home/home.ts.
• Import PouchDB.
  import * as PouchDB from 'pouchdb';
• Create a new database and poke it with a stick.

let db = new PouchDB('https://your_account.cloudant.com/kittens');
db.info().then(function (info) {
  console.info(info);
});

• Next, we’ll need to… Oh... Nevermind. Apparently we’re done.
  Start your server with ionic serve. Open up the console and you’ll see your new database. (You may need to manually refresh once.) Here’s the full code from home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as PouchDB from 'pouchdb';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
    let db = new PouchDB('https://your_account.cloudant.com/kittens');
    db.info().then(function (info) {
      console.info(info);
    });
  }
}