Build your first Node.js website, Part 1

29 July 2014
PDF (269 KB)
Share:

When my 9-year-old son wanted help writing his first app, I figured we would build a few web pages displaying some information that we'd store in a database. I hadn't written code in many years, but how hard could it be to create this simple website?

Well, after we consulted various instructional websites and books — and I installed a lot of stuff that I really didn't want cluttering up my computer — I couldn't believe how hard it was.

So I decided to give IBM® Bluemix™ a try. It was easy to get a sample application running, but then I found myself wading through a bunch of code that I didn't understand and installing yet more stuff for developing applications — nothing I was ready to subject a 9-year-old to.

My love for Bluemix grew the day I discovered the web IDE on IBM DevOps Services. You can edit an application in the IDE, push it to Bluemix, and run the app — all with no additional software to install. Of course, you can use Bluemix with local development environments such as Eclipse, and with the Bluemix command line. But for getting started and quickly trying out new things, the web IDE is a perfect fit.

Still, all I wanted to do to start was put up an HTML page, yet the Bluemix Node.js web starter includes nothing that looks like good old-fashioned HTML. As for working with a database, the Bluemix sample ToDo application was more than I needed.

This article's examples are easy enough for even primary-school students to follow — not young first-timers (who'll do better with no-typing languages such as Scratch), but kids who are ready for their next step into programming. For each major concept in this article, the worksheets folder in the DevOps Services project contains corresponding printable cards that follow CoderDojo Sushi Card guidelines.

That's what inspired this three-part article, which starts from the bare minimum and takes you step-by-step through building up a dynamic website with Node.js— all with no installation required. This first part covers bringing up a Node.js server for simple request handling. I started with a classic Hello World sample and added a server-side counter. You'll create a copy of the application for your own use, deploy the app on Bluemix, and then make some code changes and see their effect.

The Node.js application serves requests from multiple browsers and keeps a count of each request.

The Node.js application serves requests from multiple browsers and keeps a count of each request:

Diagram of the application flow

Click to see larger image

Part 2 adds the Express framework, formatting of HTML pages, and passing data from the Node.js server for display in an HTML page. Part 3 shows how to use a Redis database to persist the data that the website displays.

READ:Getting Started with IBM Bluemix and IBM DevOps Services using Node.js

READ:Getting started with Node.js Applications

READ:Bluemix Sample: ToDo Apps Built Using Your Favorite Language

What you'll need

 

As promised, you don't need to install anything. You do need:

Step 1: Copy the Node.js application

 
  1. Log in to Bluemix from your web browser.
  2. In a separate browser tab, log in to DevOps Services.
  3. Click this article's Get the code button above.
  4. In DevOps Services, click the EDIT CODE button and then click the FORK button on the menu to create your own copy of the code to work with, saving it with whatever project name you choose.

Step 2: Deploy the application manually

 

During the deployment process, DevOps Services automatically looks for the manifest.yml file. If you browse away from the top project folder containing manifest.yml and then click DEPLOY, you'll get an error that manifest.yml is not found. So a good practice is to select manifest.yml before requesting deployment.

You must be logged in to Bluemix for this step to work.

DevOps Services deployment to Bluemix uses the manifest.yml file, which is all set up in your project and requires no changes. In manifest.yml, the runtime: node08 line tells the deployment process to use the Bluemix Node.js runtime. The host: value, ${random-word}, generates a unique URL for your application to ensure that your deployment doesn't conflict with others.

DevOps Services provides both manual and automatic ways to deploy an application to Bluemix. You'll use the manual deploy:

  1. In the DevOps Services IDE, select the manifest.yml file and click the DEPLOY button: Screen shot of the DEPLOY button in the IDE menu

    Click to see larger image

  2. Wait for the deployment to finish. When it's complete, you'll see a message at the top of the page, directing you to the manual deployment information in the root folder page: Screenshot of the successful deployment message with root folder page link

    Click to see larger image

  3. Click the root folder page link in the message and scroll down to the Manual Deployment Information section.
  4. Wait for the manual deployment information to refresh. A solid green dot indicates that deployment succeeded: Screenshot of manual deployment information with green dot

    Click to see larger image


    If deployment problems occur, you can view the logs to troubleshoot.
  5. Click the NodeJS_Simple_1 link to view your running application in a separate browser tab. Refresh the page and watch the counter increment with each refresh.

Step 3: Manage your application

 

You can manage your Bluemix deployments, including starting and stopping them, from DevOps Services:

  1. Return to the root folder page's manual deployment information in DevOps Services. Click your deployment to highlight it and stop your application by clicking the solid black square: Screenshot of manual deployment info with stop button

    Click to see larger image

  2. Highlight your deployment again and start your application on Bluemix by clicking the right-pointing triangle: Screenshot of start button
  3. Click the NodeJS_Simple_1 link to open the running application in a separate tab. Notice that the counter is reset. It resets because the application is stateless and doesn't persist any data when it restarts. (Part 3 addresses persistence.)

Additional management capabilities are available directly from the Bluemix dashboard interface.

Step 4: Modify the application

 
  1. Back in the DevOps Services IDE, click app.js to open the Node.js code for the application.
  2. In the line that says res.write('Hello from Ruth\n');, change Ruth to your name.
  3. Deploy the app as you did in Step 2 and open the application in your browser. Observe that the page now reflects the changed text.
  4. Return to app.js in DevOps Services. Under var userCount = 0, add a new userbytwo variable and initialize it to 0.
  5. Under the line that increments userCount, add a line to increment userbytwo by 2:
    userbytwo = userbytwo + 2;
  6. Copy and paste the write statement for userCount and modify it to print out userbytwo:
    res.write('We can also count by two. We have had '+userbytwo+ visits!\n');

    Your app.js code subsection should now look like this:
    var userCount = 0;
    var userbytwo = 0; /* added the var definition for new variable, userbytwo here */
    
    /**
     * This is the function that handles incoming requests
    **/
    var serverHandler = function(req,res) {
         userCount++;
         userbytwo = userbytwo + 2;  
         /* added the incrementing by two for your new variable, userbytwo here */    
         res.write('Hello from yourname\n');     /* edit this line to say your name */
         res.write('We have had '+userCount+' visits!\n');
         res.write('We can also count by two. We have had '+userbytwo+' visits!\n');
         res.end('Good Bye');
    };
  7. Manually deploy the application and use the link in the manual deployment information to open it.
  8. Confirm that the counter increments by 2.

Conclusion to Part 1

 

In this first part, you worked step by step through bringing up a Node.js server. You are now ready to move to Part 2, where you'll add a web front end with both static pages and dynamic content from the server. Part 3 covers storing the site's data in a database.


BLUEMIX SERVICE USED IN THIS TUTORIAL:SDK for Node.js helps you develop, deploy, and scale server-side JavaScript apps with ease. The IBM SDK for Node.js provides enhanced performance, security, and serviceability.

RELATED TOPICS:Node.jsJavaScript

Add a comment

Note: HTML elements are not supported within comments.


1000 characters left

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development, Cloud computing
ArticleID=978422
ArticleTitle=Build your first Node.js website, Part 1
publish-date=07292014