# Step 3 - Connecting to the Powergate & PouchDB Instance
The React app contains several pages which all interact with the Powergate instance. Before using the Powergate Pinning service, you need to connect to the running Powergate instance.
In this and later sections, you will walk through the various parts of the sample application to see how to connect and interact with the powergate instance using the React frontend. You will start by connecting your application to the powergate and PouchDB.
Use any text editor to open the powergate-pinning-client
project. Multiple pages in the React app interact with the powergate instance.
# Step 3a - Connecting to the Powergate Instance
To connect the React app to the Powergate instance:
- To connect the React app to the running powergate instance, install the following JavaScript module using the node package manager (opens new window):
npm i @textile/powergate-client
The module @textile/powergate-client
lets you connect to Powergate instance in javascript environments such as Node, React Native, and web browsers.
- In src/utils/powergate.js (opens new window), create a
getPowergateInstance()
function that returns the Powergate instance (using thecreatePow
method) which can be used anywhere in the app.
import { createPow, ffsOptions, ffsTypes } from '@textile/powergate-client'
var pow
const POW_HOST = 'http://localhost:6002' // or whatever powergate instance you want
export const getPowergateInstance = () => {
if (pow) {
// Return already existing powergate instance
return pow
} else {
// Create a new powergate instance
pow = createPow({ POW_HOST })
return pow
}
}
export const ffsOptions = ffsOptions
export const ffsTypes = ffsTypes
ffsOptions
and ffsTypes
are utility objects which are exported to be used in a function which we will explore in the next section of the tutorial.
TIP
Notice the POW_HOST is set to "http://0.0.0.0:6002" (exposed by Powergate instance). This value is correct if you're running the Docker compose setup, but change it as needed if you're running Powergate elsewhere.
The Powergate instance is connected and you can use it in the app.
# Step 3b - Connecting to the PouchDB Instance
- To connect the React app to the PouchDB instance, install the following JavaScript module using the node package manager (opens new window):
npm i pouchdb
The module pouchdb
lets you connect to PouchDB in javascript environments such as Node, React Native, and web browsers.
- In src/utils/powergate.js (opens new window), create a PouchDB object and initilize a database named
my_database
:
import PouchDB from 'pouchdb'
var db = new PouchDB('my_database')
- In src/utils/database.js (opens new window) create the following functions:
addUser
: Saves new user details.
export const addUser = user => {
return new Promise((resolve, reject) => {
db.put(user, function (err, response) {
if (err) {
console.log(err)
reject(err)
} else {
console.log('Document created Successfully')
console.log(response)
resolve(response)
}
})
})
}
getUser
: Fetches details of an existing user.
export const getUser = address => {
return new Promise((resolve, reject) => {
db.get(address, function (err, doc) {
if (err) {
console.log(err)
resolve(err)
} else {
console.log(doc)
resolve(doc)
}
})
})
}
updateUser
: Updates details of an existing user.
export const updateUser = (address, user) => {
return new Promise((resolve, reject) => {
db.get(address, function (err, doc) {
if (err) {
console.log(err)
reject(err)
} else {
db.put({ ...doc, user }, function (err, response) {
if (err) {
console.log(err)
reject(err)
} else {
console.log('Document updated Successfully')
console.log(response)
resolve(response)
}
})
}
})
})
}
TIP
For development purposes we save the users locally (browser memory). You can also use the browser's localStorage
or you can manage user data on an external database.
The PouchDB is connected and you can use it in the app.