How to connect an existing SAPUI5 app to a CAP APP?

[lucasfemar]

Hello everyone!

I had to move my backend ABAP service to the a CAP app. Following the SAP Tutorial it shows how to connect a Frontend app (SAPUI5) to the CAP app but the tutorial only shows when the frontend app is created after de CAP app, and so the front end app is added to the /App folder inside de CAP project.

In my case I alredy have an Frontend app deployed in the BTP, but now I must change to where the frontend app have to connect, instead point to a service abap, I want to point to the new CAP app (Also deployed in the BTP) without having to add the front end project to the /App folder inside the CAP project.

How can I expose a destination to the CAP App when it has to authenticate with JWT?
How should I configure the Frontend to connect to this CAP App?

[Rohit_Patil]

To expose a destination to a CAP (Cloud Application Programming) app when it needs to authenticate with JWT and configure your frontend to connect to this CAP app, you can follow these steps:

1.Configure JWT Authentication for CAP App: Ensure that your CAP app is set up to handle JWT authentication. This typically involves configuring authentication providers and verifying JWT tokens in your CAP app. The exact steps may vary depending on the technology stack you are using with CAP (e.g., Node.js, Java, etc.). Refer to the documentation of your CAP stack for specific guidance on setting up JWT authentication.

2.Create a Destination in SAP BTP: In the SAP BTP (Business Technology Platform), create a destination that points to your CAP app. Make sure to configure the destination with the necessary details, including the CAP app's URL and any authentication-related settings. For JWT authentication, you may need to provide a client ID and secret or other authentication credentials as required by your CAP app's authentication mechanism.

3.Configure Trust Between Services: To allow your frontend app to connect securely to the CAP app, ensure that there is trust established between the two services. This typically involves configuring trust settings in the SAP BTP so that the frontend app can securely access the CAP app using the destination you created.

4.Update Frontend Configuration: In your frontend app, you will need to update the configuration to use the destination you created in SAP BTP to connect to the CAP app. This configuration change will depend on the technology stack and framework you are using for your frontend (e.g., SAPUI5, Angular, React, etc.). You will typically find a configuration file or environment variables where you can specify the destination URL.

For example, in SAPUI5, you might update the manifest.json file to include the destination details:

"dataSources": {

"myCAPService": {

"uri": "/destinations/YOUR_DESTINATION_NAME",

"type": "OData",

"settings": {

"odataVersion": "2.0"

}

}

}

Replace "YOUR_DESTINATION_NAME" with the name of the destination you created in SAP BTP.
Test the Connection: After making these configuration changes, test the connection from your frontend app to the CAP app to ensure that it can securely communicate with the CAP app using JWT authentication. By following these steps, you should be able to expose a destination to your CAP app, configure JWT authentication, and connect your existing frontend app to the CAP app without having to add the frontend project to the /App folder inside the CAP project. Make sure to consult the specific documentation for your SAP BTP and CAP stack for any platform-specific details and recommendations.

[lucasfemar]

Hello Rohit, thanks for your answer.

I´ve tried to create a destination to the CAP App, but I have no idea how to get the clientId.

How can I get this data and what should I put in the "Token Service URL" field? See the image bellow