Getting started with Bluemix and Bluemix DevOps Services using Node.js

Last modified: 19 February 2015

Contents

Create an app with IBM Bluemix

IBM® Bluemix™ is an open-standards, cloud-based platform where you can build, manage, and run all types of app: mobile, smart devices, web, and big data. The Bluemix capabilities include Java™, mobile back-end development, app monitoring, and features from ecosystem partners and open source, all through an as-a-service model in the cloud.

Before you can use the Bluemix capabilities, sign up for free.

After you sign up, you can find helpful information on the Bluemix website:

To get started now, try this tutorial. You'll create an app and deploy it.

  1. Sign into Bluemix. The dashboard opens: Bluemix dashboard The dashboard shows an overview of the active Bluemix space for your organization. By default, the space is dev and the organization is the user name of the person who created the project. For example, if bob@example.com logs in to Bluemix for the first time, the active space is dev and the organization is bob@example.com. If you create more organizations or spaces in Bluemix, use the same ones as you follow the tutorials. Use the default selections.

  2. Click CREATE AN APP. For the kind of app that you are creating, click Web.

  3. For your starter, click SDK for Node.js. Review the docs and details, and then click CONTINUE.

  4. Name your app and then click FINISH. The name is a unique URL where you access your app. After a moment, the app starts. The app's dashboard opens and shows that the app is running. Bluemix Application tile

Now that your app is running, you can see and modify its code by using IBM® Bluemix™ DevOps Services.


Set up Git integration and auto-deploy in Bluemix DevOps Services

You can work with your app's code in many ways. For example, with auto-deploy, you can modify the code that runs in your app by pushing your changes to a Git repository. You can auto-deploy your code if you use the Build & Deploy capabilities of Bluemix DevOps Services.

  1. To enable auto-deploy, go to the Bluemix overview for your app and click ADD GIT. A Git repository is created and is populated with example code and a deployed app. Add Git button You might be prompted to enter your password to verify that Bluemix DevOps Services can act on your behalf. Bluemix DevOps Services sign in page Important: The first time that you access Bluemix DevOps Services, you must create an alias that is linked to your IBM id. An alias is a unique, publicly visible short name that is used in Git repository paths, the Track & Plan feature, and in desktop and command line clients, including the URL for the repository that is created for you. For this one-time process, follow the instructions in the window.

  2. Make sure that the Populate the repository with the starter application package and enable build and deploy check box is selected. Create Git repo dialog You created a Git repository, populated it with the example code, and deployed the app. Git repo success message dialog

  3. Go to the Bluemix app overview and click EDIT CODE. CODE button Your new project opens in the web integrated development environment (Web IDE). The project page contains useful information that you can review later.

  4. To check the status of the app, review the Run bar and click the Open the application URL icon. Web IDE


Push changes to the Git repository by using the command line

You now have a Git repository that contains example code. You can use several tools to work with Git, including desktop IDEs, the Web IDE, and the command line.

Before you begin: Git must be installed. For instructions, see Installing Git.

To learn more about working with Git, browse the Git documentation.

  1. Clone the local repository by using the Git URL, which you can find on the Bluemix app dashboard, the BUILD & DEPLOY page, or your Bluemix DevOps Services project overview.

     $ git clone https://hub.jazz.net/git/jazzhubdemouser/newcoolwebappdemo
     Cloning into 'mycoolwebappdemo'...
     Username for 'https://hub.jazz.net': jazzhubdemouser
     Password for 'https://jazzhubdemouser@hub.jazz.net':
     remote: Counting objects: 23, done
     remote: Finding sources: 100% (23/23)
     remote: Total 23 (delta 0), reused 23 (delta 0)
     Unpacking objects: 100% (23/23), done.
     Checking connectivity... done. 
    
  2. Change the app source code and see what happens:

    a. Change to your Git clone directory. The views folder contains a file that is named body.jade. That file implements the main page for the example.

    b. Edit the file. For example, modify the heading. Changing the title

    c. Change to your Git clone directory and do a Git add, commit and push:

     $ cd ..
     $ git add *
     $ git commit -m "changed h1 text"
     [master bf26680] changed h1 text
     1 file changed, 2 insertions(+), 2 deletions(-)
    
     $ git push
     Username for 'https://hub.jazz.net': jazzhubdemouser
     Password for 'https://jazzhubdemouser@hub.jazz.net':
     Counting objects: 8, done.
     Delta compression using up to 2 threads.
     Compressing objects: 100% (3/3), done.
     Writing objects: 100% (4/4), 383 bytes | 0 bytes/s, done.
     Total 4 (delta 2), reused 0 (delta 0)
     remote: Resolving deltas: 100% (2/2)
     remote: Processing changes: refs: 1, done
     To https://hub.jazz.net/git/jazzhubdemouser/newcoolwebappdemo
         43c6bc7..bf26680 master -> master
    

    d. Return to the Web IDE and check the Build & Deploy page. Auto-deploy in action At the top of the leftmost tile, under Input, an entry has a comment that matches the commit operation that you made from the command line. The entry shows that your app is running the code that you pushed.

    e. View your running app and verify that the title was updated. You might need to refresh your browser to see the updates.

  3. In the rightmost tile, under the Last Execution Result heading, click the app name. The Bluemix app dashboard opens. When you click the URL on the app dashboard, your updated, running app opens. To access your app quickly, click the URL that is under the Last Execution Result heading.

