Simple UI Applications with Application Frontend S...

VadimTomnikov

In the ever-evolving world of web UI applications, managed SaaS solutions are the preferred choice for hosting and serving UI applications. They offer efficiency and cost-effectiveness. SAP BTP provides robust solutions for UI applications from the early days of its cloud. The latest offering, Application Frontend service, combines the best legacy features with new advancements in technology and infrastructure. In this post I’ll share with you how to get started with Application Frontend service using the CLI, but MTA and API are supported as well.

Prerequisites

To proceed with this tutorial and try everything on your own, you’ll need a few things

An SAP BTP subaccount, where you have administrator privileges, with
- An entitlement to use the “build-default” of Application Frontend service
- Trust with SAP Cloud Identity tenant
Node.js v22.6.0 or later installed on your development environment
Application Frontend service CLI tool—afctl

To install the afctl, run

npm install -g @sap/appfront-cli

Setup

To start working with Application Frontend service, you need to subscribe to it and grant yourself the permissions to use it.

In the SAP BTP cockpit, in the subaccount, go to Services > Instances and Subscriptions. Then create a subscription the “build-default” of Application Frontend service.
In the subaccount, go to Security > Role Collections. Then create a role collection (for example, Application Frontend Developer). Open the newly created role collection and add yourself as a user. Make sure the user is from an “application users” identity provider. Add the “Application_Frontend_Developer” role to the role collection and save.

Development & Deployment

Let’s develop an application that prints “Hello, <NAME>!”, where the <NAME> is the first name of the logged-in user. We’ll use Application Frontend’s built-in current user REST API, which returns the attributes of the logged-in user as JSON.

Application Frontend service is agnostic to the tools, development model, and UI frameworks that are used to develop UI applications. However, some application configuration files are required:

The manifest.json file should, at a minimum, declare application name and version in the following format:

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

The xs-app.json file, where the desired web server features, such as, the routing, the welcome file and authentication are configured. Some features, for example the authentication are enabled by default, and you have an option to switch them off in this file:

{
    "welcomeFile": "/index.html",
    "routes": [{
        "source": "^/user-api/currentUser$",
        "service": "sap-approuter-userapi"
    }, {
        "source": ".*",
        "service": "app-front"
    }]
}

With this example we configure 3 things:

If no specific path to the resource is present in the URL, send a redirect to /index.html
When the URL path is exactly /user-api/currentUser, send the JSON response with logged-in user attributes
For any other URL path, use the URL path as path to the static resource within deployed application

The index.html file would be the following:

<html>
<head>
    <style>
        body {
            display: grid;
            place-content: center;
            position: absolute;
            inset: 0;
        }
    </style>
</head>
<body>
    <h1>Loading...</h1>
    <script>
        fetch(
            './user-api/currentUser', 
            {credentials: 'include'}
        )
        .then(res => res.json())
        .then(user => {
            const h1 = document.querySelector('h1');
            h1.textContent = `Hello, ${user.firstname}!`;
        });
    </script>
</body>
</html>

To deploy the application, use afctl. The first thing, you need to do is to log in:

afctl login --sso -a <api_endpoint>

You can grab the <api_endpoint> from the Application Frontend service landing page. To open it, in the subaccount in the SAP BTP Cockpit, go to Services > Instances and Subscriptions, and click on the Application Frontend service link.

Application Frontend Service - Landing Page.png

Now, let’s open the terminal in the root folder of our application containing these 3 files and deploy UI application, using afctl:

afctl push

After a few seconds, you should see the runtime URL of deployed application.

Open the link in the browser, log in with your SAP Cloud Identity (if you are not already logged in) and you’ll see “Hello, <NAME>!”, where <NAME> is the first name of the logged in user, in the middle of the web page.

That’s it! Very simple. No mess with infrastructure, servers, certificates, etc. Developing and deploying subsequent applications will be even simpler, since you already have everything set up.

What’s Next

In this post we covered only the very basics of Application Frontend service. In the upcoming posts from the series, we’ll take a look at more advanced Application Frontend capabilities, including:

Accessing back-end systems
Setting up authorization
Securing UI application (CSRF, click-jacking, verb tampering, CSP, CORS)
Developing and deploying full-stack applications (MTA)
Managing application versions
Local preview
Integration with SAP BTP services and tools (SAP BTP cockpit, Business Application Studio, SAP Build Work Zone, SAP Fiori tools)

Stay tuned to learn more about what Application Frontend service has to offer already now and the future features to come. Happy coding!

Yogananda

@VadimTomnikov

Could you please add this statement in your blog or clarify ? - SAP Build for Application Frontend Service is not available for SAP BTP Trial Accounts.