Exercise: Developing a Multi-target application

Open the SAP Business Application Studio, open the training development space.

1. In your Web browser (for example, Google Chrome), open your SAP BTP Cockpit based on the link you received at subscription time (for example: https://cockpit.eu20.hana.ondemand.com). If requested, enter your user and password.

2. Choose the training subaccount, that you created in a previous exercise.

3. Choose Services → Instances and Subscriptions.

4. Choose SAP Business Application Studio.

5. Eventually start the training development space.

6. Once the space is running, click on training to enter the development space.

In your IDE (SAP Business Application Studio), you need to setup the two applications: app1 is the Node version and app2 is the Java version.

1. Switch to Git branch mta_v1.0_hello. You choose the branch in the left corner of the bottom bar, or you open a Terminal and run:

   Code snippet

   Copy code

   git checkout -f mta_v1.0_hello

   Expand

2. Check that the two applications are present: app1 and app2.

Review, install and run the Node.js application (Hello Node!)

1. In project explorer, go to app1 folder.

2. Review the main.js and package.json files.

3. To start the application, open a terminal window and run:

   Code snippet

   Copy code

   cd app1
   npm install
   npm run start

   Expand

4. Once the application has started, a pop up window appears stating A service is listening to port 3002. Choose Open in New Tab. A new tab is opened showing Hello Node!.

5. Return to the Studio. In the terminal, choose Ctrl + C until the program stops.

Review, build and run the Java application (Hello Java!)

1. Review the source code under app2/main/java/com/example/demo directory.

2. In the terminal execute the following commands to build the application:

   Code snippet

   Copy code

   cd ../app2
   mvn clean install -U
   mvn spring-boot:run

   Expand

3. Once the application has started, a pop up window appears stating: A service is listening to port 8080. Choose Open in New Tab. A new tab is opened showing Hello Java!.

4. Return to the Studio. In the terminal, choose Ctrl + C until the program stops.

The two applications are independent from each other and must have separate run configurations. Business Application Studio is based on Visual Studio Code, which means the same running configurations apply. Visual Studio Code keeps the running/debugging configuration in a launch.json file. This file is located under .vscode folder in the workspace (root folder of the project).

1. Choose Run → Open Configurations. The mta-intro/.vscode/launch.json file is opened.

   Note

   Running configuration file can also be reviewed here.

2. Review the two running configurations: Launch Application 1 and Launch Application 2.

Checkout now the next step branch.

cd ..
git checkout -f mta_v2.0_mta

Review the new file mta.yaml . This represents our MTA configuration for the two application projects.

Note

MTA configuration file can also be reviewed here.

Build the MTA in a .mtar archive.

1. In the Studio, choose Terminal → New Terminal

2. In the terminal, execute the following commands:

   Code snippet

   Copy code

   mbt build

   Expand

   The two module projects are built and stored in a unique file named: mta_archives/mta-intro_0.0.1.mtar

Deploy the .mtar archive to Cloud Foundry.

1. In the terminal, execute the following commands:

   Code snippet

   Copy code

   cf login
   cf deploy mta_archives/mta-intro_0.0.1.mtar

   Expand

   On log-in, you may be requested to enter your Cloud Foundry API Endpoint, email, and password.

   The archive is then deployed. The two module applications are created in Cloud Foundry.

Look for the running applications in the SAP BTP Cockpit and open them.

1. In a web browser, open your SAP BTP Cockpit based on the URL you received at subscription time (for example: https://cockpit.eu20.hana.ondemand.com. If required, enter your e-mail and password.

2. In the SAP BTP Cockpit, navigate to the training Sub-account. Navigate to the dev space.

3. Choose the mta-intro-app1 application name.

4. Choose the Application Route. The application shows Hello Node!.

5. Go back and choose the mta-intro-app2 application name.

6. Choose the Application Route. The application shows Hello Java!.

Checkout the next step branch, which covers the next part where we enhance the both applications to read environment variables.

git checkout -f mta_v3.0_variables

Review the updated launch.json file, containing the run configurations we use during development.

Note

The launch.json file can be reviewed here.

1. We remark a new property env defined for both configurations. We want each application to read the Hello! sentence from the environment variable TITLE . In order to achieve this, we added TITLE variable under env property (it applies for each configuration, remember the two configurations are independent from each other).

2. Now that we saw how TITLE environment variable was set for each application, let's see how it can be read. In the Studio, go to app1 folder and review the main.js file.

   Note

   The main.js file can be reviewed here.

   Note that Hello Node value is not hard coded anymore. The value is now read from the TITLE environment variable.

3. Review the changes from java application. Open app2/src/main/java/com/example/demo/DemoController.java file.

   Note

   The DemoController.java file can be reviewed here.

   Note that Hello Java! value is not hard coded anymore. The value is now read from the TITLE environment variable.

4. Build the app2, running the following commands in a terminal:

   Code snippet

   Copy code

   cd app2
   mvn clean install -U

   Expand

5. In the Studio, in the Run and Debug window, launch the two applications using the corresponding run configurations (they can run in parallel as the ports are different for each app). Verify that the titles appear correctly at run time. Note the browser URL of both applications. Stop the execution.

   Note

   Sometimes we experienced issues when the Node.js application is started due to the port 3002 being busy after the previous run. In this case, consider closing and restarting the Studio development space.

The variables from launch.json are local to the development environment, which means they will not be resolved when the application is deployed. In order to define variables that can be resolved by the CF deploy application, we need to declare them in mta.yaml file. Open the file and review the new properties field under each module. It contains the TITLE variable as a property. Build and deploy the application.

Note

The mta.yaml file can be reviewed here.

1. Build and deploy the application running the following commands in the project root folder:

   Code snippet

   Copy code

   mbt build
   cf deploy mta_archives/mta-intro_0.0.1.mtar

   Expand

   If there are any issues, log in to Cloud Foundry again.

Look for the running applications in the SAP BTP Cockpit and open them. Verify that the TITLE variable appears in the User-Provided Variables for both apps.

1. In the SAP BTP Cockpit, navigate to the dev space.

2. Choose the mta-intro-app1 application name.

3. Choose User-Provided Variables and verify that the TITLE variable is created.

4. Choose Overview, choose the Application Route. The application displays: Hello Node!.

5. Repeat the same steps for the mta-intro-app2 application.

This task enhances each application to provide navigation to the other application. Checkout the next step branch.

git checkout mta_v4.0_formulas

Open and review the updated launch.json file

Note

The launch.json file can be reviewed here.

The title of each application can be the hyperlink that references the other application. Remark that launch.json file was enhanced with the new variables for both apps (we use the names A1URL and A2URL). Replace these values with the corresponding URLs exposed by Studio for your running applications. Check that the applications run successfully.

Note

If you don't use Business Studio Application and use local environment, please note that the protocol is mandatory to be set. Example: localhost:8080 is not enough, you need to also add the http protocol. Example:

Code snippet

Copy code

"A2URL": "http://localhost:8080"

Expand

1. Open app1 folder and check the changes from main.js file.

   Note

   The main.js file can be reviewed here.

   Review how a2url value is set from the environment variable. The page content includes now a hyperlink that points to the value set in the a2url variable.

2. Open app2/src/main/java/com/example/demo/DemoController.java file.

   Note

   The DemoController.java file can be reviewed here.

   Review how a1url value is set from the environment variable. The page content includes now a hyperlink that points to the value set in the a1url variable.

3. Build the app2, running the following commands in a terminal:

   Code snippet

   Copy code

   cd app2
   mvn clean install -U

   Expand

4. In Studio, in the Run and Debug window, run the applications in parallel using the corresponding run configurations. Verify that the hyperlinks appear correctly at run time. Stop the execution.

Each application link is determined at deploy time, so it needs to be stored in an environment variable so that it can be resolved during deployment. As we already saw, the static variables are defined in launch.json file, but the variables to be resolved at deploy time need to be set in mta.yaml file configuration. Open mta.yaml file .

Note

The mta.yaml file can be reviewed here.

1. Review the definition of A1URL and A2URL . Remark that the values are not static anymore and will be dynamically resolved at deploy time.

2. Build and deploy the application using the following commands:

   Code snippet

   Copy code

   mbt build
   cf deploy mta_archives/mta-intro_0.0.1.mtar

   Expand

   In case anything goes wrong, log in to Cloud Foundry again.

Look for the running applications in the SAP BTP Cockpit and open them. Verify that the A1URL and A2URL variables appear in the User-Provided Variables with proper values.

1. In the SAP BTP Cockpit, navigate to the dev space.

2. Choose the mta-intro-app1 application name.

3. Choose User-Provided Variables and verify that the A2URL variable is created.

4. Choose Overview → Application Route. The application shows Hello Node!. Then it shows a link Navigate to Application 2. If you click on the link, the Hello Java!application displays.

5. Repeat the same steps for the mta-intro-app2 application.