Exercise: Debugging a Nest.js application in Cloud Foundry

Objectives

After completing this lesson, you will be able to:

  • Create a Nest.js hallo application, deploy it to Cloud Foundry, execute it step-by-step attaching a remote debugger

Debugging a Nest.js application in Cloud Foundry

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:

  1. Execute the previous exercise Creating your free trial account in SAP BTP.
  2. Open SAP Business Application Studio, open the training workspace you created in the previous exercise.
  3. Choose FileOpen Folder and open the /home/user/projects folder.

Steps

  1. Install Nest.js and create a new application named ts-hello-world.

    1. In the terminal, execute the following commands:

      Code snippet
      npm install -g @nestjs/cli
      cd ~/projects
      nest new ts-hello-world
      Expand
      Provide the following answers to the questions you are asked during the creation process:
      QuestionAnswer
      Which package manager would you like to use?npm

      Wait till the initial application is created.

  2. Open the projects/ts-hello-world folder as a workspace.

    1. Choose FileOpen Folder..., choose the projects/ts-hello-world folder and choose OK.

  3. Review the main project files.

    1. 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.
  4. By default, the application uses port 3000, this won't work in SAP Business Application Studio. Change the application port to 3002.

    1. In the src/main.ts file, replace the 3000 with 3002.

  5. Build the application, then run it in debug mode.

    1. In the terminal, run:

      Code snippet
      npm install
      npm run build
      Expand

      The TypeScript files are converted to JavaScript and stored in the dist folder.

    2. Navigate to the src/main.ts file.

    3. Choose RunStart 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!.

  6. 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.

    1. 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.

    2. Switch back to the application tab (containing Hello World!) and refresh the browser window.

      The program execution stops at the break point.

    3. Choose Continue (F5). The program execution continues and Hello World! appears in the application tab.

    4. Remove the breakpoint from file src/app.controller.ts.

    5. Stop the application execution by choosing the red square (Stop).

  7. Adapt the project for deployment to Cloud Foundry.

    1. Open the src/main.ts file.

      Find this line:

      Code snippet
      await app.listen(3002);
      Expand

      and replace it with the following line:

      Code snippet
      await app.listen( process.env.PORT || 3002 );
      Expand
    2. In the root project folder, create a new file with name manifest.yml, containing the following text.

      Code snippet
      applications:
        - name: ts-hello-world
          path: ./
          buildpacks:
            - nodejs_buildpack
          memory: 1024M
          command: npm run start:prod
          random-route: true
      Expand
      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.

    3. In the root project folder, create a new file with name .cfignore, containing the following text:

      Code snippet
      node_modules
      Expand
  8. Login to Cloud Foundry

    1. Make sure you have your Cloud Foundry API endpoint, user (email) and password, created in the previous exercise.

    2. Open a terminal and run the following commands:

      Code snippet
      cf api YOUR_API_ENDPOINT_GOES_HERE
      cf login
      Expand
      When requested, enter your email and your password.

  9. Deploy the application to Cloud Foundry.

    1. Run the following commands in the terminal :

      Code snippet
      
      cd ~/projects/ts-hello-world
      npm run build
      cf push
      Expand

      The 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 snippet
           state     since                  cpu     memory         disk           details
      #0   running   2020-04-24T17:25:03Z   66.4%   167.5M of 1G   152.4M of 1G
      Expand
  10. In the SAP BTP Cockpit, navigate to the running application and open it.

    1. 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.

    2. In the SAP BTP Cockpit, navigate to the space where you deployed the application

    3. Choose the ts-hello-world application name.

    4. Click on the Application Route. The application opens and Hello World! is returned in the browser page.

  11. In SAP Business Application Studio, create a debug configuration to attach the remote NestJS application in Cloud Foundry.

    1. Choose RunAdd ConfigurationNode.js. The launch.json file is opened.

    2. Replace the whole launch.json content with the following content (the Attach Application configuration is added):

      Code snippet
      {
          "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>/**"
                  ]
              }
          ]
      }
      Expand
  12. 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.

    1. Open the manifest.yml file and observe the command to run the application in Cloud Foundry:

      Code snippet
      command: npm run start:prod
      Expand
    2. Open the package.json file and search for the following line:

      Code snippet
      "start:prod": "node dist/main",
      Expand
      To enable the application for debugging, add a --inspect option in the command, so that it becomes the following:
      Code snippet
      "start:prod": "node --inspect dist/main",
      Expand

    3. Deploy the previous change. In Visual Studio Code. In the terminal window, run:

      Code snippet
      
      npm run build
      cf push
      Expand
    4. To enable the application for debug, execute the following commands:

      Code snippet
      cf enable-ssh ts-hello-world
      cf restage ts-hello-world
      cf ssh -N -T -L 9229:localhost:9229 ts-hello-world
      Expand
      Ignore the proposal to "Open in a New Tab" the service listening to port 9229.

    5. In SAP Business Application Studio, in the Run and Debug window, run the Attach Application configuration. The debugger attaches to the remote application.

    6. Open the src/app.controller.ts file and set a break point (red dot aside the line number) at line 10:

      Code snippet
      return this.appService.getHello();
      Expand
    7. 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.

    8. In the SAP Business Application Studio, choose Continue (F5). The program execution continues and Hello World! appears in the application tab.

    9. In SAP Business Application Studio, disconnect the debugger.

    10. In the Terminal, choose Ctrl + C and terminate the cf ssh command.

Log in to track your progress & complete quizzes