How to deploy a UI5 app inside a CAP MTA project and make it available from SAP Build Work Zone, standard edition
I often develop CAP MTA projects that contain some UI modules for PoC purposes. However, the process of deploying these UIs and making them accessible from SAP Build Work Zone, standard edition, is not well-documented. In 2020, I wrote two blog posts addressing this particular topic.
- Developing a Fiori elements app with CAP and Fiori Tools
- Deploying a CAP based Fiori app to a central Launchpad
Why am I writing my third blog on the same topic then? Well, since my last post, templates in SAP Business Application Studio has evolved, allowing you to generate UI deployment configurations without the need for manual setup. In this blog post, I will demonstrate the process of generating UI deployment configurations using SAP Business Application Studio.
- Create a CAP project
- Add managed approuter
- Add UI
- Deploy and verify the UI
1. Create a CAP project
Execute the commands below to create a CAP project, add sample schema and basic deployment settings.
cds init cap-ui cd cap-ui cds add samples cds add hana cds add xsuaa cds add mta
As a result, a project with the following structure will be generated.
2. Add managed approuter
Next step is to add managed approuter configuration. To do this, you can use the “Approuter Configuration” template. Please note that the screenshots in the following sections were captured from a different project than step 1; however, the settings remain the same.
In the wizard, select the project location.
In the next step, select “Managed Approuter” and provide a business solution name. For “Do you plan to add a UI?” select “Yes“.
In the final step, choose “overwrite” and click on “Finish“.
As a result, the managed approuter configuration will be added to the mta.yaml file. You can view the added configurations in the images below.
Please note that the property “ServiceInstanceName” is missing for the second (xsuaa) destination. This is because the xsuaa service instance has been configured without specifying the service-name (which is fine).
However, without the “ServiceInstanceName”, the deployment will fail. So let’s add it as below. You can set the resource name (“cap-ui2-auth” in the example below) as “ServiceInstanceName”.
3. Add UI
Open the template wizard and select the template “SAP Fiori application” > “List Report Page”.
In the “Data Source and Service Selection” step, select “Use a Local CAP Project” and provide the path to your project.
In the “Project Attributes” step, set both “Add deployment configuration to MTA project” and “Add FLP configuration” to “Yes“.
In the “Deployment Configuration” step, choose “Cloud Foundry” as the target and select “Local CAP Project API” as the destination name. With this, the destination configuration will be automatically added to the mta.yaml file, so you don’t have to create the destination manually.
After clicking on “Finish“, the Fiori app will be generated and deployment configurations will be added to the mta.yaml file.
4. Deploy and verify the UI
Finally, deploy the MTA with the following commands.
mbt build cf deploy mta_archives/cap_ui_1.0.0.mtar
After the deployment is compolete, the UI application will be visible in the HTML5 Application Repository.
In SAP Build Work Zone, standard edition, once you refresh the HTML5 Apps channel in the content manager, the application will be available in the content explorer.
By utilizing the templates available in SAP Business Application Studio, you can easily deploy a UI5 app within a CAP MTA project and make it accessible from SAP Build Work Zone, standard edition. Although a minor correction is needed in the mta.yaml file, this approach proves to be much simpler and faster compared to the manual methods described in previous blog posts. If you are using SAP Business Application Studio, I highly recommend adopting this approach.