Exploring Application Frontend Service: Deploying the UI of an MTA App

Exploring Application Frontend Service: Deploying the UI of an MTA App
Estimated read time 8 min read

Introduction

Application Frontend Service (AFS) was introduced in May this year (see blog). It is a single point of entry for hosting, serving and operating frontend applications. It shares some functionality with the HTML5 Application Repository service, particularly in hosting HTML5 applications, but it is intended to support single-tenant, stand-alone applications. Native integration with SAP Build Work Zone is not yet supported. AFS has become available for BTP trial accounts since June (see blog), so I wanted to try this out to find out – as always – how to deploy an MTA application (CAP + UI) using AFS.

The final architecture looks like the image below:

Link to GitHub repository: https://github.com/miyasuta/cap-afs-sample

 

Prerequisites

Perform the initial set up of AFS as described in the @Yogananda‘s  blog post.

 

Getting Started

1. Create a CAP Project

Initialize a CAP project using the following commands:

cds init cap-afs-sample
cd cap-afs-sample
cds add tiny-sample

2. Add a Fiori Elements UI

Launch the SAP Fiori generator and select the List Report template.

Select “Use a Local CAP Project” for the Data Source.

Configure the application details and press “Finish”. 

 

3. Add Deployment Configurations

Add deployment configurations using the following commands:

cds add xsuaa,hana –for production
cds add mta

Next, execute the following command. Although we are not going to deploy to the HTML5 Application Repository, it will add necessary configurations for UI such as xs-app.json ad ui5-deploy.yaml.

cds add html5-repo

 

4. Adjust Configurations for Adapting to AFS

In order to deploy the UI to AFS, some configurations need to be changed.

 

4.1. xs-app.json

Update the app/managebooks/xs-app.json as follows. Make sure to replace the html5-apps-repo-rt with app-front.

{
“welcomeFile”: “/index.html”,
“authenticationMethod”: “route”,
“routes”: [
{
“source”: “^/?odata/(.*)$”,
“target”: “/odata/$1”,
“destination”: “srv-api”,
“authenticationType”: “xsuaa”,
“csrfProtection”: true
},
{
“source”: “^/resources/(.*)$”,
“target”: “/resources/$1”,
“authenticationType”: “none”,
“destination”: “ui5”
},
{
“source”: “^/test-resources/(.*)$”,
“target”: “/test-resources/$1”,
“authenticationType”: “none”,
“destination”: “ui5”
},
{
“source”: “^(.*)$”,
“target”: “$1”,
“service”: “app-front”,
“authenticationType”: “xsuaa”
}
]
}

 

4.2. mta.yaml

Replace the resource for html5-apps-repo with the one for app-front.

# Before
modules:
…
– name: cap-afs-sample-app-deployer
type: com.sap.application.content
path: gen
requires:
– name: cap-afs-sample-html5-repo-host
parameters:
content-target: true
…
resources:
…
– name: cap-afs-sample-html5-repo-host
type: org.cloudfoundry.managed-service
parameters:
service: html5-apps-repo
service-plan: app-host​

Note that in the requires section of the application deployer, html5-repo-host was removed and 3 dependencies were added – xsuaa, afs and srv-api. We wil use the srv-api for configuring a destination in the next step.

# After
modules:
…
– name: cap-afs-sample-app-deployer
type: com.sap.application.content
path: gen
requires:
– name: cap-afs-sample-auth
– name: cap-afs-sample-afs
parameters:
content-target: true
– name: srv-api
…
resources:
…
– name: cap-afs-sample-afs
type: org.cloudfoundry.managed-service
parameters:
service: app-front
service-plan: developer

Add a parameters section after the required section. Here, destinations for UI5 resources and the CAP API are maintained.

– name: cap-afs-sample-app-deployer
type: com.sap.application.content
path: gen
requires:
– name: cap-afs-sample-auth
– name: cap-afs-sample-afs
parameters:
content-target: true
– name: srv-api
parameters:
config:
destinations:
– name: ui5
url: https://ui5.sap.com
– name: srv-api
url: ~{srv-api/srv-url}
forwardAuthToken: true

 

5. Deploy

Run the following commands to deploy the MTA.

npm i –prefix app/managebooks
cds up

 

6. Find the Application URL

After the deployment is finished, execute the following commands:

afctl login –sso -a <api_endpoint>
afctl list

You will find the list of deployed applications. Click on the URL for the app you just deployed.

The deployed application will open in the browser. However, I noticed one issue: the buttons on the UI (for example, the “Go” button) are not clickable, while other controls remain interactive. I haven’t figured out if this is an issue with AFS or the application itself. If anyone has been able to fix this, please let me know in the comments section.

 

Issue: Deploying the UI part with “afctl push” Causes Loss of Destination Configuration

According to the documentation, you can first deploy the application using MTA, and then redeploy any subsequent UI changes using the Application Frontend CLI. 

 

I tried deploying the UI using the following commands:

# Build the UI
cd app/managebooks
npm run build

# Deploy
afctl push dist

The deployment was successful, but the app failed to connect to the backed. I saw a 500 error in the browser’s network tab. When I redeployed the entire MTA, the app started working again. It seems that the destination configuration defined in the mta.yaml was lost when deploying only the UI with `afctl push` command. If anyone has insights into this issue, please let me know.

 

Final Thoughts

Initially, I was struggling to deploy the application using a standalone approuter. Then I realized that the AFS includes routing and authentication functionality, and therefor the standalone approuter was not needed. Using AFS seems to be an optimal approach for standalone UI applications as it eliminates the need to run a standalone approuter and manage its instances and memory.

 

