Question Re: Deploy Typescript-SAPUI5 Application to BTP in Technology Q&A

Deploy Typescript-SAPUI5 Application to BTP

lukasmetzger — Mon, 19 Aug 2024 14:29:13 GMT

Hello everyone,

I am trying to deploy a SAPUI5 (Fiori) Application to the Business Technology Platform. The Application was built with Typescript, will be deployed via the managed approuter and does not contain a CAP-Service.

For a SAPUI5 Application that uses Javascript, I used a combination of the following commands:

from the package.json

mbt build --mtar <projectname>.mtar && cf deploy mta_archives/<projectname>.mtar --abort-on-error --retries 0

from the mta.yaml

[...] commands: - npm install - npm run build:cf [...]

This resulted in a build version of the app beeing created in the /dist-folder, containing a zipped file <applicationname>.zip, that is created via the custom Task: ui5-task-zipper defined in the ui5.yaml. As part of the deployment process, this file is copied to the /resources-folder and from there deployed to the BTP.

Now with Typescript:

I am using the same command in the package.json. But with the following ones in the mta.yaml:

[...] commands: - npm install - ui5 build --all --clean-dest [...]

This results in a correctly built typescript application in the /dist-folder, but is missing the .zip-version, because the ui5-task-zipper is not executed from the ui5.yaml. (So obviously no file can be copied to the resources-folder)

If I now add the configuration from the ui5.yaml by adapting the script:

[...] commands: - npm install - ui5 build --all --clean-dest --config ui5.yaml [...]

The ui5-task-zipper creates a "normal" SAPUI5-application in the /dist-folder, missing the conversion from typescript to javascript, but with a .zip-file. If this version is deployed, the application will can not be started, because it contains a Component.ts instead of a Component.js.

Can someone tell me how the correct deployment process looks like?

Thanks in advance!

Best regards,
Lukas

Re: Deploy Typescript-SAPUI5 Application to BTP

lukasmetzger — Wed, 21 Aug 2024 11:47:47 GMT

Hi,
for the people who face a similar issue. I was able to solve the described one by adding missing tasks to the ui5.yaml, so that the customTasks-section looks like this:

customTasks: - name: ui5-tooling-modules-task afterTask: replaceVersion configuration: addToNamespace: true - name: ui5-tooling-transpile-task afterTask: replaceVersion - name: ui5-task-zipper afterTask: generateCachebusterInfo configuration: archiveName: <your_projectname> additionalFiles: - xs-app.json

Best regards,
Lukas

Re: Deploy Typescript-SAPUI5 Application to BTP

ikenna-okeke — Wed, 08 Oct 2025 06:42:37 GMT

Hi Thank you this was really helpful @ lukasmetzger. Also Users should make sure to install the tooling module or the tooling transpile if you dont have them already to avoid errors using for the tooling modules: npm install ui5-tooling-modules --save-dev or the tooling transpile task using: npm install ui5-tooling-transpile --save-dev

Re: Deploy Typescript-SAPUI5 Application to BTP

ikenna_okeke — Tue, 20 Jan 2026 07:39:02 GMT

and also dont forget to do a npm i ui5-task-zipper if not already available. so in total just do a : npm i ui5-task-zipper ui5-tooling-transpile ui5-tooling-modules --save-dev