Creating and Configuring an Application Router

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Create and configure an approuter

Create an Application Router: Exercise Overview

Scenario

You will create an application router (approuter) to route requests originating in the web browser to either the CAP service or to the UI.

Using a Standalone Application Router

For your application to run on the cloud, you need another component on top of the service and the UI. It will route the request from the web browser either to the CAP service or to the provider of the UI sources. This component also ensures that authenticated and authorized users get a token from the XSUAA service, which is also routed to the CAP service.

This component is called an "application router" (approuter). "The application router is the single point-of-entry for an application running in the Cloud Foundry environment on SAP BTP. The application router is used to serve static content, authenticate users, rewrite URLs, and forward or proxy requests to other microservices while propagating user information."1.

You can either have a standalone approuter or a managed approuter2. In this module, you are going to use the standalone approuter, because it does not lead to other service dependencies. The managed approuter is part of other SAP BTP services like the SAP Launchpad Service or the SAP Portal Service. Checkout this blog3 for more detailed information on the managed approuter versus the standalone approuter.

Task Flow

In this exercise, you will perform the following tasks:

  • Create a standalone approuter.
  • Configure an approuter using a JSON file.

Prerequisite

You have set up SAP authorization and trust management (XSUAA).

Watch the Simulation and/or Perform the Steps

Note
In this exercise you find a simulation and a list of all steps, displayed in the simulation. Performing the steps below allows you to follow the simulation in your own trial account.

Create an Application Router

Prerequisites

Task 1: Create a Standalone Approuter

Steps

  1. Create a standalone approuter.

    1. Using a terminal in BAS, create a folder approuter, where you store all approuter artifacts, and switch to the new folder:

      Code snippet
      
      mkdir approuter
      cd approuter
      Copy code
      Note
      You could have completed this step in the BAS file explorer instead of the terminal. However, since we will need a command line interface in the folder in the next step, we decided to use the terminal for creating the folder.
    2. In the terminal of the new approuter folder, initialize npm and install the latest version of approuter NPM module4:

      Code snippet
      
      npm init --yes
      npm install @sap/approuter
      Copy code

      The functionality of the approuter is provided by the @sap/approuter NPM module.

    3. Check the required Node.js version for approuter.

      This is declared in the package.json file of the approuter. You can check it with this script:

      cat node_modules/@sap/approuter/package.json | grep '"node"'

      It outputs something like:

      "node": "^12.0.0 || ^14.0.0"

      In this example, the approuter supports Node.js 12.x.x and 14.x.x versions.

    4. Add the required Node.js version to the approuter/package.json file. This depends on the supported versions of the approuter, ^14.0.0 in this example. Also add the start script for the approuter.

      Code snippet
      {
       "name": "approuter",
       ...
       "scripts": {
       //### BEGIN OF DELETE
         "test": "echo \"Error: no test specified\" && exit 1"
       //### END OF DELETE
       //### BEGIN OF INSERT
         "start": "node node_modules/@sap/approuter/approuter.js"
       //### END OF INSERT
       },
       ...
       "dependencies": {
         "@sap/approuter": "^8.5.5"
       //### BEGIN OF DELETE
       }
       //### END OF DELETE
       //### BEGIN OF INSERT
       },
       "engines": {
          "node": "^14.0.0"
       }
       //### END OF INSERT
       }
      Copy code
    5. Save the file.

Task 2: Configure an Approuter Using a JSON File

Steps

  1. Configure the approuter by creating a file.

    1. Configure the approuter by creating a file xs-app.json in the approuter folder with the following content:

      Code snippet
      
      {
         "welcomeFile": "/app/risks/webapp/index.html",
         "authenticationMethod": "route",
         "sessionTimeout": 30,
         "logout": {
           "logoutEndpoint": "/do/logout",
           "logoutPage": "/"
         },
         "routes": [
           {
             "source": "^/app/(.*)$",
             "target": "$1",
             "localDir": "resources",
             "authenticationType": "xsuaa"
           },
           {
             "source": "^/service/(.*)$",
             "destination": "srv-binding",
             "authenticationType": "xsuaa"
           }
         ]
       }
      Copy code

      The configuration in the routes array tells the approuter how to respond to requests.

      • The files in the resources folder will be served for all requests to /app. Later, there’s an explanation on how you get the "app" files into this resource folder.
      • All requests starting with /service will be forwarded to the CAP service based on the URL we configured in the MTA using the destination srv_app. Remember, the risk service is reachable via /service/risk. Further services are automatically routed as long as they start with /service/ as well.

      Further, the approuter will automatically redirect to the /app/launchpage.html when accessed without a path, which will then serve the file resources/launchpage.html.

Result

You added an approuter to your application. In the next step, you will add the UI application to your project.

Reference Links: Creating and Configuring an Approuter

For your convenience this section contains the external references in this lesson.

If links are used multiple times within the text, only the first location is mentioned in the reference table.

Reference Links: Application Router

Ref#SectionContext text fragmentBrief descriptionLink
1Using Standalone Application RouterThis component is called "application router" (approuter)Approuterhttps://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/LATEST/en-US/01c5f9ba7d6847aaaf069d153b981b51.html
2Using Standalone Application Routerstandalone approuter or a managed approuterManaged approuterhttps://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/LATEST/en-US/589a2395df2d481393acb1ba2f17eeef.html
3Using Standalone Application RouterCheckout this blogManaged approuterhttps://blogs.sap.com/2021/05/17/sap-tech-bytes-faq-managed-approuter-vs.-standalone-approuter/
4Create the Approuter Moduleinstall the latest version of approuter NPM module:approuter NPM modulehttps://www.npmjs.com/package/@sap/approuter#overview

Save progress to your learning plan by logging in or creating an account