Skip to Content
Technical Articles
Author's profile photo Christophe Swolfs

CAP Typescript + Fiori Typescript + live reload Initial app setup

Hi, all,
With this blogpost I would like to document the steps that I went through in order to obtain a clean starting CAP project setup using TypeScript.

Below I will go through a series of terminal commands and some file configuration.

It might take quite some time to go through all the steps the first time around.
But once finished, you can easily copy-paste this config to your different projects.

This whole process should ideally be included into one big Yeoman generator, but for now this is how I do it manually.

Feel free to comment for any suggestions or variations on this. I’m curious to learn about the best approach myself.

Advantages / features of the this current setup:

  • CAP project is using TypeScript
  • Custom Fiori project is using TypeScript
  • Breakpoints get triggered in BAS in the CAP TypeScript files
  • Fiori TypeScript files can be viewed in the browser console for debugging
  • Live reload when updating the Fiori project

Initializing the CAP-side of the project

Getting started

Let’s get started with some initial files by running the “cds init” command.
(Make sure to do this within a previously created project folder)

cds init

Converting CAP project to TypeScript

Use the following commands to install TypeScript locally in our project and to add the TypeScript dependencies.

npm install –save-dev typescript
npm i -g typescript ts-node
npm i –save-dev @types/node

Now we can add a new file “tsconfig.json to our rootdir. To finalize our TypeScript setup.


