Skip to Content

Multi-Target Applications

Introduction

A multi-target application (MTA) is comprised of multiple software pieces (“modules”) which all share a common lifecycle for development and deployment. These modules can be written in different technologies and deployed to different targets respectively, but they all serve (different aspects of) a particular purpose for the application’s users.

This shows the nice fit between MTAs and the XSA Application Pattern. The structure and properties of MTAs are expressed by a declarative MTA model which is persisted as a set of descriptor files.

What is an MTA model actually modelling?

  1. It defines an application composed of multiple (heterogeneous) sub-components. Benefit: Tools can establish a joint lifecycle for these components. On XSA/CF such a tool is the XSA deploy service.
  2. It declares those resources on which an application depends on runtime and/or deployment time (we do not consider build-time here!). Benefit: Tools can allocate and bind such resources.
  3. It declares configuration variables (and their relations) which distinguish different deployments of the application. Benefit: Developers can parameterize deployments at a single, central place. Tools can bind sub-components, can automate deployment based on default settings, or request missing mandatory values interactively.

The MTA specification further defines:

  • An archive format for MTAs with which they can be deployed and distributed in a convenient way.
  • A separation among deployment descriptor (delivered artifact) and extension descriptors(optionally used to add/change deployment time configuration).

In this exercise, you are going to build a SAPUI5 sample application with SAP Web IDE and to deploy it to SAP Cloud Foundry using the integrated Build tool.

Prerequisites

The only prerequisite for this exercise is to have an account on SAP CP Trial Landscape. You can register here: https://account.hanatrial.ondemand.com/#/home/welcome

Steps

  1. Prepare the application to deploy
  2. Create your first MTA project
  3. Integrate the app in the MTA project
  4. Install the builder in your CF space and build the app
  5. Deploy the app to CF

1 – Prepare the application to deploy

For this exercise, I’ve chosen to use as example application the Shop app that you can create using SAP Web IDE. I could have chosen a simpler application, but I wanted to give you even an example of how a SAPUI5 application with mock data can be deployed to Cloud Foundry. The steps listed in this chapter are only necessary for this kind of approach, so in case you want to deploy to CF a different app they could be probably not needed. This said, let’s create the sample application.

  1. Open SAP Web IDE Full-Stack. The link should look like this:https://webidecp-[your_trial_account].dispatcher.hanatrial.ondemand.com/ where [your_trial_account] is the account you have got registered on SAP CP Trial Landscape
  2. From the File menu choose New -> Project from Sample Application 
  3. Select Shop as application template and click Next
  4. Accept the license agreement and click Finish
  5. You have successfully created your sample application. This is what you see in your SAP Web IDE
  6. If you want you can run the project to check that the its is working fine. When you run it, to use mock data, you need to select flpSandboxMockServer.html
  7. Take note of the name of this application (sample.Shop) because we’ll need it in the next chapters.

2 – Create your first MTA project

It’s time now to create our first MTA project, which will be the vehicle for or application to go to Cloud Foundry.

  1. Open SAP Web IDE Full-Stack edition
  2. From the File menu select New -> Project from Template
  3. Select Multi-Target Application and click Next
  4. Enter a name for the project and click Next
  5. Enter a description and click Finish
  6. Your project is created. You should see something like this
  7. Now right click on the name of the project and select New -> HTML5 Module
  8. Select SAPUI5 Application and click Next
  9. Enter the name we previously noted (sample.Shop) as module name and leave the namespace empty; then click Next. This will avoid us to go inside the application finding and replacing all the wrong texts
  10. Leave all by default and click Finish
  11. The module has been added: this is how the project looks like now

