{"id":1149,"date":"2017-09-01T07:00:21","date_gmt":"2017-09-01T14:00:21","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/"},"modified":"2017-09-01T07:00:21","modified_gmt":"2017-09-01T14:00:21","slug":"midwest-js-project-source-full-stack-node-development-available","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/","title":{"rendered":"Midwest JS Project Source on Full Stack Node Development, Available"},"content":{"rendered":"\n

Back in August I had participated in Midwest JS<\/a> located in\u00a0Minneapolis,\u00a0Minnesota. As you may know, I’m a huge fan of developing full stack applications with the JavaScript stack. This is exactly what I had presented on at the conference.<\/p>\n\n\n\n

My session was well attended and many developers were taught how to use Node.js with Couchbase to develop a RESTful API, and Angular as the client facing layer.<\/p>\n\n\n\n

\"Couchbase<\/p>\n\n\n\n

As promised, I am going to revisit the material I went over during the presentation so the concepts and code can be reproduced and expanded upon.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Going forward, the assumption is that you’ve got Couchbase Server<\/a>, Node.js<\/a>, and the Ionic Framework<\/a> CLI installed and configured. Couchbase will be the NoSQL Database, Node.js will power our backend, and Ionic Framework will give us a web frontend powered by Angular.<\/p>\n\n\n\n

The project created at Midwest JS allowed you to store information about video game consoles and video games for various consoles. This demonstrated the use of CRUD as well as relationships between NoSQL documents and how Couchbase makes it easy.<\/p>\n\n\n\n

Creating the Node.js with Couchbase NoSQL Backend<\/h2>\n\n\n\n

Before we can begin development, we need to create a new Node.js project. From the command line, execute the following:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]npm init -y
\nnpm install couchbase express body-parser uuid cors –save[\/crayon]<\/p>\n\n\n\n

The above command will create a project\u00a0package.json<\/strong> file and install our project dependencies. The cors<\/code> package will allow us to use Node and Angular locally on two different ports without getting cross origin resource sharing errors. The uuid<\/code> package will allow us to generate unique strings for use as document keys. The body-parser<\/code> package will allow us to send JSON data in HTTP requests. We’ll be using Express and Couchbase which explains the other two packages.<\/p>\n\n\n\n

Create an\u00a0app.js<\/strong> file within your project. It will contain all the source code for our Node.js application. As boilerplate, it should look like the following:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]var Couchbase = require(“couchbase”);
\nvar Express = require(“express”);
\nvar BodyParser = require(“body-parser”);
\nvar UUID = require(“uuid”);
\nvar Cors = require(“cors”);<\/p>\n

var app = Express();
\nvar N1qlQuery = Couchbase.N1qlQuery;<\/p>\n

app.use(BodyParser.json());
\napp.use(BodyParser.urlencoded({ extended: true }));
\napp.use(Cors());<\/p>\n

var cluster = new Couchbase.Cluster(“couchbase:\/\/localhost”);
\nvar bucket = cluster.openBucket(“default”, “”);<\/p>\n

app.get(“\/consoles”, (request, response) => {});
\napp.post(“\/console”, (request, response) => {});
\napp.post(“\/game”, (request, response) => {});
\napp.get(“\/games”, (request, response) => {});
\napp.get(“\/game\/:id”, (request, response) => {});<\/p>\n

var server = app.listen(3000, () => {
\n console.log(“Listening on port ” + server.address().port + “…”);
\n});[\/crayon]<\/p>\n\n\n\n

Notice that we’ve imported each of the downloaded dependencies, initialized and configured Express, and connected to a Bucket in our Couchbase cluster.<\/p>\n\n\n\n

We will have five different RESTful API endpoints for this application.<\/p>\n\n\n\n

The first logical thing to do would be to create a video game console so we can add games to it. Take a look at the following endpoint code:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]app.post(“\/console”, (request, response) => {
\n if(!request.body.title) {
\n return response.status(401).send({ “message”: “A `title` is required.” });
\n }
\n var id = UUID.v4();
\n request.body.type = “console”;
\n bucket.insert(id, request.body, (error, result) => {
\n if(error) {
\n return response.status(500).send(error);
\n }
\n response.send(result);
\n });
\n});[\/crayon]<\/p>\n\n\n\n

