Introducing Web Starter Kits for OpenWhisk — Ember.js

Recently, Apache OpenWhisk added web actions enabling actions to be invoked through HTTP requests, as explained here, here and here.

This opens the door for easy and fast serverless deployment of web applications, including your front-end, back-end or both. You can even do this for free in Bluemix thanks to the generous free tier.

In this article I will describe how to deploy new and existing Web applications developed using Ember.js. In subsequent articles I will cover some other Node.js Web frameworks (Angular, React Starter Kit, Express, Meteor or Gatsby).

So let’s get started by first installing the Ember CLI (if not already done)

npm install -g ember-cli

and create a new web app

ember new openwhiskdemo
cd openwhiskdemo

To make thing a bit interesting, let’s modify the default application to use bootstrap the way it is described here, but for the purpose of this article let’s just add a navar.

Edit /app/templates/application.hbs with the following content

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed"
      data-toggle="collapse" data-target="#menu-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      {{ link-to 'Home' 'index' class="navbar-brand" }}
    </div>
    <div class="collapse navbar-collapse" id="menu-collapse">
      <ul class="nav navbar-nav">
        <li>{{ link-to 'About' 'about' }}</li>
        <li>{{ link-to 'Contact' 'contact' }}</li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  {{outlet}}
</div>

and add Bootstrap using a CDN in /app/index.html

<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
    </script>

Let’s verify that everything is running as expected

ember serve

The next step is to package the generated assets into a OpenWhisk web action. This action is responsible for properly routing HTTP requests to Ember resources: /assets/... serves assets stored in the assets directory, and all other requests must be redirected to /index.html. The full code of this action is available here. Let’s add an Ember add-on to automatically copy these files when building our web app

ember g in-repo-addon openwhisk

And copy emberjsrouter.js, wsk-package.js and index.js into openwhiskdemo/lib/openwhisk/

We are almost set to build our production-ready Web application. By default OpenWhisk actions can be invoked using a URL that is structured as follows: https://{APIHOST}/api/v1/web/{QUALIFIED ACTION NAME}.[{EXT}] . The Ember root URL must be updated to reflect this in config/environment.js:

if (environment === ‘production’) {
  ENV.rootURL = ‘/api/v1//web/villard@us.ibm.com_dev/default/emberdemo’;
}

default/emberdemo corresponds to the action name emberdemo deployed in the default package. villard@us.ibm.com_devis my organization name and space on Bluemix and must be replaced by your own name. Now we can build our web app

ember build --prod --output-path prod

and deploy it on OpenWhisk. If you don’t have the wsk installed on your system, please read this, or this if you have a Bluemix account.

cd prod
zip -r ember.zip .
wsk action update emberdemo ember.zip --kind nodejs:6 --web yes

That’s it! Try it in a browser: https://openwhisk.ng.bluemix.net/api/v1/web/villard@us.ibm.com_dev/default/emberdemo

On a final note, things to consider:

• OpenWhisk adds some limitations. In particular the maximum payload is 1MB. In this example, the minified gzip vendor.js file weights 200Kb but can grow easily when adding external dependencies. One way to mitigate this growth is to serve common libraries from CDN (like bootstrap) and to store large assets in ObjectStores.
• Looking for a semi-custom domain? Please read this.
• emberjsrouter.js is under development. Please submit bugs here.