App page with new title

You can continue to modify the example code and push the changes to the Git repository. If your project and scope of work grow, you can add people to the project and everyone can push changes to the repository. Standard repository operations and auto-deploy are all that you need to ensure that the app is always running.


Push changes to the Git repository by using the Web IDE

In addition to auto-deploy, IBM Bluemix DevOps Services provides other useful capabilities for app development:

  • Hosting for public projects
  • Multiple source code repositories
  • Support for agile development
  • Web-based development tools with customizations for Bluemix
  • Continuous delivery pipeline for deploying apps to Bluemix
  • More capabilities under development

To learn about all of the features, see the IBM Bluemix DevOps Services website.

You used the command line to modify your code and push it to the repository. Now, try the Web IDE in Bluemix DevOps Services to do the same task.

  1. Return to the deployment page and click EDIT CODE to access the complete, integrated Web IDE that's based on the Eclipse Orion open-source project. Orion at Bluemix DevOps Services You can edit files with syntax coloring support for multiple languages, including HTML, CSS, JavaScript, Ruby, and Python. For some languages, such as JavaScript, the Web IDE also supports syntax checking and code completion, both for standard language constructs and for the services that Bluemix provides. To use content assist, press Ctrl + Space. For example, this image shows code completion for the standard Node.js express module: Orion showing express completions

  2. Before you make another change to your app, merge the title change that you made on the command line so that the change is shown in the Web IDE. You merge from the Git Repository page. Orion Git repository icon

  3. On the Git Repository page, sync the change that you made to the title. Orion Git merge

  4. In the left bar, click the pencil icon to open the editor. Then, use the navigation tree to find the file that you modified before; for example, views/body.jade. Edit the file in the editor. Orion editing index

  5. Push the change by using the integrated Git support.

    a. Switch to the Git Repository page.

    b. Select the changed file: Orion Git staging c. Add a commit message and commit the changes: Orion Git commit d. Push the changes: Orion Git push These steps are the same steps that you completed by using the command line.

  6. To verify that your code was deployed, go to the Build & Deploy page and wait until you see an indication that the app was deployed again. Then, click the URL link that is next to "Deploy to." Your update is shown. Our really cool app


Deploy by using the Web IDE

Run bar

Because Bluemix is based on Cloud Foundry, you can deploy apps directly to Bluemix by using the standard cf and gcf command line tools. Similarly, in the Web IDE, you can deploy your code to Bluemix by clicking the Play butto in the Run bar.

Run bar

By clicking the Play button in the Run bar, you deploy the current state of your code in the Web IDE. To deploy the code that is checked into the repository, use the Delivery Pipeline.

Both the command-line tools and the Web IDE are effective for rapid, solo development, but the Delivery Pipeline feature adds the security of controlling what is pushed, especially in team environments. With the Delivery Pipeline feature, you always know that the code running in the app matches a known state in the repository, instead of whatever was in your working directory when you pushed changes.

Update a running app automatically with Bluemix Live Sync

With Node.js apps, you can make changes to static files, like HTML or CSS, and have them immediately propagated to the deployed app by using the IBM® Bluemix™ Live Sync feature.

In the Web IDE, turn on Live Edit and see your updated static files by refreshing the app in your browser. If you update a node module, use the Quick Restart icon to restart the Node run time in a matter of seconds, without redeploying the app.

Run bar with Live Edit

You can use the Debugger to create breakpoints and inspect variables in your node modules so you can isolate problem areas as you work.

For more information, see Bluemix Live Sync.


Summary

You have a good overview of how to get started with Bluemix and Bluemix DevOps Services by using Node.js.

You saw how to create and run a Node.js web app by using Bluemix. With one click, you created a Git repository, populated it with example code, and automatically deployed the app. You changed the code and pushed the changes to the Git repository by using both the command line and the Web IDE. Then, you automatically built and deployed your changes, checked the deployment status, and verified your changes.


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.