Couchbase Server Connection from React JS

[bellpumpkin]

package.json :

{
  "name": "couchbase_test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bindings": "^1.5.0",
    "couchbase": "^4.2.4",
    "path-browserify": "^1.0.1",
    "process": "^0.11.10",
    "querystring-es3": "^0.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-error-overlay": "6.0.9",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "browser": {
    "fs": false
  }
}

index.js :

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import couchbase from "./couchbase";

const root = createRoot(document.getElementById("root"));

console.log("test");
//console.log(couchbase);
setInterval(() => {
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}, 1000);

couchbase.js :

const couchbase = require("couchbase");

async function main() {
  // For a secure cluster connection, use `couchbases://<your-cluster-ip>` instead.
  const clusterConnStr = "couchbase://localhost:8091";
  const username = "Administrator";
  const password = "password";
  const bucketName = "test";

  const cluster = await couchbase.connect(clusterConnStr, {
    username: username,
    password: password,
  });

  const bucket = cluster.bucket(bucketName);

  // Get a reference to the default collection, required only for older Couchbase server versions
  //const defaultCollection = bucket.defaultCollection();

  const collection = bucket.scope("test").collection("user");

  const user = {
    type: "user",
    name: "Michael",
    email: "michael123@test.com",
    interests: ["Swimming", "Rowing"],
  };

  // Create and store a document
  await collection.upsert("michael123", user);

  // Load the Document and print it
  // Prints Content and Metadata of the stored Document
  let getResult = await collection.get("michael123");
  console.log("Get Result: ", getResult);

  // Perform a N1QL Query
  const queryResult = await bucket
    .scope("test")
    .query("SELECT name FROM `user` WHERE country=$1 LIMIT 10", {
      parameters: ["United States"],
    });
  console.log("Query Results:");
  queryResult.rows.forEach((row) => {
    console.log(row);
  });
}

// Run the main function
main()
  .catch((err) => {
    console.log("ERR:", err);
    process.exit(1);
  })
  .then(process.exit);

Error code :

Uncaught ReferenceError: process is not defined
    at ./node_modules/bindings/bindings.js (bundle.js:703:15)
    at options.factory (bundle.js:55480:31)
    at __webpack_require__ (bundle.js:54925:33)
    at fn (bundle.js:55137:21)
    at ./node_modules/couchbase/dist/binding.js (bundle.js:3377:36)
    at options.factory (bundle.js:55480:31)
    at __webpack_require__ (bundle.js:54925:33)
    at fn (bundle.js:55137:21)
    at ./node_modules/couchbase/dist/couchbase.js (bundle.js:7070:35)
    at options.factory (bundle.js:55480:31)

I want to know how to connect React JS to Couchbase Server

node --version
: v18.12.1
npm -version
: 8.19.2

[graham.pople]

Hi @bellpumpkin. Could you let me know how you’re running this - is it node index.js? AFAIK, process should just be available when you’re running with node, there shouldn’t be any need to import it.
Also feel free to join the Discord as it may be easier to discuss this in realtime.

[graham.pople]

Also, can you clarify if this is a frontend or backend app? Node & require makes me think backend, but the use of React and webpack suggest frontend. (I know you can use both from the backend, but this app doesn’t seem to be doing everything I’d expect there, like creating and serving an html file that you’ve injected the React-generated DOM into.)

The Couchbase Node SDK needs to be used from a backend Node application.