How to deploy a Node.js web app using Express in Cloud9

This post is about how simple it is to run a basic web app on Cloud9 if you can get past the jargon-heavy documentation on the Web. Read this “dejargonified” article, save time and hit the ground running right away.

Prerequisites

• You are familiar with basic Node (i.e. you know loops, if-thens etc.) and understand the basic callback pattern.

For example, you are good to go if you have done (or can do) the Node challenges in Quincy Larson’s Free Code Camp

• You are NOT an experienced programmer. You will be bored :-)

• You have an account on Cloud9 and you have created a workspace on Cloud9.

Terms

1. Web Server: The Web is vast and complex but its core functionality is strikingly simple. The Web is built around two classes of programs: servers and requesters. Servers run continuously (unless they are “down”) and listen for requests for web pages. When it receives a request it provides a copy of that page (if it has access to it) to the requester.

2. HTTP protocol: The communication convention these two classes of program use to talk to each other is the famous http protocol.

3. Requesters, browsers and a web page: The requesters are programs that can ask for a specific web page from a server. A requester that can display the web page received from a server is what we know now as browsers. All browsers are requesters but not all requesters are browsers. For example, when you write some code to access and process JSON data using web API, your code is a requester and not a browser.

4. Express: Express is a program that makes setting up your own web server very easy. It is a written in Node. Anything you can do in Express you can also do it in pure Node but it is a lot of work. Besides TJ Holowaychuk and Node.js Foundation contributors, have already solved the problem for us.

Setting up express, creating an app and running it in Cloud9

1. Install express in a directory of your choosing (see link for details)

$ npm install express --save

1. Create a new javascript file

1. Use the code below

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send("<h1>hello world</h1>");
});

app.listen(8080, function () {
  console.log('Example app listening on port 8080!');
  //call this app from https://<workspace name>-<user name>.c9users.io
});

1. One challenge I had was that I did not know where the app was running. The typical *http://localhost:<port number>/ *as referenced in various express resources is not going to work since the app is running on Cloud9 servers and the command above works only to test apps running locally.

On Cloud9 it will be http://<workspace name>-<user name>. If you’ve forgotten what these are, you can check in your browser window. For example in the picture here, the user name is tanyagupta (me) and the workspace name is test. Therefore in this case you would go to http://test-tanyagupta.c9users.io.

You can also use the preview button to do so.

NOTE: The app “runs” only while you are logged in.

If you wanted to get into the details of the code, here is the same code, heavily marked up with comments:

// Standard set up for the express code to work with your code
var express = require('express');
var app = express();

/*

Routes a get request, and in this simple case - to the server's root. It sends a 
call back to handle the request. Not much will happen here, the call back is hardcoded  
to send a hello world string. But in theory you can do something with the req variable 
in the "/" directory, create a dynamic html and send that back
*/

app.get('/', function (req, res) {
  res.send("<h1>hello world</h1>");
});

/*

Firing up your server. For most of us noobs - all that matters here is
a) remember the port number - 8080 (in this example). If you use some other port 
number make sure you mention it explicitly when you make a call to the server.
b) the console statement is just a note to tell you the server is running

 */
app.listen(8080, function () {
  console.log('Example app listening on port 8080!');
  //call this app from https://<workspace name>-<user name>.c9users.io
});