Skip to Content
Technical Articles

CloudFoundryFun #5 – Play Asteroids powered by React, secured by SAP Cloud Platform

In this fifth post in my CloudFoundryFun series, I will show how to deploy web apps, written with any UI framework, to Cloud Foundry. For this, I deliberately didn’t choose an SAPUI5 app, but a great arcade game which has been coded with Facebook’s React.js. As I don’t want anyone to play this game, I secured it with the SAP Cloud Platform Identity Provider (IdP). 

Nowadays in the cloud era, web interfaces are the de-facto standard interface for all kinds of applications. It’s hard to think of cloud applications not having a web interface. Even “mobile-first apps” like WhatsApp have a very successful web interface, the same holds for classical “desktop” apps like Excel Online.

We didn’t get here by chance! Web technologies are easy to learn and well standardized. In spite of all that standardization, web technologies still offer a lot of flexibility. This flexibility is appreciated by a large ecosystem of developers and laid the groundwork for a myriad of UI frameworks such as OpenUI5 or React. When we think of web technologies, we often think of frontend UI framework. We tend to forget the backend technologies, which we need for distinct tasks. This is why I dedicated this blog post to a service that supports the backend part of your apps.

Frontend Apps vs Backend Services

Frontend frameworks usually help us to bootstrap the app and to render the HTML DOM, e.g. less heavy computational tasks. In contrast to that, the backend technologies handle two types of tasks. Computational heavy ones, e.g. crunching your latest numbers, and lightweight tasks, e.g. serving the static files of your apps. It isn’t easy to scale your server for both types of tasks. Depending on which tasks outweigh the other, the backend server has a different resource consumption. You can see the different resource consumption patterns reflected in your monthly bill. This is why SAP offers the HTML5 Application Repository service.

I know what you might think now: “Why do I need this service to serve static files. Can’t I just use a simple HTTP server to host my web apps?“. And I would say you are completely right. This solution can be implemented within a very short time frame and works very well for simple scenarios. For more complex scenarios, though, it will get a little bit more difficult as you might face the following requirements:

Security – Your server needs to check whether the UI files should actually be delivered to the users. This means you would need to implement a security check or possibly even implement an OAuth flow.

Integration – In almost all cases, a UI comes with the mentioned computational heavy backend tasks. These requests need to be served from the same server as the static content to follow the same-origin policy of your browser. So you need to take care of the integration of both parts of your app.

Scaling – As your backend code grows and gets more complex, you might require more computational power. How can you scale both backend tasks, serving static content and the execution of the backend logic, at the same time?

Extensibility – You might want to share UI libs between different apps. How can you access the UI files from a different project or even from a different Cloud Foundry space?

Caching – This is very important, especially for apps that are requested frequently. Smart caching can help you to scale out later and to save actual money!

All of these aspects require a modification of your standard web server and make the simple scenario more complex. You wouldn’t want to implement all these requirements, especially since the app router already implements them. Plus, it integrates perfectly with the HTML5 App Repository service. You want your files to be served in a cloud-native way. In most cases, you don’t care about the how.  And this is exactly why you want to use the HTML5 App Repository service.

Note: If you have purchased the Application Runtime, you already have purchased this service too. As of today, the HTML5 Application Repository is only available in SAP Cloud Platform on AWS. More regions will follow soon.

How to use the HTML5 Application Repository

Using this service is very easy. You just need to push your prepared (aka uglified) web app to the HTML5 App Repo. This can be done in one of these two ways:

  • You leverage the upload script of the npm package @sap/html5-app-deployer which can be integrated into your MultiTarget Application (MTA) deployment flow. You might have already seen this script in action, this is what the Web IDE does for you under the hood.
  • You use the HTML5 Application Repository plugin for the Cloud Foundry CLI. With this plugin, you can run the following command to push your web app to the repository. This is the approach we’re going to use later.
    cf html5-push

As said before, most of the required functionality is already implemented in the app router which is available via SAP’s npm repository. The app router can integrate apps from the repository seamlessly. You need to complete these two steps to integrate the HTML5 repository in your app router:

  1. Bind the app router to the HTML5 App Repository via service binding
  2. Add a route in the xs-app.json config file to tell the app router which ingress traffic should be redirected to the repository.
    "routes": [{
        "source": "^(.*)$",
        "target": "$1",
        "service": "html5-apps-repo-rt"
    }]

Hands-on: Deploy Reacteroids on SAP Cloud Platform

