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

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

(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')
  • 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
}

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');

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
(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

Software developer