Deploy your first app to IBM Cloud

In this challenge, you’ll learn how to deploy your first Cloud Foundry application to IBM Cloud using an automated deployment through an IBM Cloud DevOps Toolchain. The toolchain will then build and deploy your application to IBM Cloud when you click a Deploy to IBM Cloud button in a later step.

The toolchain that will be created for you looks like this:

This toolchain has four components:

1. Issue management through a hosted GitLab instance on IBM Cloud.
2. A git repo hosted on IBM Cloud.
3. The Eclipse Orion web IDE.
4. A delivery pipeline to build and deploy your application to IBM Cloud.

The pipeline that will build and deploy your application looks like this:

This pipeline has the following two steps:

1. Build: Your application code will be pulled from your repo and the dependencies will be built.
2. Deploy: Your application’s build artifacts will then be deployed to IBM Cloud.

Application and toolchain files

This simple application uses the Vue.js framework to display a simple single-page application. It uses webpack to bundle the front-end files into static assets. Node.js and the Express framework then serve the application.

The Vue.js application files are located in the /src directory of this challenge’s repository. Those files are then bundled by webpack into the /dist folder.

The Node.js files /bin/www and app.js use Express to serve the frontend application, while /routes contains the file to route requests to the home page.

We use the default toolchain template to build our toolchain for us.

In that repo, the /.bluemix directory contains the toolchain and pipeline files.

• toolchain.yml contains the structure of the toolchain, including the cloned repo, the pipeline, and the web IDE integration.

• pipeline.yml contains the definition of the pipeline, which in this case only has two stages: build and deploy.

Prerequisites

You must register for an IBM Cloud account before you can complete this challenge.

Estimated time

This challenge should take you approximately 10 minutes to complete.

Steps

1. Click the Deploy to IBM Cloud image below:

2. You will be prompted to sign into IBM Cloud. Enter your account information if you have not already signed in.

3. The toolchain creation page opens. Enter a new name for your toolchain. Make a note of the region that displays under Select Region — you will need to use this region name in a later section. The region might not be Dallas as shown in the image below because the toolchain attempts to select the region closest to you.

4. Click on Delivery Pipeline in the Tool Integrations section. You will need to update your pipeline configuration settings.

5. Click the Create button next to IBM Cloud API Key field. A pop-up window opens.

6. The window asks if you want to create a new API key for this pipeline. Click Create.

7. You will see information such as Region, Space, and Organization displayed. If no organization or space displays, update the Region field. In particular, if Washington DC is selected, switch to the Dallas region.

8. Click Create at the top right of the page. Your new toolchain is displayed.

9. You can click on the pipeline to view your application being built or you can remain on the toolchain page until the pipeline finishes building.

10. From the toolchain page, go to the application console by clicking on View Console on the Deploy pipeline tile.

11. Open the application from the App Console by clicking on Visit App URL.

    Note: Due to Internet Explorer and Microsoft Edge limitations, the application will not display in those browsers. We recommended that you open your application using Firefox, Chrome, or Safari instead.

If you have completed all the steps correctly, you will see the following image displayed on the home page of your new application:

Summary

In this challenge, you deployed your first application using IBM Cloud DevOps Toolchains, which enabled you to automatically build and push the application to IBM Cloud. Be sure to explore your newly deployed app, and remember to complete the other challenges.