"compilerOptions": {
   "target": "es6",
   "module": "commonjs",
   "outDir": "./gen/srv/srv",
   "rootDir": "./srv",
   "baseUrl": "./",
   "moduleResolution": "node",
   "skipLibCheck": true,
   "preserveConstEnums": true,
   "sourceMap": false,
   "allowJs": true,
   "strict": true,
   "strictNullChecks": false,
   "strictPropertyInitialization": false,
   "esModuleInterop": true
"include": [


Our project is now TypeScript ready, but it isn’t doing anything yet so let’s create a quick test service and function.


service warehouse {
   function hello (to:String) returns String;


import { Service } from "@sap/cds/apis/services";

module.exports = (warehouse: Service)=>{
      warehouse.on ('hello', req => {
      return `Hello ${} `

At this point you could already do a first CAP test, see if the TypeScript version is working with the follwing commands

Make sure everything is installed:

npm i

Run the project:

cds-ts watch

We can test our first function by going to the endpoint:


But if we want our breakpoints to work in BAS, the easiest way is to run cap via a debug configuration file.

To do so, add the config below to the list of “configurations”
in the launch file.


   "command": "cds-ts run --with-mocks --in-memory?",
   "name": "cds-ts run",
   "request": "launch",
   "type": "node-terminal",
   "skipFiles": [
   "sourceMaps": true,
   "disableNetworkCache": true,
   "showAsyncStacks": true

Great, we are done on the CAP side of things for now.

Initializing the Fiori project

So we have our CAP back-end but now we want to generate a custom Fiori front-end on top of this. We could simply use the Wizard, but this doesn’t offer any TypeScript options for now. So we are going to do it with Yeoman terminal commands instead.

Installing the necessary tools:

Go to the app folder of your  current project and run the following commands:

npm install -g yo generator-easy-ui5

Note: The command above installs Yeoman andthe eay-ui5 generator globally. You don’t need to repeat these steps each time if you installed these tools previously.
You can check whether or not the tools are installed by running “yo –generators”.
If everything is installed correctly it will display a list of available generators.


Now let’s start the actual Fiori project:

yo easy-ui5 ts-app

The Yeoman terminal wizard will be appear prompting you with some question for the creation of your project.

Be careful, if you choose to use capital letters in your namespace or application name.
This by itself is fine, but you will have to change them to lower case manually in the ui5.yaml file later.
Also notice that I didn’t opt for a git repository.
I decided to use one big Git repository for the whole CAP project (including the app folder and  thus also this Fiori sub-project.)


make sure that this is all lowercase as mentioned previously:


At this point we have a working Fiori project that can be executed with:

npm run start


Quick UI5 code-snippet so we can test our app.

I added a button to my Fiori app in order to test the CAP function that we created previously.
If you want to follow along with the same test function you can copy this setup:


<Button text="CAP test TVC" press="callCap" />


//Simple Function call to CAP
public async callCap() {
	const oContext = this.getOwnerComponent().getModel().bindContext("/hello(...)");
	oContext.setParameter("to", "test");
	await oContext.execute();
	let result = oContext.getBoundContext().getObject() as capFunctionResult;



The final part bellow will connect both apps.
We want to call our CAP function from within the Fiori and get the response from our request.

Connecting Fiori to CAP

There is no connection yet to the CAP backend though.
To fix this, we need to:

Add the following files


using from './yourFioriProjectFolder/annotations';



using warehouse as service from '../../srv/warehouse';

Update the manifest


Under “”: ==> datasource

"dataSources": {
   "mainService": {
      "uri": "/warehouse/",
      "type": "OData",
      "settings": {
         "annotations": [],
         "localUri": "localService/metadata.xml",
         "odataVersion": "4.0"

Under “sap.ui5” –> “models” ==> datasource new model

"": {
   "dataSource": "mainService",
   "preload": true,
   "settings": {
      "synchronizationMode": "None",
      "operationMode": "Server",
      "autoExpandSelect": true,
      "earlyRequests": true

But running our app at this point would give us a connection error

Fixing this local connection can be done with the fiori-tools-proxy

The command for Installing the dependency:

npm install @sap/ux-ui5-tooling –save-dev


Adding the configuration for this tooling:


server ==> customMiddleware:

- name: fiori-tools-proxy
afterMiddleware: compression
- path: /warehouse
url: http://localhost:4004


Running the final app:

We can now run the entire app but we still need to execute 2 different bash commands in 2 different instances.

  • The CAP part
    • Run the cap project via the debugger “play button
  • The Fiori app
    • Via the command “npm run start” within the Fiori project folder.

If you run into this error while executing the app:

Update the index.html


old new
src=”resources/sap-ui-core.js” src=””

Live reload when updating the Fiori project

The live reload settings below assume that your transpiled JavaScript files reside in the “webapp” folder.
But In our current setup we already have the TypeScript files in that directory

Therefore rename your “webapp” folder to “src”.

A new folder called “webapp” will be generated again once we run our TypeScript transpiler.

package.json (from the Fiori app)


"start": "ui5 serve --port 8080 -o index.html",


"start": "npm-run-all --parallel watch:ts start:ui5",
"watch:ts": "babel webapp --out-dir webapp --source-maps true --extensions \".ts,.js\" --copy-files --watch",
"start:ui5": "ui5 serve --port 8081 -o index.html",

(I renamed the original start to “start_old” as backup in case I ever need it again)

still in the same file, we need will need to declare our additional dependencies Don’t copy them manually though, we can use the npm commands mentioned below in order to get the latest up-to-date versions:

something like this will be added to the package.json:

"@babel/cli": "^7.16.8",
"@babel/core": "^7.16.7",
"@babel/preset-env": "^7.16.8",
"@babel/preset-typescript": "^7.16.7"

"npm-run-all": "^4.1.5",


The npm commands to add these last dependencies:

npm install –save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-typescript

npm install npm-run-all –save-dev


A last step, almost done 🙂

configure the live reloading in the yaml file by adding the following config under
server ==> customMiddleware:

- name: fiori-tools-appreload
afterMiddleware: compression
port: 35729
path: webapp


And finished!

Your Fiori project should automatically refresh with every change you make.

I’m still investigating options to run it all with one single command.
At this point we still need to terminal instances.

But we should have the following features as promised:

  • CAP project is using TypeScript
  • Custom Fiori project is using TypeScript
  • Breakpoints get triggered in BAS in the CAP TypeScript files
  • Fiori TypeScript files can be viewed in the browser console for debugging
  • Live reload when updating the Fiori project

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Attila Berencsi
      Attila Berencsi

      Hi Christophe Swolfs ,

      thanks for sharing this document. It really helps to connect and understand the software components and their responsibilities. As SAP is giving more and more support in Fiori Tools, I also tried to complement your TypeScript based CAP project using the experimental feature in the basic freestyle template provided by SAP.

      Do You see advantages and disadvantages using easy-ui5 vs. SAP standard experimental template ? Both seems working properly, but people tend to use easy-ui5 in the sample repositories. I found more projects with easy-ui5, maybe because it was available earlier for the crowd.

      Thank you
      Best regards






      Author's profile photo Christophe Swolfs
      Christophe Swolfs
      Blog Post Author

      Hi Attila Berencsi,

      I believe the manual approach will become obsolete.
      All of the wizards have gotten the "Enable TypeScript" option as experimental feature.

      I guess indeed it's just the fact that the manual approach was available earlier.
      I'd be happy to know if someone made a complete end-to-end flow using the new tools / wizard features