In the above logic, we are validating that a title<\/code> exists in our request. If it does, we will generate a new id, assign a type<\/code> to the data in our request, and insert it into Couchbase. The success or failure response of the insert will be returned to the client, which will eventually be an Angular application.<\/p>\n\n\n\n

To query for video game consoles, we’ll need to query based on the type<\/code> property. For this reason, we’ll have to use a N1QL query rather than a lookup by id.<\/p>\n\n\n

[crayon lang=”default” decode=”true”]app.get(“\/consoles”, (request, response) => {
\n var statement = “SELECT `” + bucket._name + “`.*, META().id FROM `” + bucket._name + “` WHERE type = ‘console'”;
\n var query = N1qlQuery.fromString(statement);
\n query.consistency(N1qlQuery.Consistency.REQUEST_PLUS);
\n bucket.query(query, (error, result) => {
\n if(error) {
\n return response.status(500).send(error);
\n }
\n response.send(result);
\n });
\n});[\/crayon]<\/p>\n\n\n\n

The N1QL query is nothing more than a simple SELECT<\/code> statement that you’d find in SQL. After executing the query, we would return the response back to the client.<\/p>\n\n\n\n

This brings us to the actual video games. Things get a little more complex, but not more difficult.<\/p>\n\n\n

[crayon lang=”default” decode=”true”]app.post(“\/game”, (request, response) => {
\n if(!request.body.title) {
\n return response.status(401).send({ “message”: “A `title` is required.” });
\n } else if(!request.body.cid) {
\n return response.status(401).send({ “message”: “A `cid` is required.” });
\n }
\n var id = UUID.v4();
\n request.body.type = “game”;
\n bucket.insert(id, request.body, (error, result) => {
\n if(error) {
\n return response.status(500).send(error);
\n }
\n response.send(result);
\n });
\n});[\/crayon]<\/p>\n\n\n\n

In the above endpoint logic, we plan to insert a new video game into the database. This is no different than what we saw when inserting a new video game console into the database. We are defining a type<\/code> property, but we are also making sure a cid<\/code> exists. The cid<\/code> will be a console id which will allow us to establish a relationship with our data.<\/p>\n\n\n\n

When you have relationships, you have JOIN<\/code> operations.<\/p>\n\n\n

[crayon lang=”default” decode=”true”]app.get(“\/games”, (request, response) => {
\n var statement = “SELECT game.title AS game_title, console.title AS console_title FROM `” + bucket._name + “` AS game JOIN `” + bucket._name + “` AS console ON KEYS game.cid WHERE game.type = ‘game'”;
\n var query = N1qlQuery.fromString(statement);
\n query.consistency(N1qlQuery.Consistency.REQUEST_PLUS);
\n bucket.query(query, (error, result) => {
\n if(error) {
\n return response.status(500).send(error);
\n }
\n response.send(result);
\n });
\n});[\/crayon]<\/p>\n\n\n\n

In the above endpoint, we are doing another N1QL query, but this time we have a JOIN<\/code> operation. It isn’t useful to return a cid<\/code> when querying for video games, so we JOIN<\/code> and replace that information with the console title of the other document.<\/p>\n\n\n\n

Likewise we have a similar query when trying to find a specific video game:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]app.get(“\/game\/:id”, (request, response) => {
\n if(!request.params.id) {
\n return response.status(401).send({ “message”: “An `id` is required.” });
\n }
\n var statement = “SELECT game.title AS game_title, console.title AS console_title FROM `” + bucket._name + “` AS game JOIN `” + bucket._name + “` AS console ON KEYS game.cid WHERE game.type = ‘game’ AND META(game).id = $id”;
\n var query = N1qlQuery.fromString(statement);
\n bucket.query(query, { “id”: request.params.id }, (error, result) => {
\n if(error) {
\n return response.status(500).send(error);
\n }
\n response.send(result);
\n });
\n});[\/crayon]<\/p>\n\n\n\n

