How Cloudant and PouchDB work together

If you are planning to build an application that works well in both offline and online cases, PouchDB can be a great candidate for the browser NoSQL database. Go side by side with PouchDB is Cloudant as known as remote database which offers independent serverless scaling of throughput capacity and storage. In this article, we will explore how PouchDB and Cloudant work together.

(Image: Cloudant and PouchDB sync data)

Prerequired: Node.js, JavaScript, VScode editor

This process including 3 main steps:

1. Initialize the project

2. Create a database with Cloudant

3. Establish a local database with PouchDB to sync it with a remote database from Cloudant

STEP 1: Initialize Project

Create a project folder: Your_Project_Name (Example_Cloudant_PouchDb)

mkdir Your_Project_Name
cd Your_Project_Name
git init
npm init
touch .gitignore index.js

Note: don’t forget to put node_modules into .gitignore

Installation:

npm install — save @cloudant/cloudant
npm install pouchdb

(Image1: package.json file after installation)

STEP2: Create a Database with Cloudant

• Create an account on IBM Cloud: https://cloud.ibm.com/registration
• Create a service instance :

(Image2: Click create resource)

(Image3: Search for Cloudant)

(Image4: Select an environment, region, instance name, authentication method, plan)

• Create service credentials:

(Image5: Click New credential)

(Image6: Accept the Manager role)

(Image7: service credentials)

• Import credentials into the project

In VScode editor, install dotenv and create .env file to keep the service credentials, then put .env into .gitignore

npm install dotenv
touch .evn

In .env file, create these process.env variables with your credentials:

CLOUDANT_USERNAME = ‘Your Cloudant Username’
CLOUDANT_PASSWORD = ‘Your Cloudant Password’
CLOUDANT_URL = ‘Your Cloudant URL’

• Setup Cloudant in index.js

//import Cloudant and service credentials
const Cloudant = require('@cloudant/cloudant')
require('dotenv').config()
const cloudant = new Cloudant({
url: process.env.CLOUDANT_URL,
account: process.env.CLOUDANT_ACCOUNT,
password: process.env.CLOUDANT_PASSWORD
})

• Initialize new database (“test”) and populate dummy data

For the first time create database, you can use db.create(“test”) to create a database, and populate data in the same function, alternatively, you can create manually in IBM Cloudant browser

(Image8: create a database — test)

const dummyData = {
title: "Cloudant class",
dateAdded: new Date().toDateString(),
numberOfStudent: 10
}
//create function populateData
async function populateData() {
//await cloudant.db.create('test') -> create database "test"
const data = dummyData;
return cloudant.use('test').insert(data) //populate data
}
//call populateData funcion
populateData().then((data) => {
console.log(data); // { ok: true, id: 'dd3..', ...
}).catch((err) => {
console.log(err);
});

Open VS code terminal, run:

node index.js

(Image:9 results on Cloudant — test database and terminal)

STEP3: Establish a local database with PouchDB and sync it with a remote database from Cloudant

In index.js

//Load the PouchDB library
const PouchDB = require('pouchdb');
const remotedb = new PouchDB(`${process.env.CLOUDANT_URL}/test`)
console.log('Remote database created Successfully.');
const localDB = new PouchDB('myLocalDB', { skip_setup: true });
console.log('Local database created Successfully.');
//sync remotedb and localDB
localDB.sync(remotedb)

To compare data in the local database and remote database, you can use .info() to check the number of docs in each database

//log data in localBD to compare with remotedb
localDB.info().then(function (info) {
console.log(info);
})
remotedb.info().then(function (info) {
console.log(info);
})

(Image10: Terminal log)

Example for getting data from the local database

localDB.allDocs({
include_docs: true,
attachments: true
}).then(function (result) {
console.log("FIRST DOC IN LOCAL title: ", result.rows[0].doc.title)
}).catch(function (err) {
console.log(err);});

(Image11: Logging data in local database and compare with remote database)

At this point, you should know the basics of how Clodant and PouchDB work in sync together. Thank you for reading this article!Happy coding!

GitHub code: https://github.com/Vuthuylinh/Example_Cloudant_PouchDB