Exercise: 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.

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

   1. In the terminal, execute the following commands:

      Code Snippet

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      123
      npm install -g @nestjs/cli
      cd ~/projects
      nest new ts-hello-world

      Provide the following answers to the questions you are asked during the creation process:

      Question	Answer
      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 File → Open 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

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      12
      npm install
      npm run build

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

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

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

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

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      1
      await app.listen(3002);

      and replace it with the following line:

      Code Snippet

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      1
      await app.listen( process.env.PORT || 3002 );

   2. In the root project folder, create a new file with name manifest.yml, containing the following text.

      Code Snippet

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      12345678
      applications:
        - name: ts-hello-world
          path: ./
          buildpacks:
            - nodejs_buildpack
          memory: 1024M
          command: npm run start:prod
          random-route: true

      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

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      1
      node_modules

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

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      12
      cf api YOUR_API_ENDPOINT_GOES_HERE
      cf login

      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

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      1234
      
      cd ~/projects/ts-hello-world
      npm run build
      cf push

      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

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      12
           state     since                  cpu     memory         disk           details
      #0   running   2020-04-24T17:25:03Z   66.4%   167.5M of 1G   152.4M of 1G

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 Run → Add Configuration → Node.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

       Copy code

       Copy code

       Switch to dark mode

       Switch to dark mode

       12345678910111213141516171819202122232425
       {
           "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>/**"
                   ]
               }
           ]
       }

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

       Copy code

       Copy code

       Switch to dark mode

       Switch to dark mode

       1
       command: npm run start:prod

    2. Open the package.json file and search for the following line:

       Code Snippet

       Copy code

       Copy code

       Switch to dark mode

       Switch to dark mode

       1
       "start:prod": "node dist/main",

       To enable the application for debugging, add a --inspect option in the command, so that it becomes the following:

       Code Snippet

       Copy code

       Copy code

       Switch to dark mode

       Switch to dark mode

       1
       "start:prod": "node --inspect dist/main",

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

       Code Snippet

       Copy code

       Copy code

       Switch to dark mode

       Switch to dark mode

       123
       
       npm run build
       cf push

    4. To enable the application for debug, execute the following commands:

       Code Snippet

       Copy code

       Copy code

       Switch to dark mode

       Switch to dark mode

       123
       cf enable-ssh ts-hello-world
       cf restage ts-hello-world
       cf ssh -N -T -L 9229:localhost:9229 ts-hello-world

       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

       Copy code

       Copy code

       Switch to dark mode

       Switch to dark mode

       1
       return this.appService.getHello();

    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.