Skip to Content

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 ! Let me know if this worked for you.I’d be very curious to learn from your suggestions and findings as well ! B| !

Stay tuned for more updates & examples in FaaS.

References:

  1. SAP Functions (Beta) Programming Model
  2. Base 64 Online Encoder
  3. Exploring FaaS – Part 1
  4. That cartoon.
To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply