Serverless Web Pages with One-liners

Previously, I introduced the OpenWhisk Shell, a new tool for creating and monitoring your serverless functions. In this article, I will show you how you can create a serverless web page with a small number of simple one-line commands.

First, you will need an HTML file. I have provided a sample file for the purposes of this demo. This HTML expects an SVG icon and a REST API endpoint. It invokes this endpoint, and displays the result. We can deploy this page using the let command. Copy and paste this into your OpenWhisk Shell, running on your laptop:

let public/index.html = http://ibm.biz/openwhisk-shell-demo-html

At this point, you have a deployed web page! No servers involved, and also no bash scripts. In the sidecar, you should now see that the action has been deployed, and has been placed inside the public package. You can click on the View in Browser link to see the deployed page in action.

Next, we need to fill in the missing pieces. Let’s start with the missing icon:

let public/icon.svg = http://ibm.biz/openwhisk-shell-demo-svg

Now reload the page, and you should see that the Apache OpenWhisk icon shows up on your deployed page.

The last piece of our web page is the API endpoint. If you look at the source, or the browser console logs, you should observe that the page has attempted (without success) to fetch the endpoint api/demo.json. Let’s implement that endpoint now. The OpenWhisk package should be api, and the action name should be demo. The .json suffix tells the OpenWhisk web action support to serve the action with a JSON content type.

Let’s start with something simple, so that we can verify that the plumbing works as expected. The OpenWhisk Shell makes it easy to plug in a simple inline function, without having to mess with temporary files. An echo action should do the job, to test that data flows as expected:

let api/demo.json = x=>x

When you reload the page, you should see something like this:

To pass an argument to the echo function, modify the URL to add a query parameter. For example, try appending ?address=London to the URL you got from clicking View in Browser, above. You should now see this London in the output, along with the request headers that the OpenWhisk web action support passes through. You can prune these out, by modifying the API endpoint to use a simple projection:

let api/demo.json = x => ({address: x.address})

Now when you reload, you should see this clean result:

Congratulations, you now have a serverless web page! In summary, these three lines, which you can copy and paste as a whole (the Shell understands multi-line pastes), will bring you from nothing to an auto-scaling web page:

let api/demo.json = x => ({address: x.address})
let public/icon.svg = http://ibm.biz/openwhisk-shell-demo-svg
let public/index.html = http://ibm.biz/openwhisk-shell-demo-html

Stay tuned for blogs coming soon covering more essential topics for web page creation: authentication and authorization, terminating secrets, and integrating third party service calls into your API endpoints. All of these are surprisingly straightforward modifications of those basic three lines!

Download the OpenWhisk Shell
Learn More about the OpenWhisk Shell
Learn More about Apache OpenWhisk