For this hands-on, I picked a very popular arcade which has been reimplemented in React: Reacteroids. ☄️(React is a very popular JavaScript framework for building user interfaces by Facebook.)

Preparation

Before we get to the fun part, we need to install some tools which are mandatory for cloud development on SAP Cloud Platform (if you haven’t done so already):

You might have noticed that this new way of installing plugins is more comfortable. Thanks for integrating those tools in the CF community repository.

Publish the app

  1. Clone and setup the Reacteroids repo
    git clone https://github.com/chriz001/Reacteroids​
    cd Reacteroids/
    npm install
  2. Build the project, e.g. uglify the source code and move all required files into the “dist” directory
    npm run build​
  3. Add an index.html file with the following content to bootstrap the React app
    <!doctype html>
    <html>
      <head>
        <title>Reacteroids on SAP Cloud Platform</title>
      </head>
      <body>
        <div id='root'>
        </div>
        <script src="bundle.js"></script>
      </body>
    </html>​
  4. Define the welcome file and the routes. You might already know this file if you’ve used the app router before.
    echo '{
      "welcomeFile": "/index.html",
      "routes":[{ 
        "source":"^(.*)", 
        "target": "$1"," 
        service":"html5-apps-repo-rt" 
      }]}' > xs-app.json​
  5. Since this is a React app and not an OpenUI5 app, we need to add a manifest.json file manually. This file contains the name of the application which will translate to the URL path later.
    cd dist/
    echo '{
      "sap.app": {
        "id":"Reacteroids",
        "applicationVersion":{
          "version": "1.0.0"
        }
      }
    }' > manifest.json​
  6. Push the html5 app to the cloud platform
    cf html5-push​

This is all you have to do to deploy your React app! 

Deploy the App router

Next, we need to deploy an instance of the app router in case you don’t have one already running. As of today, version 6.0.0 is the most recent version. As this blog post isn’t about deploying app routers, we will leverage a pre-built app router from the new SAP-Samples GitHub account. (Btw: I recommend that you follow this brand new GitHub account. Currently, there’s not to much content in it, but I’m sure this will change in the near future 😀.)

  1. Clone the repo

    git clone https://github.com/SAP-samples/html5-app-repo-router
    cd html5-app-repo-router
  2. Build the app router
    make -f Makefile.mta p=cf
  3. Log in to the Cloud Foundry space
    cf login -a https://api.cf.eu10.hana.ondemand.com​
  4. Deploy the prepared app router

    cf deploy mta_archives/html5_router_0.0.1.mtar

    While the app router is being deployed, we have the change to inspect it more closely.

    package.json

    You’ll notice that this file is very minimalistic. It only defines the name of the package and one single dependency, which it executes in the start script. During this startup, it will parse the content of the xs-app.json file.

    xs-app.json

    This file is a little bit larger. In the first line, we define the welcomefile, which is the default path the user should be redirected to. Note that “Reacteroids” is the name we choose in the manifest.json file above. Further, we define that all incoming request should be redirected to the HTML5 App Repository runtime (rt) service.

    mta.yaml

    The app descriptor defines our app router application and two services including the service bindings.

  5. Access the URL you see in the console once the command has finished successfully. Now there’s only one thing to do:

 

Sign in with your SAP credentials and have some (CloudFoundry-)Fun! (Hint: the larger your browser window, the easier is the game)

In the next step, we could write a simple backend service which saves the scores in a database. This would just require a small modification of the React source code and the addition of a tiny backend service. The app router already enforces that all users are already logged in, this means the backend service could easily extract the user name easily from the attached JWT token.

Do you have more extension ideas already in the back of your mind? Let me know in the comments!

Summary

In this edition you have learned:

  • How to use the HTML5 App Repository to securely access UI apps across Cloud Foundry Spaces
  • What the Cloud foundry plugin “HTML5 Repo” is for and how to use it
  • That the HTML5 App Repository service is not only for SAPUI5 and OpenUI5
  • How to serve web apps in SAP Cloud Platform in a secure and scalable way
  • That arcade games are (still) fun

Further Reading: Official SAP Help documentation

About this series

This was the fifth blog post of my monthly series #CloudFoundryFun. The name already says all there is to it, this series won’t be about building enterprise apps on Cloud Foundry. I think there are already plenty of great posts about those aspects out there. This series rather thinks outside the box and demonstrates unconventional Cloud Foundry use-cases.
Be the first to leave a comment
You must be Logged on to comment or reply to a post.