- SAP Managed Tags:
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 at 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.
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.
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.
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.
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:
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 is an initiative to bring you bite-sized information on all manner of topics, in video and written format. Enjoy!
The source code for this blog post can be found at 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-buildpackAs 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:
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 is an initiative to bring you bite-sized information on all manner of topics, in video and written format. Enjoy!
