IBM BluemixDevelop in the cloud at the click of a button!

Build your first Node.js website, Part 1

25 February 2015
PDF (300 KB)
Share:

Build your first Node.js website, Part 1

04:11  |  Transcript

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

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.

WATCH:See IBM Bluemix in action

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 DevOps Services.
  2. In DevOps Services, click the FORK PROJECT button on the menu to create your own copy of the code. Provide a unique name, and click the CREATE button.
  3. Click the EDIT CODE button to begin working with the application.

Step 2: Deploy the application manually

 

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.

To define your own easy to remember URL for your application, edit the Launch Configuration by clicking the upside down triangle in the toolbar, and selecting the pencil icon, and editing the configuration.

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, 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. A solid green dot and (running: normal) indicates that the 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.
  3. Click the NodeJS_Simple_1 link to view your running application in a separate browser tab. Refresh the browser page and watch the counter increment with each refresh. (Depending on your browser, the counter may initially increment by more than 1.)

Step 3: Manage your application

 

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

  1. In DevOps Services, follow the application dashboardlink to manage the application in Bluemix: Screenshot of manual deployment info with stop button

    Click to see larger image

  2. In the Bluemix application dashboard, Click the Stop button.
  3. Click the Start button.
  4. Follow the Routelink to reopen the 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 3addresses persistence.)

Additional management capabilities are available from the Bluemix dashboard interface.

Step 4: Modify the application

 

If you are going to be making a lot of editing changes, turn on Live Edit and use the Live Edit Restart to view your changes without redeploying.

  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. Deploy the application and use the URL link 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:The SDK for Node.js runtime helps you develop, deploy, and scale server-side JavaScript apps with ease.

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=02252015