Deploy Typescript-SAPUI5 Application to BTP

[lukasmetzger]

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

[lukasmetzger · Accepted solution]

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

[ikenna-okeke · Accepted solution]

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

[ikenna_okeke · Accepted solution]

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