Contents


Deploy a Hello World webpage to IBM Cloud

Build an easy app to deploy your webpage to the IBM cloud platform

Comments

In this tutorial, we'll show you how to create a simple "Hello World" app to deploy a webpage to the IBM Cloud platform using nothing but HTML and a static file buildpack that is hosted on GitHub.

What you'll need for your app

Here's the plan

Step 1. Create a toolchain for your new app

  1. Log in to IBM Cloud.
  2. Navigate to the DevOps dashboard.
  3. Click Create a toolchain.
  4. Select the Develop a Cloud Foundry app toolchain. Develop a cloud foundry app
    Develop a cloud foundry app
  5. On the toolchain page, enter a name for your toolchain (usually your app name). Toolchain page
    Toolchain page
  6. For the Git Repos and Issue Tracking tool integration, select the Repository type of New, and enter a name for your new repo. Tool integration
    Tool integration
  7. Click Create. This will open up your toolchain's overview page. Toolchain overview page
    Toolchain overview page

Step 2. Create a simple webpage

After your toolchain is created, it's time to code! In this example, we will say "Hello" to the world in a simple webpage. You can do the coding and testing in the Web IDE, completely in your browser.

  1. On your toolchain’s overview page, click the Eclipse Orion Web IDE. The Web IDE will open. A few files like .cfignore and .gifignore will be created for you automatically.
  2. In the Web IDE, select File > New > File.
  3. The file is highlighted so that you can name it. Enter index.html.
  4. In the editor area on the right, paste the following:
    <html>
         <body>
              Hello, IBM Cloud World!
         </body>
    </html>

    You should now see this: Web IDE page
    Web IDE page

Step 3. Create a manifest

A manifest is a file that tells IBM Cloud how to deploy the application. It’s possible to deploy using the launch configuration wizard in the Web IDE without creating a manifest, but we’ll create a very simple manifest so that your app can be easily deployed using either the Web IDE or the CF Command Line tool.

  1. In the Web IDE, select File > New > File.
  2. The file is highlighted so that you can name it. Enter manifest.yml.
  3. In the editor area on the right, paste the following:
    ---
    applications:
    - buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
      host: simple-website-${random}
      name: simple-website-${random}
      memory: 64M
      stack: cflinuxfs2

    The host is essentially the URL of your application.

Important: The host and app name you choose must be unique across all of IBM Cloud, so replace ${random} with a unique string, such as your initials.

Each line in the manifest provides important instructions to IBM Cloud about how to deploy your app.

  • The buildpack contains the necessary framework and/or runtime support for IBM Cloud to run your application. For this application, we're using a static file buildpack that is hosted on GitHub.
  • The host is essentially the URL of your application. The host you choose must be unique across all of IBM Cloud. We added the ${random-word} keyword so that your deployment will not collide with the deployments of others who follow this tutorial. You can customize the host to be whatever you like.
  • The memory refers to how much memory you are allocating to your app in your IBM Cloud space. Memory is not a required part of a manifest, but it is included in this example so that the app does not consume a large portion of the memory allocated to your IBM Cloud space.
  • The stack is defined by Cloud Foundry as "a prebuilt root filesystem (rootfs) which works in tandem with a buildpack and is used to support running applications." The static file buildpack we're using requires the cflinuxfs2 stack. IBM Cloud currently defaults to an older stack, so we need to specify the stack as cflinuxfs2. Most buildpacks will not require you to specify a stack.

Make sure to use a unique name for host and name in this image. Don't use the value displayed in the image, create your own random string:

manifest.yml
manifest.yml

By default, in the delivery pipeline, the Deploy stage uses the app name specified in that stage. So, if when you run the pipeline it says the URL is already in use, you may need to update the Application name field to also use a unique name:

Deploy stage
Deploy stage

Step 4. Deploy and open the app

Now that you have a webpage and a manifest created in your workspace, you’re ready to deploy!

  1. In the Web IDE, click the Deploy button: deploy
    deploy

    Your application is now deployed to IBM Cloud. The process takes about a minute to complete. You’ll know it’s finished deploying when you see a green dot in the run bar:

    green dot
    green dot

    If your deploy fails, check the launch file to make sure it has unique names, too:
    1. Right click in by the launch and then click Edit. Click Edit
      Click Edit
    2. Change the launch configuration to use a unique Name for the application and for the host: Click Edit
      Click Edit
    3. The file is saved automatically so try to deploy it again.

      Important: There are three places deploy information can be specified:
      1. In a launch configuration file to be used for the Web IDE deploy.
      2. In the manifest.yml file for all values except the Application name which comes from the Deploy stage by default for the pipeline deploy.
      3. In the manifest.yml file to be used for cf push commands.
  2. When your app is deployed, open it in a web browser by clicking the Open the application URL button: Open the app
    Open the app
  3. The running website opens in a new window: Running website
    Running website

Note: You can change the host name in the launch file (which is used for deploying from the workspace in the Web IDE) so that you can have your published site running while you are testing updates to another URL.

Step 5. Commit your changes to the repo

So far, you have done all your work in the Web IDE workspace. Now you want to commit the changes to the Git Repos and the Issue Tracking repo.

  1. Click on the Git icon: Git icon
  2. On the commit page, enter a commit comment and click Commit: Commit button
    Commit button
  3. Click Sync to push your changes to your repo: Sync button
    Sync button

Once you sync the Git repo, the delivery pipeline automatically kicks off a new pipeline so your updated app will be deployed.

Note: You can deploy your app to a different URLs from the Web IDE and from the pipeline. This allows you to develop in the Web IDE while having your production version running.

Congratulations! Your application is now sending cheerful greetings to the IBM Cloud world, and is in your Git Repos and Issue Tracking repo.

Conclusion and next steps

In this tutorial, we created a simple "Hello World" webpage by creating a toolchain with an empty Git Repos and Issue Tracking repo, creating index.html and manifest.yml files, and deploying the app to IBM Cloud. To continue working on this app, you can make changes to index.html or create new webpages and then deploy to IBM Cloud.

Dive deeper into using IBM Cloud, DevOps, and toolchains by trying some of the other tutorials on the Garage Method site.


Downloadable resources


Related topics


Comments

Sign in or register to add and subscribe to comments.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Cloud computing, Web development
ArticleID=999860
ArticleTitle=Deploy a Hello World webpage to IBM Cloud
publish-date=02192018