​ IntroductionApplication Frontend Service (AFS) was introduced in May this year (see blog). It is a single point of entry for hosting, serving and operating frontend applications. It shares some functionality with the HTML5 Application Repository service, particularly in hosting HTML5 applications, but it is intended to support single-tenant, stand-alone applications. Native integration with SAP Build Work Zone is not yet supported. AFS has become available for BTP trial accounts since June (see blog), so I wanted to try this out to find out – as always – how to deploy an MTA application (CAP + UI) using AFS.The final architecture looks like the image below:Link to GitHub repository: https://github.com/miyasuta/cap-afs-sample PrerequisitesPerform the initial set up of AFS as described in the @Yogananda’s  blog post. Getting Started1. Create a CAP ProjectInitialize a CAP project using the following commands:cds init cap-afs-sample
cd cap-afs-sample
cds add tiny-sample2. Add a Fiori Elements UILaunch the SAP Fiori generator and select the List Report template.Select “Use a Local CAP Project” for the Data Source.Configure the application details and press “Finish”.  3. Add Deployment ConfigurationsAdd deployment configurations using the following commands:cds add xsuaa,hana –for production
cds add mtaNext, execute the following command. Although we are not going to deploy to the HTML5 Application Repository, it will add necessary configurations for UI such as xs-app.json ad ui5-deploy.yaml.cds add html5-repo 4. Adjust Configurations for Adapting to AFSIn order to deploy the UI to AFS, some configurations need to be changed. 4.1. xs-app.jsonUpdate the app/managebooks/xs-app.json as follows. Make sure to replace the html5-apps-repo-rt with app-front.{
“welcomeFile”: “/index.html”,
“authenticationMethod”: “route”,
“routes”: [
{
“source”: “^/?odata/(.*)$”,
“target”: “/odata/$1”,
“destination”: “srv-api”,
“authenticationType”: “xsuaa”,
“csrfProtection”: true
},
{
“source”: “^/resources/(.*)$”,
“target”: “/resources/$1”,
“authenticationType”: “none”,
“destination”: “ui5”
},
{
“source”: “^/test-resources/(.*)$”,
“target”: “/test-resources/$1”,
“authenticationType”: “none”,
“destination”: “ui5”
},
{
“source”: “^(.*)$”,
“target”: “$1”,
“service”: “app-front”,
“authenticationType”: “xsuaa”
}
]
} 4.2. mta.yamlReplace the resource for html5-apps-repo with the one for app-front.# Before
modules:
…
– name: cap-afs-sample-app-deployer
type: com.sap.application.content
path: gen
requires:
– name: cap-afs-sample-html5-repo-host
parameters:
content-target: true
…
resources:
…
– name: cap-afs-sample-html5-repo-host
type: org.cloudfoundry.managed-service
parameters:
service: html5-apps-repo
service-plan: app-host​Note that in the requires section of the application deployer, html5-repo-host was removed and 3 dependencies were added – xsuaa, afs and srv-api. We wil use the srv-api for configuring a destination in the next step.# After
modules:
…
– name: cap-afs-sample-app-deployer
type: com.sap.application.content
path: gen
requires:
– name: cap-afs-sample-auth
– name: cap-afs-sample-afs
parameters:
content-target: true
– name: srv-api
…
resources:
…
– name: cap-afs-sample-afs
type: org.cloudfoundry.managed-service
parameters:
service: app-front
service-plan: developerAdd a parameters section after the required section. Here, destinations for UI5 resources and the CAP API are maintained. – name: cap-afs-sample-app-deployer
type: com.sap.application.content
path: gen
requires:
– name: cap-afs-sample-auth
– name: cap-afs-sample-afs
parameters:
content-target: true
– name: srv-api
parameters:
config:
destinations:
– name: ui5
url: https://ui5.sap.com
– name: srv-api
url: ~{srv-api/srv-url}
forwardAuthToken: true  5. DeployRun the following commands to deploy the MTA.npm i –prefix app/managebooks
cds up 6. Find the Application URLAfter the deployment is finished, execute the following commands:afctl login –sso -a <api_endpoint>
afctl listYou will find the list of deployed applications. Click on the URL for the app you just deployed.The deployed application will open in the browser. However, I noticed one issue: the buttons on the UI (for example, the “Go” button) are not clickable, while other controls remain interactive. I haven’t figured out if this is an issue with AFS or the application itself. If anyone has been able to fix this, please let me know in the comments section. Issue: Deploying the UI part with “afctl push” Causes Loss of Destination ConfigurationAccording to the documentation, you can first deploy the application using MTA, and then redeploy any subsequent UI changes using the Application Frontend CLI.  I tried deploying the UI using the following commands:# Build the UI
cd app/managebooks
npm run build

# Deploy
afctl push distThe deployment was successful, but the app failed to connect to the backed. I saw a 500 error in the browser’s network tab. When I redeployed the entire MTA, the app started working again. It seems that the destination configuration defined in the mta.yaml was lost when deploying only the UI with `afctl push` command. If anyone has insights into this issue, please let me know. Final ThoughtsInitially, I was struggling to deploy the application using a standalone approuter. Then I realized that the AFS includes routing and authentication functionality, and therefor the standalone approuter was not needed. Using AFS seems to be an optimal approach for standalone UI applications as it eliminates the need to run a standalone approuter and manage its instances and memory.   Read More Technology Blog Posts by Members articles 

#SAP

#SAPTechnologyblog

Avatar for

You May Also Like

More From Author