Deploy your first application to Application Frontend using CLI

Option 1 - Create SAP Business Application Studio Dev Space:

Option 2 - Install Application Frontend CLI locally

Before you start, make sure you have the required tools installed locally.

1. Verify that Node.js (version ≥ 22.6.0) is installed:

node --version

Note: If you don’t have Node.js installed, download it from nodejs.org.

npm install -g @sap/appfront-cli

afctl

You should see the current CLI version printed in your terminal.

1. Navigate to your BTP Cockpit subaccount with Application Frontend Service subscription.
2. Go to Services > Instances and Subscriptions.
3. In the Subscriptions table, click on Application Frontend Service.
4. Copy the URI from the Application Frontend CLI section.
5. Open your terminal (command line) on your local machine.
6. Run the following command to log in to Application Frontend Service using the CLI. Replace <URI> with your copied one.

afctl login --sso --api '<URI>'

Tip: You can see all supported login options using afctl login --help

afctl config

1. Create a directory named hello-world.
   This will be your application root directory.
2. Change your working directory to it:

cd <path_to_hello_world>

afctl init

<html>
<head>
   <style>
      body {
         display: grid;
         place-content: center;
         position: absolute;
         inset: 0;
      }
   </style>
</head>
<body>
   <h1>Hello World!</h1>
</body>
</html>

{
   "welcomeFile": "/index.html",
   "routes": [{
      "source": ".*",
      "service": "app-front"
   }]
}

afctl push

afctl list

Application Frontend Service supports multiple versions of the same app to be deployed and accessed simultaneously. This allows previewing new versions before activation and publication under the main URL.

Let’s update and redeploy your app to see this in action.

1. Update xs-app.json to add a new route that returns JSON with logged-in user details:

{
   "welcomeFile": "/index.html",
   "routes": [{
      "source": "^/user-api/currentUser$",
      "service": "sap-approuter-userapi"
   }, {
      "source": ".*",
      "service": "app-front"
   }]
}

Route order matters — Application Frontend processes routes sequentially and uses the first match.

<html>
<head>
   <style>
      body {
         display: grid;
         place-content: center;
         position: absolute;
         inset: 0;
      }
   </style>
</head>
<body>
   <h1>Loading...</h1>
   <script>
      fetch('./user-api/currentUser', { credentials: 'include' })
         .then(res => res.json())
         .then(user => {
               const h1 = document.querySelector('h1');
               h1.textContent = `Hello, ${user.firstname}!`;
         });
   </script>
</body>
</html>

{
   "sap.app": {
      "id": "hello-world",
      "applicationVersion": {
         "version": "2.0.0"
      }
   }
}

afctl push -n

afctl list hello-world

You’ll see:

• One main application URL (stable, never changes)
• Multiple version-specific URLs for each version

afctl activate hello-world 2.0.0

Congratulations! You successfully finished the Hello World Application Frontend exercise.