UI5 local development with ability to access backend services on the SAP BTP CF

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-uris/

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