Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Hey UI5 developers 🙋🏻‍♂️,

In the last days I was working on moving my dev environment from webide .

I discovered SAP BAS which is a great tool, but I’m also trying the local vscode option.

For both options I needed a way to run the local development directly against the server’s api (that in my case sits behind xsuaa in my CF dev account)

With the following setup you should be able to run your local UI5(MTA) project with access to the backend services in the SAP BTP CF.

It speed up my development process I hope it will help others.

 

tl;dr

  1. Use a local approuter

  2. Update routes in xs-app.json

  3. Add CF VCAP_SERVICES to default-env.json

  4. Update XSUAA Service Instance to Accept Multiple Redirect URIs


 

1. Use a local approuter


On the root of your project create “local-approuter” folder

Create new file   local-approuter /package.json
{
"name": "approuter",
"dependencies": {
"@sap/approuter": "^10"
},
"scripts": {
"start": "node node_modules/@sap/approuter/approuter.js"
}
}

 

2. Create new file local-approuter /xs-app.json


In this example the approuter will look for anything that starts with /api and forward it to the backend, all the rest will be served from the webapp directory.
{
"authenticationMethod": "route",
"routes": [
{
"source": "^/api/(.*)$",
"target": "/api/$1",
"authenticationType": "xsuaa",
"destination": "my_destination"
},
{
"source": "^(.*)$",
"target": "$1",
"authenticationType": "xsuaa",
"localDir": "../webapp"
}
]
}

 

3. Create new file local-approuter /default-env.json


Important – sensitive data, remember to add this file to .gitignore

Copy the value of VCAP_SERVICES to our default-env.json file

How to get your “VCAP_SERVICES” environment variable:

On command line:
cf env myapp

Or,

By using Cloud cockpit:
Navigate to the details screen of the deployed app
In the left menu pane click on ‘’Environment Variables”


Please pay attention to take only the “VCAP_SERVICES” object from the environment variables.

Now add a “destinations” key that describes your needed destinations with the following syntax:
{
"destinations": [
{
"name": "my_destination",
"url": "https://myserver-dev.cfapps.eu10.hana.ondemand.com/",
"forwardAuthToken": true
}
],
"VCAP_SERVICES": {

4. Update XSUAA Service Instance to Accept Multiple Redirect URIs


On the root of the project you should have the xs-security.json file.

We need to update that file with the “oauth2-configuration” key:
{
"xsappname": "xxx",
"tenant-mode": "dedicated",
"description": "Security profile of called application",
"scopes": [
...
],
"oauth2-configuration": {
"redirect-uris": [
"https://**.hana.ondemand.com/**",
"https://**.applicationstudio.cloud.sap/**",
"http://localhost:5000/login/callback"
]
}
}

You need to update the xsuaa service to accept your redirect uris, to do so run the following command:
cf update-service <myxsuaa> -p application -c xs-security.json

Finally


You should now be able to run the following command:
cd local-approuter
npm install
npm start

Open your browser on http://localhost:5000

Your backend api calls should be fulfilled directly from SAP Cloud to your localhost 😊

 

Disclaimer:


This article is based on personal experience.

References & Credits:

https://blogs.sap.com/2020/04/03/sap-application-router/

https://blogs.sap.com/2020/07/08/how-to-update-xsuaa-service-instance-to-accept-multiple-redirect-ur...

https://blogs.sap.com/2020/05/13/sap-cloud-platform-backend-service-tutorial-33-app-router-4-run-loc...