Deploy your first app to IBM Cloud

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

The toolchain that will be created for you 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.

Diagram of a sample IBM Cloud DevOps toolchain

The pipeline that will build and deploy your application has the following two stages:

  1. Build. Your application code is pulled from your repo and the dependencies are built.
  2. Deploy. The build artifacts for your application are deployed to IBM Cloud.

Diagram of a sample build and deploy pipeline

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 tutorial’s GitHub 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.

You use the default toolchain template in the Open Toolchain repo to build the toolchain. 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 tutorial.

Estimated time

This tutorial should take you approximately 10 minutes to complete.

Steps

  1. Click the following Deploy to IBM Cloud image:

    Image of a blue box that says Deploy to IBM Cloud

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

  3. The Create a toolchain page opens. Enter a new name for your toolchain within the Toolchain Name field. Make a note of the default region that was automatically chosen from the Select Region drop down list. You will need to use this same region name in a later section. The region might not be Dallas as shown in the following screen capture image because the toolchain attempts to select the region closest to you.

    Screen capture of the Create a toolchain page with my-first-app in the Toolchain Name field

  4. Within the Tool Integrations section, click Delivery Pipeline to update your pipeline configuration settings.

    Screen capture of the Tool Integrations section with the Delivery Pipeline button highlighted

  5. Click the Create button located next to IBM Cloud API key field.

    Screen capture of the expanded pipeline configuration settings, with the IBM Cloud API key field highlighted

  6. A pop-up window opens that asks if you want to create a new API key for this pipeline. Click OK.

    Screen capture of the Create a new API key with full access window

  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.

    Screen capture of the expanded pipeline configuration settings, with the Region drop down list open

  8. Click Create. 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 View Console on the Deploy Stage pipeline tile.

    Screen capture of the App Console

  11. Open the application from the App Console by clicking 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.

    Screen capture of where the Visit App URL link is located

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

Screen capture of the IBM Cloud deployment success message "Yay... You did it!"

Summary

In this tutorial, you deployed your first application using an IBM Cloud DevOps toolchain, which enabled you to automatically build and push the application to IBM Cloud.