Overview
Developing a multitarget application (MTA) in one project is a straightforward development process.
Nevertheless, there could be reasons to split one business solution into multiple projects:
- There are multiple teams working on an MTA project, with each team working on a different application of the MTA project.
- Multiple applications in the MTA having different lifecycle.
In the following blog post, I will show you how to split apart the managed approuter MTA and the front-end MTA of your business solution. You will still
use the same xsuaa for all MTA projects and you
won’t need to create a separate xsuaa for each front-end application.
This feature is available on SAP Business Technology Platform (BTP) from
April 22nd, 2021.
First, I recommend taking a look at the straightforward
HTML5 application development in one MTA project.
Solution Diagram
![](/legacyfs/online/storage/blog_attachments/2021/04/splitmta-2.png)
Central Approuter MTA (right side of the image):
- The central approuter MTA is the business solution entry point for the managed approuter.
- The central approuter MTA manages scopes and roles of all front-end applications using:
- One xsuaa instance
- An “xs-security json” file
- The central approuter MTA owns the destination instance and its destination content:
- Destination content to the xsuaa instance
- Destination content to all front-end apphost instances
Front-end UI MTA (left side of the image):
- The front-end MTA includes the front-end and destination modules.
- The front-end MTA owns the apphost instance.
- The front-end MTA uses the existing destination instance of the central MTA and updates the central MTA’s content during deployment.
- The front-end MTA also uses existing scopes and roles defined in the central MTA. If there is a new scope required by the front-end application, the central MTA should be updated manually.
Create a Central MTA Project
- Create a Basic Multitarget Application (MTA) from the template wizard.
![](/legacyfs/online/storage/blog_attachments/2021/04/MTAPROJ.png)
- Right-click the “mta.yaml” file of the MTA project and click Create MTA Module from Template, and select Approuter Configuration.
![](/legacyfs/online/storage/blog_attachments/2021/04/addapprouter-1.png)
- Select the Managed Approuter option and enter the business solution name, for example, “mySolution”.
- Select No for the following question: Do you plan to add a UI?
![](/legacyfs/online/storage/blog_attachments/2021/04/approuterservice.png)
- Open the MTA of the project and copy the name of the destination service locally.
You will use it later for the front-end projects.![](/legacyfs/online/storage/blog_attachments/2021/04/destination-central.png)
Create Front-end HTML5 Projects
- Create two front-end applications (for example, UI1 and UI2).
You can create any type of HTML5 project. In this blog post, I created a Vue.js application using the HTML5 application blog.
- Make sure that you enter the same business solution name that you entered for the central approuter MTA.
![](/legacyfs/online/storage/blog_attachments/2021/04/UIApprouter.png)
Build, Deploy, and Run Your Applications
First, build and deploy the central MTA and only then can you build and deploy the dependent front-end applications.
To deploy your applications to Cloud Foundry, perform these steps:
- Log in to the target Cloud Foundry space, where you want to deploy the application.
From the menu, click View > Find Command to open the command palette and enter your login credentials.![](/legacyfs/online/storage/blog_attachments/2020/07/login-cf-2.png)
- Enter “MBT build” in the terminal, which generates your MTA archive file, or right-click on the project’s “mta.yaml” file and click Build MTA Project.
![](/legacyfs/online/storage/blog_attachments/2021/04/buildmta.png)
- Enter “CF deploy <mtar file name>” in the terminal, which deploys your application to the space that you logged into, or right-click on the mtar file and click Deploy MTA Archive.
![](/legacyfs/online/storage/blog_attachments/2021/04/deploymta.png)
- Perform the above steps to build and deploy the two front-end applications.
- From the SAP BTP cockpit, navigate to the HTML5 Applications menu and open your deployed applications, which are served by the destination and xsuaa of the central MTA.
![](/legacyfs/online/storage/blog_attachments/2021/04/deployedapp.png)
Conclusion
You have separated the front-end development lifecycle into different MTA projects.
I will be happy to hear your feedback personally or here in the comments.
Use the
Trial environment to take your first steps or take a look at all of the SAP Business Application Studio
tutorials.