3 – Integrate the app in the MTA project

  1. Go to the multi-target project and delete the webapp folder under the sample.Shop directory
  2. Copy and paste the webapp folder from the sample.Shop project into here
  3. We have still some few things to change: delete the test folder inside the new copied webapp folder
  4. Delete the test.html file, too
  5. Create a new file named index.html
  6. Enter the following content and save the file

    <!DOCTYPE HTML>
    <html>
    
        <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta charset="UTF-8">
    
            <title>Shop</title>
    
            <script id="sap-ui-bootstrap"
                src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
                data-sap-ui-libs="sap.m"
                data-sap-ui-theme="sap_belize"
                data-sap-ui-compatVersion="edge"
                data-sap-ui-resourceroots='{"nw.epm.refapps.shop": ""}'>
            </script>
    
            <link rel="stylesheet" type="text/css" href="css/style.css">
    
            <script>
                sap.ui.getCore().attachInit(function() {
                    sap.ui.require([
                    "nw/epm/refapps/shop/localService/mockserver"
                ], function (server) {
                    // set up test service for local testing
                    server.init();
                    // initialize the ushell sandbox component
                    new sap.m.Shell({
                        app: new sap.ui.core.ComponentContainer({
                            height : "100%",
                            name : "nw.epm.refapps.shop"
                        })
                    }).placeAt("content");
                });
                });
            </script>
        </head>
    
        <body class="sapUiBody" id="content">
        </body>
    
    </html>

    PLEASE NOTE THAT WE ARE:

    • using a URL for the SAPUI5 resources
    • enabling the mock server for getting our data in the application
    • skipping the Fiori Launchpad for this kind of application
  7. Another change to do is related to the Products.json file. This file is the one which provides mock data to the application. We need to change the paths to the products’ images. If you don’t change them, you won’t be able to see pictures of products once the application is deployed to CF. So go back to the myfirstappproject project, locate the file sampleShop/webapp/localService/mockdata/Products.json and search&replace all the occurrences of the string “../localService” with just “localService“. We are making the images’ paths relative to the current folder
  8. Remember to save the file once done
  9. Finally, let’s accomodate a little bit the memory and disk quota for the application. Double click on the mta.yaml file, switch to the MTA Editor and go to the section parameters
  10. There, change the two parameters memory and disk-quota as
    • memory = 128M
    • disk-quota = 128M

If the two parameters are not automatically available, feel free to add them. Finally, save the file

4. Install the builder in your CF space and build the app

Now that we have our application, we want to deploy it on Cloud Foundry. Before doing this we need to build in some way our application. SAP Web IDE comes with the right tool to do this.

  1. Right click on the name of your project in SAP Web IDE and select Project Settings
  2. Now click on Space, select the right CF API Endpoint, Org and Space for your Trial landscape, click on Save and, at the end, click on Install Builder
  3. This will install the MTA builder in your space. At the end of the installation you should get this kind of message. Click on Close
  4. You have successfully installed the MTA Builder in your space. If you give a look at your CF cockpit, you see a new application installed in it
  5. To build the app, go back to your SAP Web IDE. Just to easily follow the process log, make sure you have enabled and cleared the console from the toolbar
  6. Right click on the name of your project and select Build
  7. The build process starts and during its execution you should get its log in the console. A message will confirm you that the process ended successfully
  8. The execution of this command generates a new folder, named mta_archives in your SAP Web IDE workspace. Inside this folder you will find a subfolder with the same name of your project, containing a .mtar file. This is the file that we are going to deploy to CF 

5. Deploy the app to CF

If we deployed our application to Cloud Foundry in the Trial Landscape as it is, we would receive an error because of the limitations of Trial Lamscape. Indeed this Landscape has a very limited quota of disk and memory you can use and the builder, we have just pushed to CF, is taking it all for yourself. So, before we proceed, we need to shrink a little bit the builder app, in order to make some space for our MTA application. Again, this limitation DOES NOT EXIST on production landscapes.

  1. Going back to the Cloud Foundry cockpit and click on the MTA builder app
  2. Click on the change quota button to adjust the quotas of the MTA Builder. Reduce both disk and memory quotas to 700MB. The builder app will restart
  3. Go back to SAP Web IDE, locate the file <your_project_name>_<your_project_version>.mtar in the mta_archives\<your_project_name> folder
  4. Right click on this file and choose Deploy –> Deploy to Cloud Foundry
  5. Enter the required information and click on Deploy
  6. When the deployment process finishes, go back to the Cloud Foundry cockpit. You can see that the app has been successfully deployed and started. Click on the application’s name 
  7. Click on the application’s link 
  8. You should be able to access successfully your SAPUI5 application. 
  9. Congratulations! You have successfully deployed your MTA to SAP CP Cloud Foundry!

 

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply