Creating and Configuring an Application Router

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

   Copy code

   
   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 module⁴:

   Code snippet

   Copy code

   
   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

   Copy code

   {
    "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.

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

   Copy code

   
   {
      "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.