Skip to Content
Technical Articles
Author's profile photo Nicolai Geburek

SAP Tech Bytes: Deploy a Static Web Page – Cloud Foundry Basics #1

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.

 

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

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

deployed%20web%20app

 

And that’s it. We have deployed a static web page to SAP BTP, Cloud Foundry environment with minimal configuration and effort.

Check out the next blog post of this series.

Feel free to reach out in case you have any questions.

Stay tuned for more blog posts covering the basics of Cloud Foundry.

 


sap-tech-bytes

SAP Tech Bytes is an initiative to bring you bite-sized information on all manner of topics, in video and written format. Enjoy!

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.