Skip to content

Instantly share code, notes, and snippets.

@jchris
Last active May 4, 2018 04:29
Show Gist options
  • Save jchris/3c32524577deff3d69aa to your computer and use it in GitHub Desktop.
Save jchris/3c32524577deff3d69aa to your computer and use it in GitHub Desktop.
Couchbase Lite with React Native

Couchbase Lite with React Native

I went into this expecting a challenge but it was easy. Basically, Couchbase Lite has always had an optional HTTP listener that you can connect to from inside your app at http://lite.couchbase./mydatabase/. React Native has a fine XHR module and encourages using fetch so getting your app to sync can be as easy as adding some API calls to keep JSON in the database.

We haven't done a full example yet, but in the spirit of possiblity, here are quick instructions to connect Couchbase Lite iOS with a React Native app (generated from their cli).

#import "CouchbaseLite/CouchbaseLite.h"
#import "CouchbaseLiteListener/CBLListener.h"
#import "CBLRegisterJSViewCompiler.h"
  • Add a function to AppDelegate.m to launch Couchbase Lite
- (void)launchCouchbaseLite
{
  NSLog(@"Launching Couchbase Lite...");
  CBLManager* dbmgr = [CBLManager sharedInstance];
  CBLRegisterJSViewCompiler();
  NSLog(@"Couchbase Lite url = %@", dbmgr.internalURL);
}
  • Call this function from application didFinishLaunchingWithOptions:
[self launchCouchbaseLite];
  • Now in your JavaScript code you can create a new database with a PUT (here's a fancy version that does a GET first to check if the PUT is necessary):
var dbURL = "http://lite.couchbase./mydb/"
fetch(dbURL).then((response) => {
  if (response.status !== 200) {
    return fetch(dbURL, {method:"PUT"})
    .then((response) => response.json()).then((data) => {
      console.log("create db", data)
      return data;
    }).catch()
  }
})
  • You can create documents by POSTing to the database:
fetch(dbURL, {method:"POST", body : JSON.stringify({hello:"world"})})
.then((response) => response.json()).then((data) => {
  console.log("create document", data)
  return data;
}).catch()
  • And get all documents with a GET query:
fetch(dbURL + "_all_docs?include_docs=true")
.then((response) => response.json()).then((data) => {
  var docs = data.rows.map((row) => (row.doc));
  console.log("all documents", docs);
  return docs;
}).catch()

To see something like this in context, you could try my branch of marucc's demo app here.

@abuisman
Copy link

Thanks for the write-up and thanks @pennsong for the updated code it works just fine.

I had trouble creating a document with the following code (from above):

fetch(dbURL, {method:"POST", body : JSON.stringify({hello:"world"})})
      .then((response) => response.json()).then((data) => {
        console.log("create document", data)
        return data;
      }).catch()

I then had a look at the example app @jchris links to and I adjusted the code from this gist like so to get it working:

var id = 'some_cool_id';

fetch(dbURL  + id, {method:"PUT", body : JSON.stringify({hello:"world"})})
      .then((response) => response.json()).then((data) => {
        console.log("create document", data)
        return data;
      }).catch()

Note the method: 'PUT' instead of POST and the addition of an id in the url. It could be that I am missing something else that would have allowed me to POST without an id, but there you have it ;).

@atom992
Copy link

atom992 commented Oct 26, 2015

Is there a quick instructions to connect Couchbase Lite android with a React Native app?

@seigel
Copy link

seigel commented Dec 23, 2015

Any thoughts on replication?

@adamski
Copy link

adamski commented Jan 8, 2016

@atom992 it should be the same principle - employ the HTTP REST API interface of CouchbaseLite which is compatible with CouchDB, so (in theory) any request you can make to CouchDB you can make to Couchbase Lite by using the CouchbaseLiteListener class.
@seigel this also means you can trigger or set up any kind of replication, see http://developer.couchbase.com/documentation/mobile/1.1.0/develop/references/couchbase-lite/rest-api/server/post-replicate/index.html

@atvenu
Copy link

atvenu commented Mar 30, 2016

Thanks @adamski

@npomfret
Copy link

Did anyone solve the problem of not being able to access http://lite.couchbase./? I just get a network error. I've looked at some other examples out there like the cordova plugin, but can't see what they've done differently.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment