The fastest way to a deployable CAP app on SAP BTP Cloud Foundry

[daniel_schlachter]

 --- Blog updated with `cds up`

So, you have developed your CAP app locally and are wondering: What's the fastest way to get this on the BTP?

Or, if you are like me, you sometimes want to try something out in a deployed version quickly.

Even if things are running smoothly in your local environment, correctly binding and bundling everything up into a working cloud app, that is connected to the database, handles authorization etc. can be cumbersome.

However, CAP has a few tools, that simplify this a lot.

For me the shortest way to get an application deployed is the following:

After logging on to cf using the cli with 

cf l --sso

I execute the following in the shell:

cds init fast_deploy
cd fast_deploy
cds add sample
cds add mta,hana,xsuaa --for production
cds add workzone
cds up

cds up requires the latest version of @SAP/cds-dk and replaces the following commands in this scenario:

npm i
npm i --prefix app/admin-books
npm i --prefix app/browse
mbt build -t gen --mtar mta.tar
cf deploy gen/mta.tar

 Given that there is a working BTP subaccount configured with the correct entitlements as well as HANA Cloud and Workzone ready, this will:

Line1: Initialise a new empty CAP project

Line3: Add a sample application with domain model, service definition and two sample Fiori apps (if you are doing this in your own project you can as well just skip those initial three lines.)

Line 4+5: Let the cds dk add all the relevant configurations and specify

• SAP HANA as the target database
• xsuaa as the identity service
• the `mta.yaml` file which describes how all of this should be deployed
• SAP BTP Workzone as the entry page holding the tiles for your Fiori apps

Line 6-8: Installing the dependencies for the CAP app and the two Fiori apps.

Line 9: Building the MTA 

Line 10: Deploying it to Cloud Foundry

So, with 10 lines in the shell, we have created an app, added all dependencies, bundled it up and deployed it to the BTP.

All that is left is to configure the app to show up on the Workzone (updating the content channel, add the apps in the content manager and assign them to a role and a group) after which you can also access the Fiori apps.

And for getting rid of the application without manually removing service keys and instances, just use the following:

cf undeploy fast_deploy --delete-services --delete-service-keys

That's it. For any developer who ever spent a few hours trying to manually adjust configurations in yaml or json files while getting a new error message after each redeployment... this should help make life easier 😀

All the best

Daniel

[MioYasutake]

@daniel_schlachter 

Thank you for sharing this. I have tried `cds add workzone` in my TypeScript-enabled application generated by Fiori tools and found that the following parts of the code need to be updated.

manifest.json: The leading "/" of the uri must be removed.

    "dataSources": {
      "mainService": {
        "uri": "odata/v4/catalog/",

ui5-deploy.yaml: ui5-tooling-transpile-task needed to be added to generate .js files.

  customTasks:
    - name: ui5-tooling-transpile-task
      afterTask: replaceVersion
      configuration:
        debug: true
        transformModulesToUI5:
          overridesToOverride: true
    - name: ui5-task-zipper
      afterTask: generateVersionInfo
      configuration:
        archiveName: books-ui
        additionalFiles:
          - xs-app.json

[daniel_schlachter]

@MioYasutake are you on the latest release of the cds-dk? You can check via `cds -v` and update e.g. via `npm i -g @sap/cds-dk`. I think the first issue with the leading slash has been fixed already and everything is generated correctly now. Let me know if that works!

[Willem_Pardaens]

@MioYasutake out of curiosity, did you also try to see if the CDS Typescript commands would have given you a more fitting outcome: `cds-ts add workzone`?

[MioYasutake]

@daniel_schlachter 

Thank you for your reply. I have updated the cds-dk and now, the global version is 8.7.2.

I've learned that the leading slashes are removed during the build if the following parameter is specified in mta.yaml:

parameters:
  deploy_mode: html5-repo

Although the parameter is there, the manifest.json in the dist folder still contains a leading slash.

Update:

When I add the deploy config using the "Add Deploy Config" menu, the ui5-deploy.yaml file gets the following configuration:

  customTasks:
    - name: webide-extension-task-updateManifestJson
      afterTask: replaceVersion
      configuration:
        appFolder: webapp
        destDir: dist  

The task "webide-extension-task-updateManifestJson" removes the leading slash from the URL during the build. On the other hand, "cds add workzone" does not add this task, and therefore, the leading slash needs to be removed manually.

[MioYasutake]

@Willem_Pardaens 
Thank you for your comment. I have tried `cds-ts add workzone`, but it didn't add the transpile task either. Additionally, it produced the following error during the build:

Error: app/booksui3/webapp/Component.ts(1,27): error TS2307: Cannot find module 'sap/fe/core/AppComponent' or its corresponding type declarations.

I have yet to identify whether this is caused by `cds add typescript` or `cds-ts add workzone`.

[steffenwaldmann]

@MioYasutake @Willem_Pardaens 

Right, currently cds add typescript or cds add workzone don't add the transpilation task to the ui5-deploy.yaml. I think that's a great idea though! Will make sure to add this for the next @sap/cds-dk (8.8.0) release.