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 a SAPUI5 app, but a great arcade game that 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). 

Play Asteroids powered by React, secured by SAP Cloud Platform

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 frameworks. 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. 

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 into 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 that 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 game that 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):

• Set up your local dev environment

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. To bootstrap the React app, add an index.html file to the “dist” folder with the following content

   <!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. Create the file dist/xs-app.json​:

   {
     "welcomeFile": "/index.html",
     "routes":[{ 
       "source":"^(.*)", 
       "target": "$1",
       "service": "html5-apps-repo-rt" 
     }]
   }

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. Create the file dist/manifest.json​:

   {
     "sap.app": {
       "id":"Reacteroids",
       "applicationVersion":{
         "version": "1.0.0"
       }
     }
   }

6. Push the html5 app to the cloud platform

   cf html5-push​

   Note: This command will create a new service instance with a generated name and 2MB of storage. If you want to use a custom name/size please use:

   cf create-service html5-apps-repo app-host myRepoHost -c '{\"sizeLimit\": 5}'
   cf html5-push -n myRepoHost

   (thanks for the hint David Best)

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 8.5.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.)

1. Clone the repo
   

   git clone https://github.com/SAP-samples/multi-cloud-html5-apps-samples
   cd multi-cloud-html5-apps-samples/standalone-approuter-html5-runtime
   

2. Modify the router/xs-app.json file to redirect all incoming traffic to our application in the repository

   {
     "welcomeFile": "/Reacteroids/index.html",
     "authenticationMethod": "none"
   }​

3. Build the app router

   npm install
   npm run build

4. Log in to the Cloud Foundry space in your region (here eu10)

   cf login -a https://api.cf.eu10.hana.ondemand.com​

5. Deploy the prepared app router
   

   cf deploy mta_archives/approuter_html5_1.0.0.mtar

   While the app router is being deployed, we have the chance 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 requests 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.

6. 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 that 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