Deploy your first application to Application Frontend using CLI
Learn how to create and deploy your first "Hello World" application using Application Frontend Service and the afctl CLI, including version management basics.
Overview
You will learn
- How to log in to Application Frontend Service using the CLI.
- How to create, deploy, and manage a simple “Hello World” application.
- Understand how application versions work in Application Frontend.
- Activate and manage different application versions using
afctl.
Prerequisites
Prerequisites
- SAP Business Technology Platform subaccount
- Cloud Foundry environment enabled in subaccount
- Subscription to Application Frontend service
- Subscription to SAP Business Application Studio
Steps
Option 1 - Create SAP Business Application Studio Dev Space:
MyDevSpace).
Option 2 - Install Application Frontend CLI locally
Before you start, make sure you have the required tools installed locally.
- Verify that Node.js (version ≥ 22.6.0) is installed:
node --versionNote: If you don’t have Node.js installed, download it from nodejs.org.
afctl) globally using npm:npm install -g @sap/appfront-cliafctlYou should see the current CLI version printed in your terminal.
- Navigate to your BTP Cockpit subaccount with Application Frontend Service subscription.
- Go to Services > Instances and Subscriptions.
- In the Subscriptions table, click on Application Frontend Service.
- Copy the URI from the Application Frontend CLI section.
- Open your terminal (command line) on your local machine.
- 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
- Create a directory named
hello-world.
This will be your application root directory. - Change your working directory to it:
cd <path_to_hello_world>afctl initTip: Use the `-f` flag to skip prompts and initialize with default name and version.
Example: afctl init -f
This creates:
manifest.json — contains application name and versionxs-app.json — routing configurationindex.html file with the following content:<html>
<head>
<style>
body {
display: grid;
place-content: center;
position: absolute;
inset: 0;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>xs-app.json to set the welcome file to /index.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.
- Update
xs-app.jsonto 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.
index.html to fetch and display the current user's first name:<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>manifest.json to bump the version:{
"sap.app": {
"id": "hello-world",
"applicationVersion": {
"version": "2.0.0"
}
}
}afctl push -nafctl list hello-worldYou’ll see:
- One main application URL (stable, never changes)
- Multiple version-specific URLs for each version
2.0.0:afctl activate hello-world 2.0.0Congratulations! You successfully finished the Hello World Application Frontend exercise.
Resources
Discussion
Share feedback on this tutorial or join the conversation in SAP Community.