Build Full Stack Applications in SAP BTP Cloud Foundry as Multi Target Applications (MTA)

[mohanasundaram_ganesan]

This blog describes how to build and deploy full stack applications built on Angular and Node platforms in the SAP BTP Cloud Foundry platform without rewriting any functional logic in the code setup.

For this blog, let us take an example of 2 applications: one targeted to work in browsers as web applications and the other targeted to host it as REST APIs.

1. Web App: Angular application for migrating the UI/UX layer of the application
2. REST APIs: NodeJS application for the API layer.

This explains how the integration from the Web App makes HTTP requests to the REST API work in the SAP BTP HTML5 Repository and Cloud Foundry Space.

To begin, let us assume we have a development workspace in the SAP Business Application Studio, which comes with pre-installed node dependencies. Please ensure that your dev space in SAP BAS is created for Full Stack Cloud development.

Step 1: Creation of New MTA project.

Begin by selecting “New Project from Template” in BAS. Choose the template named “Basic Multitarget Application” and proceed to the next step.

In the second wizard step, designate a project name; for example, let’s name it “mta-supplierportal”. Now, proceed to complete the creation of the new multitarget application in the BAS workspace.

Upon completion, you will find the project created in your file system folder, containing files such as .gitignore and mta.yaml.

Create two new files within this folder: “package.json” and “xs-security.json” and add the following content to it:

Next, open the terminal and navigate  to the folder “mta-supplierportal” within your BAS. Run “npm install” to set up the node_modules dependencies for your MTA application.

Step 2: Setting Up NodeJS REST API application in your MTA architecture

Begin by creating a new folder named “mta-supplierportal-api” in the root folder where your mta.yaml file is located.

Inside the “mta-supplierportal-api” folder, create 2 new files: “package.json” and “index.js” and add the below content to it:

Then, open the terminal within your BAS and navigate to the "mta-supplierportal/mta-supplierportal-api" folder. Run “npm install” to set up node_modules dependencies for your REST APIs.

Step 3: Adding your REST API (NodeJS application) definition to “mta.yaml”

Overwrite the content in “mta.yaml” file with the following to add the definition of your API application as part of your MTA application:

Step 4: Creating Angular Application in your MTA Architecture

Follow the steps below to create an Angular application and integrate it into your MTA architecture:

Install Angular CLI by running the command “npm install –g ng” in the terminal. Navigate to the "mta-supplierportal" folder in the terminal and create a new Angular application using the command “ng new mta-supplierportal-ui”. Choose “CSS” for stylesheet format and “N” for “Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?”

Now a new folder named “mta-supplierportal-ui”containing the Angular app files is created.

Add a new file called “manifest.json” in the folder  “mta-supplierportal-ui” and add the below content. Adding this file will allow your MTA compiler to determine your angular application as part of your MTA modules.

Add a new file called “xs-app.json” in the folder “mta-supplierportal-ui” and add the below content. Adding this file will create a route for both the Angular app and the REST API (NodeJS) app.

It also configures the endpoint for Angular to communicate with the REST APIs using the BTP destination named "mta-supplierportal-srv".

 Once after Angular app setup is complete, we will define a destination in the BTP sub account with the name “mta-supplierportal-srv”.

Please note that in the above routes, the parameter “authenticationType” is defined as “xsuaa” for the Angular application. It means that your Angular application will be authenticated using the SAP BTP login mechanism. However, for this blog, authentication for REST API routes has been disabled, with “authenticationType” as “none”. You can replace “none” to “xsuaa” according to your requirements.

Open the “package.json” file in the folder “mta-supplierportal-ui” and add the below node modules under “devDependencies”

Then navigate to the “mta-supplierportal-ui” folder in the terminal and  run the command “npm install” to install these dependencies.

Open “package.json” file in the folder “mta-supplierportal-ui” and

Next, let us proceed with the development part of integrating REST API in angular app. Open “app.component.ts” and “app.component.html” files in BAS and replace the content as follows:

Step 5: Adding your Angular application definition to “mta.yaml”

Add below content at the end of the “mta.yaml” file to include the definition of your HTML5 artifacts as part of your MTA application:

Step 6: Building and Deploying your MTA Application

To build your MTA app, right-click the “mta.yaml” file and select “Build MTA Project”.  This action will create a new directory named "mta_archives" containing the ".mtar" file, named as "mta-supplierportal_0.0.1.mtar".

To deploy your MTA app, right-click the “mta-supplierportal_0.0.1.mtar” file and select “Deploy MTA Archive” option to start the deployment process.

 During this process, you need to provide your BTP credentials as an authenticated user of the SAP BTP Subaccount. Additionally, you need to select the Cloud Foundry space where you intend to deploy your applications.

As a result, you can see both the apps are deployed. Your REST API (NodeJS) App is deployed in Cloud Foundry Space, as shown below:

Final Mandatory Step in creating Destination!

Now, copy the URL displayed under “Application Routes”. Navigate to “Destinations” under “Connectivity” in your BTP sub-account and create a destination with this URL. Ensure that the Name property matches the format as below:

Name: mta-supplierportal-srv
Type: HTTP
URL: <<URL copied in above screen>>
Proxy Type: Internet
Authentication: NoAuthentication

Next, you will find your Angular application deployed in the HTML5 Applications of your BTP Sub-account as shown below:

Finally, its time to see the result of entire process outlined above. You can click on the link “mtasupplierportalui”on the screen to access the application portal. You have to log in with your BTP credentials to view the output as depicted below:

Hope you found this blog useful! Please send your comments or queries to ganesan.mohanasundaram@applexus.com

Thanks for following.