The alternative to using N1QL and JOIN<\/code> operations would be to do two lookups based on id. There is nothing wrong with this practice, but in my opinion it is easier to just let the database take care of a JOIN<\/code> rather than trying to JOIN<\/code> via the application layer.<\/p>\n\n\n\n

This brings us to the client frontend.<\/p>\n\n\n\n

Creating the Ionic Framework with Angular Frontend<\/h2>\n\n\n\n

As previously mentioned, this time around we are using Ionic Framework which uses a flavor of Angular. I chose this because I was feeling too lazy to create an attractive frontend with Bootstrap or Foundation.<\/p>\n\n\n\n

With the Ionic Framework CLI available, execute the following:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]ionic start pwa sidemenu[\/crayon]<\/p>\n\n\n\n

The above command will create a project called pwa<\/strong> using the Ionic Framework sidemenu<\/code> template.<\/p>\n\n\n\n

The base template is useful, but it doesn’t have everything we need. We need to add a few pages to the application.<\/p>\n\n\n\n

Using the Ionic Framework generators, or manually, create a consoles<\/strong>, games<\/strong>, and game<\/strong> page. Each of these pages should have an HTML, SCSS, and TypeScript file and each page directory should be in the pages<\/strong> directory.<\/p>\n\n\n\n

Open the project’s\u00a0app\/app.component.ts<\/strong> file and make it look like the following:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]import { Component, ViewChild } from ‘@angular\/core’;
\nimport { Nav, Platform } from ‘ionic-angular’;
\nimport { StatusBar } from ‘@ionic-native\/status-bar’;
\nimport { SplashScreen } from ‘@ionic-native\/splash-screen’;<\/p>\n

import { GamesPage } from ‘..\/pages\/games\/games’;
\nimport { ConsolesPage } from ‘..\/pages\/consoles\/consoles’;<\/p>\n

@Component({
\n templateUrl: ‘app.html’
\n})
\nexport class MyApp {
\n @ViewChild(Nav) nav: Nav;<\/p>\n

rootPage: any = GamesPage;<\/p>\n

pages: Array<{title: string, component: any}>;<\/p>\n

constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
\n this.initializeApp();<\/p>\n

\/\/ used for an example of ngFor and navigation
\n this.pages = [
\n { title: ‘Games’, component: GamesPage },
\n { title: ‘Consoles’, component: ConsolesPage }
\n ];<\/p>\n

}<\/p>\n

initializeApp() {
\n this.platform.ready().then(() => {
\n \/\/ Okay, so the platform is ready and our plugins are available.
\n \/\/ Here you can do any higher level native things you might need.
\n this.statusBar.styleDefault();
\n this.splashScreen.hide();
\n });
\n }<\/p>\n

openPage(page) {
\n \/\/ Reset the content nav to have just this page
\n \/\/ we wouldn’t want the back button to show in this scenario
\n this.nav.setRoot(page.component);
\n }
\n}[\/crayon]<\/p>\n\n\n\n

Notice that we’ve imported\u00a0GamesPage<\/code> and ConsolesPage<\/code>, updated the pages<\/code> array, and set the default root page as GamesPage<\/code>. By doing this we’ve set up navigation and the default page when the application launches.<\/p>\n\n\n\n

To complete the setup, we also need to alter the project’s\u00a0app\/app.module.ts<\/strong> file. Make it look like the following:<\/p>\n\n\n

[crayon lang=”default” decode=”true”]import { BrowserModule } from ‘@angular\/platform-browser’;
\nimport { ErrorHandler, NgModule } from ‘@angular\/core’;
\nimport { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
\nimport { HttpModule } from “@angular\/http”;<\/p>\n

import { MyApp } from ‘.\/app.component’;
\nimport { GamesPage } from ‘..\/pages\/games\/games’;
\nimport { GamePage } from ‘..\/pages\/game\/game’;
\nimport { ConsolesPage } from ‘..\/pages\/consoles\/consoles’;<\/p>\n

import { StatusBar } from ‘@ionic-native\/status-bar’;
\nimport { SplashScreen } from ‘@ionic-native\/splash-screen’;<\/p>\n

@NgModule({
\n declarations: [
\n MyApp,
\n GamesPage,
\n GamePage,
\n ConsolesPage
\n ],
\n imports: [
\n BrowserModule,
\n HttpModule,
\n IonicModule.forRoot(MyApp),
\n ],
\n bootstrap: [IonicApp],
\n entryComponents: [
\n MyApp,
\n GamesPage,
\n GamePage,
\n ConsolesPage
\n ],
\n providers: [
\n StatusBar,
\n SplashScreen,
\n {provide: ErrorHandler, useClass: IonicErrorHandler}
\n ]
\n})
\nexport class AppModule {}[\/crayon]<\/p>\n\n\n\n

Notice that we’ve imported each of our new pages and added them to the declarations<\/code> and entryComponents<\/code> arrays of the @NgModule<\/code> block.<\/p>\n\n\n\n

Now we can focus on the development of the application and connecting it to our API.<\/p>\n\n\n\n

Open the project’s\u00a0src\/pages\/games\/games.ts<\/strong> file and make it look like the following. We’re going to break down what is happening next.<\/p>\n\n\n\n

[crayon lang=”default” decode=”true”]var Couchbase = require(“couchbase”);
\nvar Express = require(“express”);
\nvar BodyParser = require(“body-parser”);
\nvar UUID = require(“uuid”);
\nvar Cors = require(“cors”);<\/p>\n

var app = Express();
\nvar N1qlQuery = Couchbase.N1qlQuery;<\/p>\n

app.use(BodyParser.json());
\napp.use(BodyParser.urlencoded({ extended: true }));
\napp.use(Cors());<\/p>\n

var cluster = new Couchbase.Cluster(“couchbase:\/\/localhost”);
\nvar bucket = cluster.openBucket(“default”, “”);<\/p>\n

app.get(“\/consoles”, (request, response) => {});
\napp.post(“\/console”, (request, response) => {});
\napp.post(“\/game”, (request, response) => {});
\napp.get(“\/games”, (request, response) => {});
\napp.get(“\/game\/:id”, (request, response) => {});<\/p>\n

var server = app.listen(3000, () => {
\n console.log(“Listening on port ” + server.address().port + “…”);
\n});[\/crayon]<\/p>\n0<\/p>\n\n\n\n

Within the GamesPage<\/code> class, we have a public variable called games<\/code>. Because it is public, it will be accessible via the HTML. It will contain all the games returned from the Node.js application.<\/p>\n\n\n\n

When the page loads, we want to query our endpoint. It is never a good idea to do this in the constructor<\/code> method, so instead we use the ionViewDidEnter<\/code> method. After issuing the request, the result is transformed into JSON and then loaded into our public variable.<\/p>\n\n\n\n

If we want to create a new game in our database, things are a little different. We are going to display a modal dialog and collect input.<\/p>\n\n\n\n

[crayon lang=”default” decode=”true”]var Couchbase = require(“couchbase”);
\nvar Express = require(“express”);
\nvar BodyParser = require(“body-parser”);
\nvar UUID = require(“uuid”);
\nvar Cors = require(“cors”);<\/p>\n

var app = Express();
\nvar N1qlQuery = Couchbase.N1qlQuery;<\/p>\n

app.use(BodyParser.json());
\napp.use(BodyParser.urlencoded({ extended: true }));
\napp.use(Cors());<\/p>\n

var cluster = new Couchbase.Cluster(“couchbase:\/\/localhost”);
\nvar bucket = cluster.openBucket(“default”, “”);<\/p>\n

app.get(“\/consoles”, (request, response) => {});
\napp.post(“\/console”, (request, response) => {});
\napp.post(“\/game”, (request, response) => {});
\napp.get(“\/games”, (request, response) => {});
\napp.get(“\/game\/:id”, (request, response) => {});<\/p>\n

var server = app.listen(3000, () => {
\n console.log(“Listening on port ” + server.address().port + “…”);
\n});[\/crayon]<\/p>\n1<\/p>\n\n\n\n

The create<\/code> method will display our GamePage<\/code> which will be in modal format. Any data entered in the form on the modal will be returned back to the GamesPage<\/code> and sent via an HTTP request to the API.<\/p>\n\n\n\n

Before we take a look at\u00a0GamePage<\/code>, let’s look at the HTML that powers GamesPage<\/code>.<\/p>\n\n\n\n

[crayon lang=”default” decode=”true”]var Couchbase = require(“couchbase”);
\nvar Express = require(“express”);
\nvar BodyParser = require(“body-parser”);
\nvar UUID = require(“uuid”);
\nvar Cors = require(“cors”);<\/p>\n

var app = Express();
\nvar N1qlQuery = Couchbase.N1qlQuery;<\/p>\n

app.use(BodyParser.json());
\napp.use(BodyParser.urlencoded({ extended: true }));
\napp.use(Cors());<\/p>\n

var cluster = new Couchbase.Cluster(“couchbase:\/\/localhost”);
\nvar bucket = cluster.openBucket(“default”, “”);<\/p>\n

app.get(“\/consoles”, (request, response) => {});
\napp.post(“\/console”, (request, response) => {});
\napp.post(“\/game”, (request, response) => {});
\napp.get(“\/games”, (request, response) => {});
\napp.get(“\/game\/:id”, (request, response) => {});<\/p>\n

var server = app.listen(3000, () => {
\n console.log(“Listening on port ” + server.address().port + “…”);
\n});[\/crayon]<\/p>\n2<\/p>\n\n\n\n

In the above HTML, we are looping through our public games<\/code> array. Each object in the array is rendered to the screen within a list. Angular does all the heavy lifting for us.<\/p>\n\n\n\n

Open the project’s\u00a0src\/pages\/game\/game.ts<\/strong> file and include the following:<\/p>\n\n\n\n

[crayon lang=”default” decode=”true”]var Couchbase = require(“couchbase”);
\nvar Express = require(“express”);
\nvar BodyParser = require(“body-parser”);
\nvar UUID = require(“uuid”);
\nvar Cors = require(“cors”);<\/p>\n

var app = Express();
\nvar N1qlQuery = Couchbase.N1qlQuery;<\/p>\n

app.use(BodyParser.json());
\napp.use(BodyParser.urlencoded({ extended: true }));
\napp.use(Cors());<\/p>\n

var cluster = new Couchbase.Cluster(“couchbase:\/\/localhost”);
\nvar bucket = cluster.openBucket(“default”, “”);<\/p>\n

app.get(“\/consoles”, (request, response) => {});
\napp.post(“\/console”, (request, response) => {});
\napp.post(“\/game”, (request, response) => {});
\napp.get(“\/games”, (request, response) => {});
\napp.get(“\/game\/:id”, (request, response) => {});<\/p>\n

var server = app.listen(3000, () => {
\n console.log(“Listening on port ” + server.address().port + “…”);
\n});[\/crayon]<\/p>\n3<\/p>\n\n\n\n

This modal logic is similar to what we’ve already seen. There will be a form that is bound to HTML and TypeScript. When the ionViewDidEnter<\/code> triggers, we query for console information. This console information will eventually be used for a radio list that the user can select from.<\/p>\n\n\n\n

When the user selects the save<\/code> method, the data bound in the public form is passed to the previous GamesPage<\/code> page.<\/p>\n\n\n\n

The HTML that powers this modal, found in\u00a0src\/pages\/game\/game.html<\/strong> looks like this:<\/p>\n\n\n\n

[crayon lang=”default” decode=”true”]var Couchbase = require(“couchbase”);
\nvar Express = require(“express”);
\nvar BodyParser = require(“body-parser”);
\nvar UUID = require(“uuid”);
\nvar Cors = require(“cors”);<\/p>\n

var app = Express();
\nvar N1qlQuery = Couchbase.N1qlQuery;<\/p>\n

app.use(BodyParser.json());
\napp.use(BodyParser.urlencoded({ extended: true }));
\napp.use(Cors());<\/p>\n

var cluster = new Couchbase.Cluster(“couchbase:\/\/localhost”);
\nvar bucket = cluster.openBucket(“default”, “”);<\/p>\n

app.get(“\/consoles”, (request, response) => {});
\napp.post(“\/console”, (request, response) => {});
\napp.post(“\/game”, (request, response) => {});
\napp.get(“\/games”, (request, response) => {});
\napp.get(“\/game\/:id”, (request, response) => {});<\/p>\n

var server = app.listen(3000, () => {
\n console.log(“Listening on port ” + server.address().port + “…”);
\n});[\/crayon]<\/p>\n4<\/p>\n\n\n\n

We have a simple list that makes up our form. The form elements are bound to our TypeScript variable and the console information is looped through to populate an HTML select<\/code> element.<\/p>\n\n\n\n

This brings us to the final page of the Angular frontend.<\/p>\n\n\n\n

Open the project’s\u00a0src\/pages\/consoles\/consoles.ts<\/strong> file and include the following:<\/p>\n\n\n\n

[crayon lang=”default” decode=”true”]var Couchbase = require(“couchbase”);
\nvar Express = require(“express”);
\nvar BodyParser = require(“body-parser”);
\nvar UUID = require(“uuid”);
\nvar Cors = require(“cors”);<\/p>\n

var app = Express();
\nvar N1qlQuery = Couchbase.N1qlQuery;<\/p>\n

app.use(BodyParser.json());
\napp.use(BodyParser.urlencoded({ extended: true }));
\napp.use(Cors());<\/p>\n

var cluster = new Couchbase.Cluster(“couchbase:\/\/localhost”);
\nvar bucket = cluster.openBucket(“default”, “”);<\/p>\n

app.get(“\/consoles”, (request, response) => {});
\napp.post(“\/console”, (request, response) => {});
\napp.post(“\/game”, (request, response) => {});
\napp.get(“\/games”, (request, response) => {});
\napp.get(“\/game\/:id”, (request, response) => {});<\/p>\n

var server = app.listen(3000, () => {
\n console.log(“Listening on port ” + server.address().port + “…”);
\n});[\/crayon]<\/p>\n5<\/p>\n\n\n\n

While not too different than what we’ve already seen, we have a new feature. We are using a popup dialog to collect input for new video game console information.<\/p>\n\n\n\n

When the popup is dismissed, the following is executed:<\/p>\n\n\n\n

[crayon lang=”default” decode=”true”]var Couchbase = require(“couchbase”);
\nvar Express = require(“express”);
\nvar BodyParser = require(“body-parser”);
\nvar UUID = require(“uuid”);
\nvar Cors = require(“cors”);<\/p>\n

var app = Express();
\nvar N1qlQuery = Couchbase.N1qlQuery;<\/p>\n

app.use(BodyParser.json());
\napp.use(BodyParser.urlencoded({ extended: true }));
\napp.use(Cors());<\/p>\n

var cluster = new Couchbase.Cluster(“couchbase:\/\/localhost”);
\nvar bucket = cluster.openBucket(“default”, “”);<\/p>\n

app.get(“\/consoles”, (request, response) => {});
\napp.post(“\/console”, (request, response) => {});
\napp.post(“\/game”, (request, response) => {});
\napp.get(“\/games”, (request, response) => {});
\napp.get(“\/game\/:id”, (request, response) => {});<\/p>\n

var server = app.listen(3000, () => {
\n console.log(“Listening on port ” + server.address().port + “…”);
\n});[\/crayon]<\/p>\n6<\/p>\n\n\n\n

This will take the information found in the form and send it via HTTP to our API which will in turn save the console information to the database.<\/p>\n\n\n\n

Awesome right?<\/p>\n\n\n\n

The HTML found in the project’s\u00a0src\/pages\/consoles\/consoles.html<\/strong> file looks like the following:<\/p>\n\n\n\n

[crayon lang=”default” decode=”true”]var Couchbase = require(“couchbase”);
\nvar Express = require(“express”);
\nvar BodyParser = require(“body-parser”);
\nvar UUID = require(“uuid”);
\nvar Cors = require(“cors”);<\/p>\n

var app = Express();
\nvar N1qlQuery = Couchbase.N1qlQuery;<\/p>\n

app.use(BodyParser.json());
\napp.use(BodyParser.urlencoded({ extended: true }));
\napp.use(Cors());<\/p>\n

var cluster = new Couchbase.Cluster(“couchbase:\/\/localhost”);
\nvar bucket = cluster.openBucket(“default”, “”);<\/p>\n

app.get(“\/consoles”, (request, response) => {});
\napp.post(“\/console”, (request, response) => {});
\napp.post(“\/game”, (request, response) => {});
\napp.get(“\/games”, (request, response) => {});
\napp.get(“\/game\/:id”, (request, response) => {});<\/p>\n

var server = app.listen(3000, () => {
\n console.log(“Listening on port ” + server.address().port + “…”);
\n});[\/crayon]<\/p>\n7<\/p>\n\n\n\n

Again, it is near identical to the other HTML files that we’ve seen.<\/p>\n\n\n\n

Conclusion<\/h2>\n\n\n\n

You just got a recap of everything I went over at Midwest JS 2017. We saw how to create a Node.js API that communicates with Couchbase, our NoSQL database, as well as creating a frontend using Angular and Ionic Framework. These are just a few components of a full stack application.<\/p>\n\n\n\n

For more information on using Node.js<\/a> with Couchbase, check out the Couchbase Developer Portal<\/a>. If you’d like me to come back to Midwest JS, let me know in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"

Back in August I had participated in Midwest JS located in\u00a0Minneapolis,\u00a0Minnesota. As you may know, I’m a huge fan of developing full stack applications with the JavaScript stack. This is exactly what I had presented on at the conference. My session was well attended and many developers were taught how to use Node.js with Couchbase […]<\/p>\n","protected":false},"author":63,"featured_media":18,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[127,136,54,163,49,18],"tags":[213,281,161,165],"ppma_author":[148],"class_list":["post-1149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-application-design","category-best-practices-and-tutorials","category-couchbase-server","category-javascript","category-node-js","category-n1ql-query","tag-angular","tag-full-stack","tag-ionic-framework","tag-javascript"],"yoast_head":"\nMidwest JS Project Source on Full Stack Node Development, Available<\/title>\n<meta name=\"description\" content=\"The full stack Node.js, Angular, and Couchbase NoSQL project source from Midwest JS is now available, with full write-up guide to success.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Midwest JS Project Source on Full Stack Node Development, Available\" \/>\n<meta property=\"og:description\" content=\"The full stack Node.js, Angular, and Couchbase NoSQL project source from Midwest JS is now available, with full write-up guide to success.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/thepolyglotdeveloper\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-01T14:00:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/couchbase-nosql-dbaas.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1800\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nraboy\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/\"},\"author\":{\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/bb545ebe83bb2d12f91095811d0a72e1\"},\"headline\":\"Midwest JS Project Source on Full Stack Node Development, Available\",\"datePublished\":\"2017-09-01T14:00:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/\"},\"wordCount\":3026,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/couchbase-nosql-dbaas.png\",\"keywords\":[\"Angular\",\"full stack\",\"ionic framework\",\"javascript\"],\"articleSection\":[\"Application Design\",\"Best Practices and Tutorials\",\"Couchbase Server\",\"JavaScript\",\"Node.js\",\"SQL++ \\\/ N1QL Query\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/\",\"name\":\"Midwest JS Project Source on Full Stack Node Development, Available\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/couchbase-nosql-dbaas.png\",\"datePublished\":\"2017-09-01T14:00:21+00:00\",\"description\":\"The full stack Node.js, Angular, and Couchbase NoSQL project source from Midwest JS is now available, with full write-up guide to success.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/couchbase-nosql-dbaas.png\",\"contentUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/05\\\/couchbase-nosql-dbaas.png\",\"width\":1800,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/midwest-js-project-source-full-stack-node-development-available\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Midwest JS Project Source on Full Stack Node Development, Available\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2026\\\/06\\\/logo.svg\",\"width\":\"1024\",\"height\":\"1024\",\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/bb545ebe83bb2d12f91095811d0a72e1\",\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g8863514d8bed0cf6080f23db40e00354\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"caption\":\"Nic Raboy, Developer Advocate, Couchbase\"},\"description\":\"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.\",\"sameAs\":[\"https:\\\/\\\/www.thepolyglotdeveloper.com\",\"https:\\\/\\\/www.facebook.com\\\/thepolyglotdeveloper\",\"https:\\\/\\\/x.com\\\/nraboy\"],\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/author\\\/nic-raboy-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Midwest JS Project Source on Full Stack Node Development, Available","description":"The full stack Node.js, Angular, and Couchbase NoSQL project source from Midwest JS is now available, with full write-up guide to success.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/","og_locale":"en_US","og_type":"article","og_title":"Midwest JS Project Source on Full Stack Node Development, Available","og_description":"The full stack Node.js, Angular, and Couchbase NoSQL project source from Midwest JS is now available, with full write-up guide to success.","og_url":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/","og_site_name":"The Couchbase Blog","article_author":"https:\/\/www.facebook.com\/thepolyglotdeveloper","article_published_time":"2017-09-01T14:00:21+00:00","og_image":[{"width":1800,"height":630,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/couchbase-nosql-dbaas.png","type":"image\/png"}],"author":"Nic Raboy, Developer Advocate, Couchbase","twitter_card":"summary_large_image","twitter_creator":"@nraboy","twitter_misc":{"Written by":"Nic Raboy, Developer Advocate, Couchbase","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/"},"author":{"name":"Nic Raboy, Developer Advocate, Couchbase","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1"},"headline":"Midwest JS Project Source on Full Stack Node Development, Available","datePublished":"2017-09-01T14:00:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/"},"wordCount":3026,"commentCount":0,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/couchbase-nosql-dbaas.png","keywords":["Angular","full stack","ionic framework","javascript"],"articleSection":["Application Design","Best Practices and Tutorials","Couchbase Server","JavaScript","Node.js","SQL++ \/ N1QL Query"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/","url":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/","name":"Midwest JS Project Source on Full Stack Node Development, Available","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/couchbase-nosql-dbaas.png","datePublished":"2017-09-01T14:00:21+00:00","description":"The full stack Node.js, Angular, and Couchbase NoSQL project source from Midwest JS is now available, with full write-up guide to success.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/couchbase-nosql-dbaas.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/05\/couchbase-nosql-dbaas.png","width":1800,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/midwest-js-project-source-full-stack-node-development-available\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Midwest JS Project Source on Full Stack Node Development, Available"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"The Couchbase Blog","description":"Couchbase, the NoSQL Database","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"The Couchbase Blog","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/06\/logo.svg","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/5\/2026\/06\/logo.svg","width":"1024","height":"1024","caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1","name":"Nic Raboy, Developer Advocate, Couchbase","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g8863514d8bed0cf6080f23db40e00354","url":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","caption":"Nic Raboy, Developer Advocate, Couchbase"},"description":"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.","sameAs":["https:\/\/www.thepolyglotdeveloper.com","https:\/\/www.facebook.com\/thepolyglotdeveloper","https:\/\/x.com\/nraboy"],"url":"https:\/\/www.couchbase.com\/blog\/author\/nic-raboy-2\/"}]}},"acf":[],"authors":[{"term_id":148,"user_id":63,"is_guest":0,"slug":"nic-raboy-2","display_name":"Nic Raboy, Developer Advocate, Couchbase","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts\/1149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/comments?post=1149"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts\/1149\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/media\/18"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/media?parent=1149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/categories?post=1149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/tags?post=1149"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=1149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}