Getting started with Bluemix and Bluemix DevOps Services using Node.js
Last modified: 24 March 2015
Time: 30 minutes
- Learning objectives
- Create an app with IBM Bluemix
- Set up Git integration and auto-deploy
- Push changes to the Git repository
- Deploy by using the Web IDE
- Update a running app automatically with Bluemix Live Sync
- Create an app in Bluemix by using the SDK for Node.js starter pack.
- Create a Git repository for the app.
- Push changes to the Git repository from the command line or the IBM® Bluemix™ DevOps Services Web IDE.
- Preview and deploy your changes by using the Web IDE run bar.
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.
Sign into Bluemix. The dashboard opens: The dashboard shows an overview of the active Bluemix space for your organization. By default, the space is
devand the organization is the user name of the person who created the project. For example, if
firstname.lastname@example.org in to Bluemix for the first time, the active space is
devand the organization is
email@example.com. If you create more organizations or spaces in Bluemix, use the same ones as you follow the tutorials. Use the default selections.
Click CREATE AN APP. For the kind of app that you are creating, click Web.
For your starter, click SDK for Node.js. Review the docs and details, and then click CONTINUE.
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.
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 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 DevOps Services.
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. You might be prompted to enter your password to verify that DevOps Services can act on your behalf. Important: The first time that you access 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.
Make sure that the Populate the repository with the starter application package and enable build and deploy check box is selected. You created a Git repository, populated it with the example code, and deployed the app.
Go to the Bluemix app overview and click EDIT CODE. Your new project opens in the web integrated development environment (Web IDE). The project page contains useful information that you can review later.
To check the status of the app, review the run bar and click the Open the application URL icon.
Push changes to the Git repository
You can push changes to the Git repository either by using the command line or the 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.
Clone the local repository by using the Git URL, which you can find on the Bluemix app dashboard, the BUILD & DEPLOY page, or your 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://firstname.lastname@example.org': 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.
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.
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://email@example.com': 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. 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.
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.
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, 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 DevOps Services to do the same task.
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.
On the Git Repository page, sync the change that you made to the title.
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.
Push the change by using the integrated Git support.
a. Switch to the Git Repository page.
b. Select the changed file: c. Add a commit message and commit the changes: d. Push the changes: These steps are the same steps that you completed by using the command line.
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.
Deploy by using the Web IDE
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 icon on the run bar.
By clicking the Play icon on 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.
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.
You have a good overview of how to get started with Node.js in Bluemix and DevOps Services.
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.
© Copyright IBM Corporation 2013, 2015.