Skip to Content
Technical Articles
Author's profile photo Hemchander S
Hemchander S
October 9, 2018 3 minute read

Build unlimited static websites using a single FaaS function & HTTP trigger | SAP Cloud Platform FaaS – Functions as a Service | Serverless use Case with examples – Part 2

In this post, we will be exploring the most simplest use case – Serving a static file. However, we are going to spice ? it up a little bit with a hack that will let us serve unlimited lightweight HTML5 code without requiring any database or persistence. If you are savvy enough, you would be able to build a entire website documentation or multiple product landing pages with just a single function & a HTTP trigger itself !

Prerequisites:

  1. You’ve read Part 1 https://blogs.sap.com/2018/10/07/exploring-sap-cloud-platforms-faas-functions-as-a-service-serverless-coding-use-cases-how-tos-with-examples-part-1/
  2. You like memes/comics

Let’s get into action.

If you had followed the steps that I’d mentioned in Part 1, you’d be in Functions Designer Dashboard with a couple of functions already created.Also by now, you’d be familiar with the basics of triggers and functions.

This post explains how one can leverage the function’s event param’s response object to write dynamic HTML content. On a high level this is what we are doing.

  1. It is assumed that you have the HTML5 code in a single file already. You need to copy the html content and encode this to base64 (using an online tool is easier) and copy the base64 encoded string to notepad or any IDE of your choice.
  2. Next, copy and paste the function code which I have provided below in the Functions Designer IDE and hit ‘Save and Deploy’.
  3. Create a HTTP trigger for the created function. You’ll see the HTTP trigger URL. Note it down.
  4. You just need to append ?q=<base64_string> from the Step 1 to the HTTP trigger URL that you just obtained from Step 3.
  5. Basically, the encoding in Step 1 converts html code to a single string. The decoding is done in the function when it is passed as parameter to the trigger url. The resultant is the dynamic HTML content that is rendered when the base64 string is passed accordingly!✨

Function Code:

var url = require('url');
module.exports = { 
 handler: function (event, context) { 
    console.log(event.extensions.request.url);  
    var b64 = (url.parse(event.extensions.request.url,true).query).q;
    b64 = b64.replace(/\s+/g, '+');
    var cont = Buffer.from(b64, 'base64');
    event.extensions.response.type('text/html').send(cont);
  } 
 }

Implementation:

I’ve made a very simple HTML5 document and I am going to convert it to Base64 using this online tool over here : https://www.base64encode.org/

<h6>
Little Potato
</h6>
<h1>
Big Potato
</h1>

Converting it to base64..

copying it and attaching it to URL..

 

https://a46b334a-6c53-4e7d-944f-e8758537b4c5.ingress.live.faas-live.shoot.live.k8s-hana.ondemand.com/f1/?q=PGg2Pg0KTGl0dGxlIFBvdGF0bw0KPC9oNj4NCjxoMT4NCkJpZyBQb3RhdG8NCjwvaDE+

When you open this in the browser, you’ll see the HTML content !

Now let’s try with OpenUI5 code: ! 🙂

<html>
  <head>
    <title>Potato App</title>
    <script id='sap-ui-bootstrap'
        src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
        data-sap-ui-theme='sap_belize'
        data-sap-ui-libs='sap.m'>
    </script>
    <script>
       sap.ui.getCore().attachInit(function () {
           new sap.m.Button({
               text: "Say Potato",
               press: function() {
                  sap.m.MessageToast.show("Potato");
               }
           }).placeAt("content");
       });
   </script>
  </head>
  <body class='sapUiBody' id='content'>
  </body>
</html>

Converted to Base64 and added as query parameter.

Voila!

 

The thing to be noticed here is that:

  1. We have never stored any file anywhere – No Persistence ✅
  2. We have not used any running server – No Server, No state ✅
  3. We can create infinite* number of pages  – No Limit ✅

*Note: We should make sure that we don’t cross the URL length limitation specific to the browser

You would be able to build an entire website with static content by tweaking this code little bit and by hyperlinking them !

References:

  1. SAP Functions (Beta) Programming Model
  2. Base 64 Online Encoder
  3. Exploring FaaS – Part 1
  4. That cartoon.

Let me know if you have any queries and please share your interesting findings as well! You can contact me on LinkedIn or Twitter or through any of the profiles mentioned in my site regarding the same! Until then stay tuned!

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Adrian Garcia
      Adrian Garcia

      Hi Hemchander,

       

      I am trying to create my first Cloud Function triggered by http and I would like to check a value in the payload and return a different http status code and body back as response but when I try to user the event.extensions property I get an internal error because the extension property of event it undefined.

      Do you have an idea what the problem is?

       

      thank you in advance and regards

      Adrian

      Author's profile photo B. Deterd
      B. Deterd

      same problem. Anyone?

      Author's profile photo Percy Villajulca
      Percy Villajulca

      Somehow the property extensions does not exist, used http (according to this ) instead and everything worked fine.

      Author's profile photo Wolfgang Röckelein
      Wolfgang Röckelein

      Hi Hemchander S ,

      thanks for the helpful blogs.

      Do you know how to log from a faas instance to the logging service?

      Regards,

      Wolfgang