Develop a Bluemix app in Node.js using the Web IDE

Last modified: 24 March 2015

Time: 30 minutes

In this tutorial, you use IBM® Bluemix™ DevOps Services to develop an app in the cloud and deploy it to IBM® Bluemix™.

Learning objectives

  • Create your own version of a DevOps Services project by forking it to your space.
  • Create build and deployment stages by using the Build & Deploy feature.
  • Make a code update and push it to the project repository by using the Web IDE.
  • Deploy the app by using the run bar in the Web IDE.

Fork a sample project

Start with the sample project, Sentiment Analysis App. That app is a hosted Node.js Git project. You need your own copy of the project, which you can get by clicking the button below to fork the project:

Deploy to Bluemix

After the project is forked and the deployment completes, click EDIT CODE to continue.

Build and deploy with the Delivery Pipeline

To make the most of DevOps Services and Bluemix, make sure that your Bluemix space has the Delivery Pipeline service. If needed, add the service to your Bluemix space by following these steps: Getting started with Delivery Pipeline.

When you configure your own project, you can create and customize as much as you want to. This sample, however, is designed to require minimal activity to get started: a pre-configured Grunt build file, Gruntfile.js, is in the root directory, so it is automatically found. This Grunt build file includes JSHint validation so that your project's code is checked automatically each time a build runs.

The Delivery Pipeline configuration for your Sentiment Analysis app has two stages: a build stage and a deploy stage. These stages form a pipeline. The build stage runs a build job on the included Gruntfile.js to validate your code. Then, the deploy stage runs a deploy job to deploy your code to Bluemix.

  1. On the top navigation bar, click BUILD & DEPLOY.
  2. Delete the existing configuration.

    Note: When you fork a project by clicking the Deploy to Bluemix button, the configuration is created for your project automatically. Later, you re-create the stages. If you fork a project without clicking the Deploy to Bluemix button, the configuration is not created automatically.

    a. On the rightmost tile, the Deploy stage, click the gear icon.

    b. Click Delete Stage and confirm the deletion.

    c. On the remaining stage tile, the Build stage, click the gear icon.

    d. Click Delete Stage and confirm the deletion.

  3. Configure a stage to run a build job on code from your project's Git repository:

    a. Click ADD STAGE. At the top of the Stage Configuration page, click the MyStage name and change it to Build.

    b. Click JOBS. Click ADD JOB, and then select Build.

    c. On the Build Configuration page, select Grunt as the Builder Type. Leave the default settings as they are and click SAVE.

    Configuring the Builder

  4. Configure a stage to deploy the output from the Build stage to Bluemix:

    a. Click ADD STAGE. At the top of the Stage Configuration page, click the MyStage name and change it to Deploy to dev.

    This stage immediately follows the Build stage, so its default input is from that stage’s build job. Because DevOps Services integrates with Bluemix and this sample project is simple, you can use the other default information to deploy the project, too.

    b. Click JOBS. Click ADD JOB, and then select Deploy.

  5. Make sure that the project has a unique path by editing the first line of the Bluemix script: add the -n flag followed by a unique host name. A complete version of the command might look like this example:

    cf push "${CF_APP}" -n *mysaap*

    The configuration for the Deploy Stage might look like this example:

    Configuring the Deployer

    The manifest file that is in this sample app specifies a host name and does not require any services, so you do not need to add anything to the script.

  6. If the manifest file (manifest.yml) didn't specify a host or other parameter, you can define that information by adding cf commands to the Bluemix script. The cf command deploys apps to Cloud Foundry based platforms, such as Bluemix. For more information, see Getting Started with the cf CLI v6.

  7. Leave the other settings as they are and click SAVE.

  8. On the Pipeline page, click the Play icon at the top of the Build stage.

    Clicking Request Build on configured Pipeline

    Your project is queued to build. When the build is completed, your app is queued for deployment to Bluemix automatically. You can observe its status from this page and open the app when it is deployed.

  9. To open the app, click its URL on the Deploy to dev tile. If you want to see your app's Bluemix Dashboard, click its name:

