Skip to Content

Prepare SAP Launchpad Service Setup

Learn how to prepare your UI applications, add deployment configuration for HTML5 applications to your project, and configure your Helm chart for HTML5 application deployment.
You will learn
  • How to add navigation targets and prepare your UI applications
  • How to build and push the docker image for HTML5 application deployer
  • How to configure your Helm chart for HTML5 application deployment
iwonahahnIwona HahnAugust 19, 2022
Created by
manjuX
August 19, 2022
Contributors
manjuX
  • Step 1

    In this tutorial, you will use the SAP Launchpad service to access your CAP service and its UI. Additionally, the SAP Launchpad service provides features like personalization, role-based visibility, theming, and more. You can add multiple applications to one launchpad, including subscribed ones and applications from SAP S/4HANA or SAP BTP.

    Navigation targets are required to navigate between applications, but also to start the applications from SAP Launchpad service. In the next steps, you add the navigation targets Risks-display and Mitigations-display to the application manifest (manifest.json) file.

  • Step 2
    1. Open the file app/risks/webapp/manifest.json.

    2. Add the external navigation target to the sap.app JSON object. You can add it right behind the sourceTemplate object:

    JSON
    Copy
    {
      ...
      "sap.app": {
        "id": "ns.risks",
        ...
        "sourceTemplate": {
          ...
        },
        "crossNavigation": {
          "inbounds": {
            "Risks-display": {
              "signature": {
                "parameters": {},
                "additionalParameters": "allowed"
              },
              "semanticObject": "Risks",
              "action": "display"
            }
          }
        }
      }
    }
    
  • Step 3

    Do the same with the mitigations manifest file app/mitigations/webapp/manifest.json, but with the semanticObject name Mitigations.

    JSON
    Copy
    {
      ...
      "sap.app": {
        "id": "ns.mitigations",
        ...
        "dataSources": {
          ...
        },
        "crossNavigation": {
          "inbounds": {
            "Mitigations-display": {
              "signature": {
                "parameters": {},
                "additionalParameters": "allowed"
              },
              "semanticObject": "Mitigations",
              "action": "display"
            }
          }
        }
      }
    }
    
  • Step 4
    1. Install SAPUI5 tooling package as global module in the root folder of your project:

      Shell/Bash
      Copy
      npm install --global @sap/ux-ui5-tooling
      
    2. Install SAP Fiori application generator package as global module:

      Shell/Bash
      Copy
      npm install --global @sap/generator-fiori
      
  • Step 5
    1. Switch to app/risks folder:

      Shell/Bash
      Copy
      cd app/risks
      
    2. Add deployment configuration:

      Shell/Bash
      Copy
      fiori add deploy-config cf
      

      If the SAP Fiori generator fails, make sure to remove other .yo-rc.json files you might have in any of your project’s directories and try again.

    3. Enter the following settings:

      • Destination name (): cpapp-srv
      • Add application to managed application router? (Y/n): y

    On Windows, you might get an error when executing this command.

    The CDS development kit that we use in this tutorial series includes a batch executable file. Since it’s not a binary, executing it on Windows might return an error similar to this one:

    Error @sap/fiori:deploy-config cf --base ui5.yaml --config ui5-deploy.yaml
    spawnSync cds ENOENT
    

    The issues is currently being fixed but here a workaround you can use for the time being:

    1. Open the file C:\Users\<Your-User>\AppData\Roaming\npm\node_modules\@sap\generator-fiori\generators\deployment-generator\cf\index.js.
    2. Search for cwd:this.destinationPath().
    3. Add , shell:true after cwd:this.destinationPath() within the curly brackets.
    4. Save and close the file.
    5. The fiori add deploy-config cf command should run without errors now.
  • Step 6
    1. Switch to the app/mitigations folder

      Shell/Bash
      Copy
      cd ../../app/mitigations/
      
    2. Add the deployment configuration:

      Shell/Bash
      Copy
      fiori add deploy-config cf
      
    3. Enter the following settings:

      • Destination name (): cpapp-srv
      • Add application to managed application router? (Y/n): y
  • Step 7

    The fiori command automatically sets some value to the SAP Cloud service property in both app/risks/webapp/manifest.json and app/mitigations/webapp/manifest.json files. Change the sap.cloud.service property in app/risks/webapp/manifest.json and app/mitigations/webapp/manifest.json:

    JSON
    Copy
    "sap.cloud": {
        "public": true,
        "service": "cpapp.service"
    }
    
  • Step 8
    1. Create a file app/package.json for the HTML5 application deployer application and add the following code to it:

      JSON
      Copy
      {
          "name": "html5-deployer",
          "scripts": {
              "start": "node node_modules/@sap/html5-app-deployer/index.js",
              "build": "bash build.sh"
          },
          "workspaces": [
              "risks",
              "mitigations"
          ]
      }
      

      The build script triggers the build of the Fiori applications for deployment in the HTML5 application repository. The two UI applications are referred as sub packages (“workspaces”) which is required for the build.

      The deployer is run with the start script.

    2. Add a file app/build.sh for the Fiori application build and add the following code to it:

      Shell/Bash
      Copy
      #!/bin/bash
      
      set -e
      
      npm run build:cf --prefix risks
      npm run build:cf --prefix mitigations
      
      rm -rf resources
      mkdir -p resources
      
      mv risks/dist/nsrisks.zip resources
      mv mitigations/dist/nsmitigations.zip resources
      
      if [ "$CNB_STACK_ID" != "" ]; then
          # Delete directories if running in CNB build to avoid them getting packaged
          rm -rf risks
          rm -rf mitigations
      fi
      

      This script calls the UI5 build for the two SAP Fiori applications and copies the result into the resources directory.

    3. Navigate back to your project root folder:

      Shell/Bash
      Copy
      cd ../..
      
    4. Add the HTML5 application deployer package @sap/html5-app-deployer to the app/package.json file:

      Shell/Bash
      Copy
      npm install --prefix app @sap/html5-app-deployer
      
    5. Delete node_modules and package-lock.json files within app folder and its subfolders.

      When switching to the npm workspace feature old package-lock.json and node_modules cause problems. Therefore, execute the following command:

      Shell/Bash
      Copy
      rm -rf {app,app/risks,app/mitigations}/{node_modules,package-lock.json}
      
  • Step 9
    1. Set container registry environment variable:

      Shell/Bash
      Copy
      CONTAINER_REGISTRY=<your-container-registry>
      
    2. Build docker image:

      Shell/Bash
      Copy
      pack build $CONTAINER_REGISTRY/cpapp-html5-deployer \
           --env BP_NODE_RUN_SCRIPTS=build \
           --path app \
           --buildpack gcr.io/paketo-buildpacks/nodejs \
           --builder paketobuildpacks/builder:base
      

      The parameter --env BP_NODE_RUN_SCRIPTS=build triggers the build script in the app/package.json, which runs the UI5 build for the SAP Fiori applications as it is defined in the app/build.sh file. The build result appears in the docker image only. It’s not on your file system.

    3. Push docker image:

      Shell/Bash
      Copy
      docker push $CONTAINER_REGISTRY/cpapp-html5-deployer
      
  • Step 10
    1. Add the HTML5 Application Deployer to your Helm chart:

      cds add helm:html5_apps_deployer
      

      This adds three new sections html5_apps_deployer and html5_apps_repo_host and destinations to the chart/values.yaml file and also copies a few additional files in the chart/templates folder. It deploys your HTML5 applications using the cpapp-html5-deployer image and creates the required destinations to access the CAP service. The HTML5Runtime_enabled option makes the destinations accessible for the Launchpad Service.

    2. Replace <your-container-registry> with your container registry in the html5_apps_deployer section of your chart/values.yaml file:

      YAML
      Copy
      html5_apps_deployer:
        cloudService: null
        backendDestinations: {}
        image:
          repository: <your-container-registry>/cpapp-html5-deployer
          tag: latest
      
    3. Add the destination and the cloud service to your backend service:

      YAML
      Copy
      html5_apps_deployer:
        cloudService: cpapp.service
        backendDestinations:
          cpapp-srv:
            service: srv
        image:
          ...
      

      You’ve already configured the same destination (Add Deployment Config for HTML5 Applications) and cloud service (Change Cloud Service) values for your SAP Fiori applications, so with this step the configurations are also reflected in the values.yaml file.

      The backend destination configuration creates a destination with the name cpapp-srv pointing to the URL for your CAP service srv.

  • Step 11

    You can redeploy your application:

    Shell/Bash
    Copy
    helm upgrade cpapp ./chart --install
    

    Which of the following sections are added to the `values.yaml` file after running the `cds add helm:html5_apps_deployer` command?

Back to top