This SAP Tech Byte is about how to deploy a static web page to Cloud Foundry in the most basic way that requires minimal configuration.

The source code for this blog post can be found on https://github.com/SAP-samples/sap-tech-bytes/tree/cloud-foundry-basics/post1.

There are a lot of complex scenarios and application architectures you can build on the SAP BTP, Cloud Foundry environment, but really the foundation of it all is knowing how to deploy a basic application using one of the available buildpacks and the famous cf push command. There are buildpacks for all kinds of applications (e.g. Python, Java), but we will use the Staticfile buildpack for the purpose of this example as it is particularly useful for UI developers and those starting in this area.

The Web Page

First, we want to create an index.html file in a new directory. This is our static web page. You could also reference other static assets, such as CSS or JavaScript files, or images.

<!DOCTYPE html>
<html>
<style>
    body {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
</style>

<body>
    <h2>We did it!</h2>
    <iframe src="https://giphy.com/embed/3oEjHV0z8S7WM4MwnK" width="480" height="240" frameBorder="0"
        class="giphy-embed" allowFullScreen></iframe>
    <p><a href="https://giphy.com/gifs/spongebob-3oEjHV0z8S7WM4MwnK">via GIPHY</a></p>
</body>

</html>

Deployment Configuration

Next, we need a manifest.yaml file. This is our deployment descriptor that the cf push command expects to find. We need very minimal configuration to make the deployment work, however there are a lot of attributes available that we could configure.

 ---
 applications:
 - name: my-web-page
   buildpack: https://github.com/cloudfoundry/staticfile-buildpack

As an alternative to specifying the buildpack in our manifest.yaml, we could also create a new file called Staticfile next to our manifest.yaml. If this file exists, the correct buildpack will automatically be used during deployment. You can use the Staticfile to configure additional attributes of your web page, such as it’s root directory or authentication.

Deployment

You don’t have an account on the SAP Business Technology Platform? No problem! Learn how to get one here.
You’ll need the Cloud Foundry CLI installed in your development environment. Learn how to install it here, in case you have not done that yet.

Next, we can deploy our app to SAP BTP, Cloud Foundry environment. First, we need to login to a Cloud Foundry organization and space with the cf login command (open a new terminal session). After that, we can execute the cf push command from the directory our project lives in. The deployment for our simple application should only take a few seconds. Once it’s processed, we can see the URL of our web page in the terminal output:

terminal%20output