You might be familiar with the MongoDB, Express.js, AngularJS, and Node.js (MEAN) stack, but I’m going to show you that this is just as possible with Couchbase and even easier to do.

We’re going to see how to install and configure all four of the CEAN stack services as well as make a very simple application out of them.

The whole setup process doesn’t take long so we’re going to run through it real quick.

Installing Couchbase Server

Let’s start with installing our database, Couchbase Server. Head over to the downloads section of the Couchbase website and get the latest installation for your computer, whether it be Mac, Windows, or Linux.

Install the file that you downloaded and launch Couchbase Server. Upon first launch it should take you through a configuration wizard. The wizard takes about two minutes to complete.

Creating A Bucket And Index

Couchbase stores all NoSQL documents in what’s called a bucket. We’ll need to create one called restful-sample in order to continue in the application. From the Data Buckets tab of your Couchbase administrative dashboard, choose to Create New Data Bucket and name it appropriately.

With the bucket created, we need to create a primary index on it. This will allow us to run N1QL queries against the data. You’ll see what they are and why they are beautiful deeper in this tutorial.

Run the Couchbase Query Client (CBQ) from the Terminal or Command Prompt. On a Mac, it is found at the following path:

Installing Node.js

Now we’re going to install Node.js. Although we won’t see it in this step, the Node Package Manager (NPM) included with Node.js will be used to download Express.js and its dependencies. Head on over to the Node.js website and download whatever version is appropriate for your operating system.

Install Node.js however you typically would based on your operating system.

Setup Your Node.js Project

Create a new directory, maybe on your desktop, called CEAN. Using the Terminal (Mac and Linux) or Command Prompt (Windows), run the following with CEAN as your current working directory:

npm init

Answer all the questions to the best of your ability, or just create a file called package.json with the following contents:

Since we have NPM working through the Node.js installation, we need to install Express.js and a few other dependencies locally to our project. From the Terminal or Command Prompt, run the following command:

npm install body-parser couchbase express uuid --save

Let’s break down what we just installed. The body-parser dependency will allow us to make POST requests to our backend API. The couchbase dependency will allow you to communicate from application server to Couchbase Server. The express dependency of course allows us to use the Express.js framework and the uuid dependency will allow us to generate unique ids later in our project.

Before we bring setup to a close, lets define our project structure. Go ahead and create the following files and directories:

We’ll be adding other libraries and style sheets, but above is everything we’ll be creating.

The Project Back-End

The back-end will be responsible for serving data to our front-end (AngularJS). It is endpoint based making separation between front-end and back-end easier.

Configuring The Server

All our server configuration will be in the app.js file found at the root of our project. However, to keep our project clean, we’re going to put all our constant variables in their own file. This file will be called config.json and it will contain the following:

Let’s break down what is happening here. First off we are requiring all the dependencies that we downloaded with NPM into our project. We are then telling the application server that we want to accept POST requests with JSON bodies as well as URL encoded data.

Here we connect to the Couchbase cluster and open a particular bucket, both defined in our config.json file. This opened bucket is assigned to a global variable through the module.exports command.

app.use(express.static(path.join(__dirname, "public")));

The above line will allow us to place HTML, JavaScript and other front-end files in our project. The front-end and back-end will still communicate over requests, but the front-end code is still going to be bundled with our project.

Finally we are including our routes/routes.js file which will contain paths to each of our endpoints and the server listener.

Designing Our Database Model And Functions

Before we set up our routes, let’s determine some functions for communicating with the database. All of these functions will go into the RecordModel class found in the models/recordmodel.js file. These functions will be responsible for inserting, updating, retrieving, and deleting data from Couchbase. Pretty much your CRUD basics.

Let’s start by laying the foundation to this models/recordmodel.js file. Open it and add the following:

What is going on here? Well we are accepting an object of data and a callback passed in from the soon to be created parent route. We are extracting only the data elements we need from the data variable and we are constructing a document key to be used. This save function will handle both updates and inserts (upsert) so keys are very important. Basically, if a document id was passed from the route, use it, otherwise create some unique value and use that. Upsert will decide whether or not we should insert or update.

Depending on the how the upsert function responds is how we make use of the parent callback function.

With save out of the way, lets take a look at the getByDocumentId function for fetching a specific document. In your models/recordmodel.js file, add the following:

This function again is accepting two parameters from the parent endpoint, a document id and a callback. However, this time we are using a very SQL-like statement referred to by Couchbase as N1QL. It is a parameterized query to prevent injection attacks, but it essentially just finds any NoSQL document where the document key matches the value passed in the function.

The next function, delete, is pretty simple. Inside the models/recordmodel.js file add the following:

When the user (or front-end) hits the /api/save endpoint with a POST request, the above will happen. We first make sure the POST body contains a firstname, lastname, and email, otherwise we return an error. If those conditions are met then we call the save function of our RecordModel class. The callback is passed and depending on what the child function returns, is what we return back to the user (or front-end).

With save out of the way, let’s look at the get endpoint for getting a particular document from the database:

When the front-end hits the /api/get endpoint with a GET request, the above will happen. We first make sure the GET query contains a document_id and if that condition is met then we can proceed to calling the getByDocumentId function of our RecordModel class.

I’m sure you can see a trend here in our endpoint design.

Moving on, we want to make an endpoint for deleting data. In the routes/routes.js file add the following function:

There are no requirements above. As long as a GET request is made to the /api/getAll endpoint, data will be returned.

Our back-end is done. We can celebrate now! Not exactly, we still need a front-end to communicate to it. Any front-end will work, but in this CEAN stack we’re going to be using AngularJS.

The Project Front-End

The front-end will be responsible for requesting data from our back-end (Node.js and Couchbase Server). It makes HTTP requests to the back-end allowing for better separation and flexibility between the front-end and back-end.

Including All Third-Party Libraries And Styles

After downloading everything, place the minified (.min.js) files in your project’s public/js directory. Place all CSS files in your project’s public/css directory, and place all fonts in your project’s public/fonts directory.

Now everything can be included in your projects public/index.html file. Open it and include the following:

You can see here that we’ve named our module recordsapp which relates to what we saw in the public/index.html file. We’ve also injected the ui.router and built functions for our .config and .controller.

Configuring The AngularJS UI-Router

If you’re unfamiliar with the AngularJS UI-Router, it is a wonderful library for adding multiple screens (views) to your front-end application. All configuration for these views will end up in our config function in the public/js/app.js file:

Essentially we’re creating two views. We are creating a list view and a view for adding or editing items of the list. Each of the routes points to a particular controller and template file. Both routes point to the MainController that we’ll see soon, but each point to either a public/templates/list.html file or public/templates/item.html file.

By default, the list view will show through the $urlRouterProvider.otherwise("list"); line.

Designing Our View Routes

We know which template files we need to work on now as explained by the AngularJS UI-Router configuration. Starting with the public/templates/list.html file, add the following code:

Essentially we have a table that loops through each object within a particular object to populate the table. Functions like fetchAll and delete are still unknown at this point, but they are coming. If you take a look at the ui-sref items in the code you’ll notice they are referring to particular UI-Router states. One of which passes in an optional parameter containing the document key. You’ll see how it’s used soon.

The second template we want to look at is the public/templates/item.html file:

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.