Create a simpleHello, World application using TypeScript and the NestJS framework. Deploy the application to Cloud Foundry. Debug it remotely from Business Application Studio.
Prerequisites
For the complete execution of current exercise, you must execute the following activities first, using SAP Business Application Studio:
- Execute the previous exercise Creating your free trial account in SAP BTP.
- Open SAP Business Application Studio, open the training workspace you created in the previous exercise.
- Choose File → Open Folder and open the /home/user/projects folder.
Steps
Install Nest.js and create a new application named ts-hello-world.
In the terminal, execute the following commands:
Provide the following answers to the questions you are asked during the creation process:Code SnippetCopy codeSwitch to dark mode123npm install -g @nestjs/cli cd ~/projects nest new ts-hello-worldQuestion Answer Which package manager would you like to use? npm Wait till the initial application is created.
Open the projects/ts-hello-world folder as a workspace.
Choose File → Open Folder..., choose the projects/ts-hello-world folder and choose OK.
Review the main project files.
Review the following files:
- The package.json file: containing project dependencies on external node packages.
- All the files in the src folder: containing the TypeScript application, based on the NestJS framework.
By default, the application uses port 3000, this won't work in SAP Business Application Studio. Change the application port to 3002.
In the src/main.ts file, replace the 3000 with 3002.
Build the application, then run it in debug mode.
In the terminal, run:
Code SnippetCopy codeSwitch to dark mode12npm install npm run buildThe TypeScript files are converted to JavaScript and stored in the dist folder.
Navigate to the src/main.ts file.
Choose Run → Start Debugging (F5). Select Node if prompted for a debug option. Wait till a pop-up window appears: A service is listening to port 3002. Choose Open in New Tab. A new tab is opened in the browser, showing Hello World!.
Open the src/app.controller.ts file and set a break point at line 10. Refresh the application page and verify that the execution stops at the break point.
In the Explorer tab, open the src/app.controller.ts file and click on the border of the editor window, on the left side of the line number 10. A red dot appears.
Switch back to the application tab (containing Hello World!) and refresh the browser window.
The program execution stops at the break point.
Choose Continue (F5). The program execution continues and Hello World! appears in the application tab.
Remove the breakpoint from file src/app.controller.ts.
Stop the application execution by choosing the red square (Stop).
Adapt the project for deployment to Cloud Foundry.
Open the src/main.ts file.
Find this line:
Code SnippetCopy codeSwitch to dark mode1await app.listen(3002);and replace it with the following line:
Code SnippetCopy codeSwitch to dark mode1await app.listen( process.env.PORT || 3002 );In the root project folder, create a new file with name manifest.yml, containing the following text.
Being a yaml file, pay attention that proper vertical alignment is preserved. For example, words name, path, buildpacks, memory, …, need to start at the same horizontal character.Code SnippetCopy codeSwitch to dark mode12345678applications: - name: ts-hello-world path: ./ buildpacks: - nodejs_buildpack memory: 1024M command: npm run start:prod random-route: trueIn the root project folder, create a new file with name .cfignore, containing the following text:
Code SnippetCopy codeSwitch to dark mode1node_modules
Login to Cloud Foundry
Make sure you have your Cloud Foundry API endpoint, user (email) and password, created in the previous exercise.
Open a terminal and run the following commands:
When requested, enter your email and your password.Code SnippetCopy codeSwitch to dark mode12cf api YOUR_API_ENDPOINT_GOES_HERE cf login
Deploy the application to Cloud Foundry.
Run the following commands in the terminal :
Code SnippetCopy codeSwitch to dark mode1234cd ~/projects/ts-hello-world npm run build cf pushThe application is uploaded to Cloud Foundry, installed and run.
At the end of the deployment process, you will get a text such as the following:
Code SnippetCopy codeSwitch to dark mode12state since cpu memory disk details #0 running 2020-04-24T17:25:03Z 66.4% 167.5M of 1G 152.4M of 1G
In the SAP BTP Cockpit, navigate to the running application and open it.
In a web browser, open your SAP BTP Cockpit based on the URL you received at subscription time (for example: https://emea.cockpit.btp.cloud.sap. If required, enter your e-mail and password.
In the SAP BTP Cockpit, navigate to the space where you deployed the application
Choose the ts-hello-world application name.
Click on the Application Route. The application opens and Hello World! is returned in the browser page.
In SAP Business Application Studio, create a debug configuration to attach the remote NestJS application in Cloud Foundry.
Choose Run → Add Configuration → Node.js. The launch.json file is opened.
Replace the whole launch.json content with the following content (the Attach Application configuration is added):
Code SnippetCopy codeSwitch to dark mode12345678910111213141516171819202122232425{ "version": "0.2.0", "configurations": [ { "name": "Launch Application", "type": "pwa-node", "request": "launch", "program": "${workspaceFolder}/dist/main", "skipFiles": [ "<node_internals>/**" ] }, { "name": "Attach Application", "type": "pwa-node", "request": "attach", "port": 9229, "localRoot": "${workspaceFolder}", "remoteRoot": "/home/vcap/app", "skipFiles": [ "<node_internals>/**" ] } ] }
Debug the remote application running in Cloud Foundry using the debugger in SAP Business Application Studio: set a break point and make execution stop at line 10 of the src/app.controller.ts file.
Open the manifest.yml file and observe the command to run the application in Cloud Foundry:
Code SnippetCopy codeSwitch to dark mode1command: npm run start:prodOpen the package.json file and search for the following line:
To enable the application for debugging, add a --inspect option in the command, so that it becomes the following:Code SnippetCopy codeSwitch to dark mode1"start:prod": "node dist/main",Code SnippetCopy codeSwitch to dark mode1"start:prod": "node --inspect dist/main",Deploy the previous change. In Visual Studio Code. In the terminal window, run:
Code SnippetCopy codeSwitch to dark mode123npm run build cf pushTo enable the application for debug, execute the following commands:
Ignore the proposal to "Open in a New Tab" the service listening to port 9229.Code SnippetCopy codeSwitch to dark mode123cf enable-ssh ts-hello-world cf restage ts-hello-world cf ssh -N -T -L 9229:localhost:9229 ts-hello-worldIn SAP Business Application Studio, in the Run and Debug window, run the Attach Application configuration. The debugger attaches to the remote application.
Open the src/app.controller.ts file and set a break point (red dot aside the line number) at line 10:
Code SnippetCopy codeSwitch to dark mode1return this.appService.getHello();Switch back to the application tab (containing Hello World!) and refresh the browser window.
The program execution stops at the break point. Switch the tab back to SAP Business Application Studio.
In the SAP Business Application Studio, choose Continue (F5). The program execution continues and Hello World! appears in the application tab.
In SAP Business Application Studio, disconnect the debugger.
In the Terminal, choose Ctrl + C and terminate the cf ssh command.