Description
Create a simple Node.js project and a simple Java project. Pack them in a unique MTA. Include some simple environment variables. Build and deploy the application to Cloud Foundry.
Prerequisites
For the complete execution of current exercise, you must execute the following other exercise first:
Creating your Pay-As-You-Go Account in SAP BTP
As development environment, this exercise uses the SAP Business Application Studio. In case the studio is not available for any reason, you can execute the same steps locally, using Visual Studio Code. This will require minimal intuitive differences in the environment usage, and no difference in the source code.
Information for execution
The exercise comes with an archive file:
mta-intro-solution.zip
[download] contains the MTA project in its final status after the correct execution of the exercise. This project can be used to clarify the correct solution or to copy and paste parts of the source code.
In the case you wish to build and deploy the application to Cloud Foundry directly without going through the exercise steps, then complete the following actions (this is not a prerequisite to exercise execution):
- Extract the archive to a workspace in the SAP Business Application Studio.
- Open a terminal window and change the directory to the project root folder.
- Execute the following sequence of commands:
Task 1: Create the MTA Project and Modules
Steps
Open the SAP Business Application Studio, open the training development space.
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.
Choose the training subaccount, that you created in a previous exercise.
Choose Services → Instances and Subscriptions.
Choose SAP Business Application Studio.
Eventually start the training development space.
Once the space is running, click on training to enter the development space.
In the
projects
folder, create a sub-folder calledmta-intro
. Open it as a current workspace.Choose File → Open Workspace... (Ctrl+Alt+W), choose the
projects
folder and choose Open.In the
projects
folder, create a sub-folder calledmta-intro
.Choose File → Open Workspace... (Ctrl+Alt+W), choose the
projects/mta-intro
folder and choose Open.
In the
mta-intro
folder, create a sub-folder calledapp1
. Upload the Node.js application (Hello Node!) provided in themta-intro-js-hello.zip
file [download]. Review and run the application in the studio.In the
mta-intro
folder, create a sub-folder calledapp1
.Drag the
mta-intro-js-hello.zip
file [download] from its original folder (in Windows) and drop it on the app1 folder in the Studio.Right-click on the
app1
folder, choose Open in TerminalIn the terminal execute the following commands:
Install the application, running the following commands in the terminal:
Open the
main.js
file. Review the simple Node.js code.Open the
package.json
file. Click on the > Debug control just before the scripts definition and execute thestart:debug
script.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 showingHello Node!
.Return to the Studio. Choose Stop multiple times until the debugger stops.
Close the JavaScript Debug Terminal window.
In the Web browser, access the https://start.spring.io website, then generate and download a Spring Boot application based on the following information:
Setting Value Project Maven Project Language Java Spring Boot leave the default (currently 2.6.4) Project Metadata leave the defaults Packaging War Java 8 Dependencies Spring Web In your Web browser, open https://start.spring.io.
Choose the settings as described in the provided table.
Choose Generate. A file named
demo.zip
is downloaded.
Note
If have encounter issues with the https://start.spring.io website, provide the file with the name:mta-intro-java-demo.zip
[download]. Rename it todemo.zip
and continue the exercise.Note
We recently verified the following issue in the https://start.spring.io site: even if you request an application based on Java 8, you get an application based on Java 17. Till this problem is not solved, we recommend you use the application version in themta-intro-java-demo.zip
archive.In the Studio, in the
mta-intro
folder, upload the Java application provided in thedemo.zip
file. Rename the application project folder fromdemo
toapp2
. Review, build and run the application.Drag the
demo.zip
file from its original folder (in Windows) and drop it on themta-intro
folder in the Studio.Choose Terminal → New Terminal
In the terminal execute the following commands to unzip the archive:
Rename the extracted
demo
folder toapp2
.In the terminal execute the following commands to build the application:
Navigate to
app2/src/main/java/com/example/demo/DemoApplication.java
.Wait a few seconds till the file is analyzed, then choose the Debug control that appears before the
main
method.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 theWhitelabel Error Page
. This is an expected Spring Boot error, since the application has no controller method for the/
path.Return to the Studio. Choose Stop and the debugger stops.
In the Java application, create a rest controller class named
DemoController
, returningHello Java!
when opening the application with the Web browser.Create a new file
app2/src/main/java/com/example/demo/DemoController.java
containing the following code:You can copy the previous code from theCode snippetCopy codepackage com.example.demo; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class DemoController { @GetMapping("/") public String hello() { String page = "<!DOCTYPE html><html><body>" + "<h1>Hello Java!</h1>" + "</body></html>"; return String.format(page); } }
mta-intro-01-democontroller-java.txt
file [download].Re-build the application, then re-run the
main
method of the application. This timeHello Java!
appears.Return to the Studio. Choose Stop and the debugger stops.
Create two run configurations for the two module applications, called Launch Application 1 and Launch Application 2
Choose Run → Open Configurations → Java. The
mta-intro/.vscode/launch.json
file is opened.Replace the full content of the file with the following content:
You can copy the previous code from theCode snippetCopy code{ "version": "0.2.0", "configurations": [ { "name": "Launch Application 1", "type": "pwa-node", "program": "${workspaceFolder}/app1/main.js", "request": "launch", "skipFiles": [ "<node_internals>/**" ] }, { "name": "Launch Application 2", "type": "java", "request": "launch", "mainClass": "com.example.demo.DemoApplication", "projectName": "demo" } ] }
mta-intro-02-launch-json.txt
file [download] .
Create a MTA, including the two previous application projects. Use the following application names:
- Name of the overall MTA:
mta-intro
- Name of the Node.js module:
mta-intro-app1
- Name of the Java module:
mta-intro-app2
In the
mta-intro
folder, create a file with namemta.yaml
containing the following code:You can copy the previous code from theCode snippetCopy codeID: mta-intro _schema-version: '3.1' version: 0.0.1 modules: - name: mta-intro-app1 type: nodejs path: app1 - name: mta-intro-app2 type: java path: app2
mta-intro-03-mta-yaml.txt
file [download].
- Name of the overall MTA:
Build the MTA in a
.mtar
archive.In the Studio, choose Terminal → New Terminal
In the terminal, execute the following commands:
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.In the terminal, execute the following commands:
On login, 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.
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.
In the SAP BTP Cockpit, navigate to the training Subaccount. Navigate to the dev space.
In Google Chrome, open the URL . If required, enter your e-mail and password.
Choose the mta-intro-app1 application name.
Choose the Application Route. The application shows
Hello Node!
.Go back and choose the mta-intro-app2 application name.
Choose the Application Route. The application shows
Hello Java!
.
Task 2: Define Environment Variables as MTA Properties
Steps
In both the module applications, enhance the program so that it reads the
Hello!
sentence from the environment variableTITLE
. Enhance thelounch.json
file including the variable for both modules. Check that the applications run successfully. Note the application runtime URLs for subsequent use.In the
app1
folder, in themain.js
file, replace the assignment of thepage
variable with the following code:You can replace the wholeCode snippetCopy codevar title = process.env.TITLE; var page = "<!DOCTYPE html><html><body>" + "<h1>" + title + "</h/p>" + "</body></html>";
main.js
content with the code in themta-intro-04-main-js.txt
file [download] .In the
app2/src/main/java/com/example/demo/DemoController.java
file, replace the assignment of thepage
variable with the following code:You can replace the entireCode snippetCopy codeString title = System.getenv("TITLE"); String page = "<!DOCTYPE html><html><body>" + "<h1>" + title + "</h1p>" + "</body></html>";
DemoController.java
content with the code in themta-intro-05-democontroller-java.txt
file [download] .In the
.vscode/launch.json
file, include the definition of the TITLE variable in both configurations, as shown in the following code:You can replace the entirelaunch.json
content with the code in themta-intro-06-launch-json.txt
file [download].In the Studio, in the Debug window, run the two applications using the corresponding run configurations (they can run in parallel). Verify that the titles appear correctly at run time. Note the browser URL of both applications. Stop the execution.
Note
Sometimes we experienced be 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.Note
Recently we experienced an issue the java application not being automatically re-built before execution. To manually re-build the Java application, right click on the app2 folder, choose Open in Terminal. In the terminal run the following command:
In the
mta.yaml
file, define theTITLE
variable as a property of the two modules. Build and deploy the application.In the
mta.yaml
file, include the definition of the TITLE variable in both module definitions, as shown in the following code:You can replace the wholemta.yaml
content with the code in themta-intro-07-mta-yaml.txt
file [download] .Build and deploy the application using the following commands:
If there are any issues, login 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.
In the SAP BTP Cockpit, navigate to the dev space.
Choose the mta-intro-app1 application name.
Choose User-Provided Variables and verify that the TITLE variable is created.
Choose Overview, choose the Application Route. The application displays:
Hello Node!
.Repeat the same steps for the mta-intro-app2 application.
Task 3: Define Module Dependencies and Exchange Variables
Steps
In both the module applications, enhance the program so that a hyperlink appears under the title, referencing to the other application. As this link is determined at deploy time, you need to store it in an environment variable so that you can populate it during deployment. Enhance the
lounch.json
file including variables for both modules (use names A1URL and A2URL). Check that the applications run successfully.In the
app1
folder, in themain.js
file, replace the assignment of thepage
variable with the following code:You can replace the entireCode snippetCopy codevar title = process.env.TITLE; var a2url = process.env.A2URL; var page = "<!DOCTYPE html><html><body>" + "<h1>" + title + "</h1>" + "<p>Navigate to <a href=\"" + a2url + "\">Application 2</a></p>" + "</body></html>";
main.js
content with the code in themta-intro-08-main-js.txt
file [download] .In the
app2/src/main/java/com/example/demo/DemoController.java
file, replace the assignment of thepage
variable with the following code:You can replace the entireCode snippetCopy codeString title = System.getenv("TITLE"); String a1url = System.getenv("A1URL"); String page = "<!DOCTYPE html><html><body>" + "<h1>" + title + "</h1>" + "<p>Navigate to <a href=\"" + a1url + "\">Application 1</a></p>" + "</body></html>";
DemoController.java
content with the code in themta-intro-09-democontroller-java.txt
file [download] .In the
.vscode/launch.json
file, include the definition of the A1URL and A2URL variable in the proper configurations. Enter the values you noted previously. See an example below of how it will display (your actual URLs will be different):You can replace the entireCode snippetCopy code{ "version": "0.2.0", "configurations": [ { "name": "Launch Application 1", "type": "pwa-node", "program": "${workspaceFolder}/app1/main.js", "request": "launch", "skipFiles": [ "<node_internals>/**" ], "env": { "TITLE": "Hello Node!", "A2URL": "https://9c235a74trial-workspaces-ws-ld7zh-app3.eu10.trial.applicationstudio.cloud.sap/" } }, { "name": "Launch Application 2", "type": "java", "request": "launch", "mainClass": "com.example.demo.DemoApplication", "projectName": "demo", "env": { "TITLE": "Hello Java!", "A1URL": "https://9c235a74trial-workspaces-ws-ld7zh-app2.eu10.trial.applicationstudio.cloud.sap/" } } ] }
launch.json
content with the code in themta-intro-10-launch-json.txt
file [download] (replace the URLs with your actual values).In the Studio, in the Debug window, run the applications in parallel using the corresponding run configurations. Verify that the hyperlinks appear correctly at run time. Stop the execution.
Note
Recently we experienced an issue the java application not being automatically re-built before execution. To manually re-build the Java application, right click on the app2 folder, choose Open in Terminal. In the terminal run the following command:
In the
mta.yaml
file, define theA1URL
andA2URL
variables as properties. Populate them with deploy time URL values provided by the relative module. Build and deploy the application.In the
mta.yaml
file, include the definition of the A1URL and A2URL variables, as shown in the following code:You can replace the entireCode snippetCopy codeID: mta-intro _schema-version: '3.1' version: 0.0.1 modules: - name: mta-intro-app1 type: nodejs path: app1 requires: - name: app2-provided provides: - name: app1-provided properties: url: ${default-url} properties: TITLE: "Hello Node!" A2URL: ~{app2-provided/url} - name: mta-intro-app2 type: java path: app2 requires: - name: app1-provided provides: - name: app2-provided properties: url: ${default-url} properties: TITLE: "Hello Java!" A1URL: ~{app1-provided/url}
mta.yaml
content with the code in themta-intro-11-mta-yaml.txt
file [download].Build and deploy the application using the following commands:
In case anything goes wrong, login 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.
In the SAP BTP Cockpit, navigate to the dev space.
Choose the mta-intro-app1 application name.
Choose User-Provided Variables and verify that the A2URL variable is created.
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.Repeat the same steps for the mta-intro-app2 application.