Ready to click to Bluemix from Pipeline

You can manage the live app instance on the Bluemix Dashboard. From the Dashboard, you can start, stop, edit, or delete the app. On the Services page, you can add various services such as MongoDB, SSO, MapReduce, and more.

Starting a Bluemix app

Important: Building and deploying apps by using Bluemix can result in charges to your Bluemix billing account. A project is granted 60 minutes of free build time per month, an amount that even the most dedicated tutorial enthusiasts are unlikely to accumulate. For more information about pricing for any service, see the Bluemix Pricing page.

Edit the sample app

You can now personalize the sample app in the DevOps Services web-based code editor, push your changes to the project's remote repository, and initiate a redeployment of your project. These activities won’t take more than a few minutes.

  1. Click Edit Code, and then open the app.js file by clicking it in the side panel. The editor recognizes and highlights the code as JavaScript.

  2. Change how the app greets its users: click Edit, and then click Find. Search for the phrase "Welcome to the Twitter Sentiment Analysis app."

    Configure Builder

  3. Replace occurrences of that message with whatever you like.

  4. If you want a fully functional version of the app, you must supply your own Twitter API keys. To sign up for API keys, go to Twitter Application Management. When you have the API keys, you can replace the keys that are in the tweeter variable, which starts at line 22.

  5. When you're finished, save your work by pressing Ctrl+S (or Command+S on a Mac).

Push changes to the repository

After you edit the app.js file, share the changed file with other members of your project by pushing the file to the repository.

  1. In the sidebar, click the Git Repository icon.
  2. Stage the change to app.js by selecting the check box next to it.

    Stage Changes

  3. Commit your change to the Git repository for your project by entering a commit message, and then clicking COMMIT.

    Committing changes

  4. Push the change to the remote project repository by clicking PUSH.

Pushing Changes

Any changes that are delivered to your project trigger a build. When a build is completed successfully, it is auto-deployed. If you click BUILD & DEPLOY again, you'll see that your change started a new build that will be deployed when the build is finished.

The manifest file

When you deploy a DevOps Services project from the Web IDE, the project must have a manifest.yml file. This file contains important settings, such as the app instance name to use, the host machine, the services that the app uses, and more. The sample app in this tutorial already contains a manifest file.

An example manifest

Deploy by using the Web IDE

While you're working in the directory that contains your manifest.yml file, you can manually deploy whatever is in the Web IDE workspace to Bluemix by clicking Play on the run bar. Remember: When you deploy by using the run bar, you deploy the current state of your code in the Web IDE. When you deploy by using the Build & Deploy feature, you deploy the code that is checked into the repository.

The IDE Run bar

You can configure Web IDE deployment and the Delivery Pipeline service to use different app names. Then, you can use the Web IDE deployment for a personal test environment and the Delivery Pipeline deployment for a team integration environment. The Web IDE saves launch configurations; you can access them from the menu on the run bar.

Whether you are using command-line tools or the Web IDE, both methods are effective for rapid, solo development. You might prefer the added security of using auto-deploy so that you can control what is being pushed. Auto-deploy is available through the Delivery Pipeline service. By using auto-deploy, you know that the code that is running in the app matches a known state in the repository. In contrast, the Web IDE deploys whatever is in your working directory when you push.

Auto-deploy and manual deployment

Builds are triggered when changes are delivered to a project. Successful builds are auto-deployed.

To manually deploy a specific successful build:

  1. On the build history page, select a build.
  2. Drag the build to the box that is under a configured space.


  1. On the build history page, Click Deploy to
  2. Select a stage with a deploy job from the menu.

Deploying an app after expanding a completed build

When the app is deployed, try it by clicking its web URL:

Our updated app on Bluemix


You developed and deployed a Bluemix app by using the Web IDE.

Need help? Ask a question in the IBM Bluemix DevOps Services forum. Have feedback? Report a bug or share your idea in the IBM Bluemix DevOps Services project.

© Copyright IBM Corporation 2013, 2015.