Prepare SAP Launchpad Service Setup
- 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
Prerequisites
- 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
andMitigations-display
to the application manifest (manifest.json
) file. - Step 2
Open the file
app/risks/webapp/manifest.json
.Add the external navigation target to the
sap.app
JSON object. You can add it right behind thesourceTemplate
object:
JSONCopy{ ... "sap.app": { "id": "ns.risks", ... "sourceTemplate": { ... }, "crossNavigation": { "inbounds": { "Risks-display": { "signature": { "parameters": {}, "additionalParameters": "allowed" }, "semanticObject": "Risks", "action": "display" } } } } }
- Step 3
Open the file
app/mitigations/webapp/manifest.json
.Add the external navigation target to the
sap.app
JSON object, but this time withsemanticObject
nameMitigations
. You can add it right after thedataSources
object:
JSONCopy{ ... "sap.app": { "id": "ns.mitigations", ... "dataSources": { ... }, "crossNavigation": { "inbounds": { "Mitigations-display": { "signature": { "parameters": {}, "additionalParameters": "allowed" }, "semanticObject": "Mitigations", "action": "display" } } } } }
- Step 4
-
Install SAPUI5 tooling package as global module in the root folder of your project:
Shell/BashCopynpm install --global @sap/ux-ui5-tooling
-
Install SAP Fiori application generator package as global module:
Shell/BashCopynpm install --global @sap/generator-fiori
-
- Step 5
Switch to
app/risks
folder:Shell/BashCopycd app/risks
Add deployment configuration:
Shell/BashCopyfiori 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.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:
- Open the file
C:\Users\<Your-User>\AppData\Roaming\npm\node_modules\@sap\generator-fiori\generators\deployment-generator\cf\index.js
. - Search for
cwd:this.destinationPath()
. - Add
, shell:true
aftercwd:this.destinationPath()
within the curly brackets. - Save and close the file.
- The
fiori add deploy-config cf
command should run without errors now.
- Step 6
Switch to the
app/mitigations
folder:Shell/BashCopycd ../../app/mitigations/
Add the deployment configuration:
Shell/BashCopyfiori add deploy-config cf
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 bothapp/risks/webapp/manifest.json
andapp/mitigations/webapp/manifest.json
files. Change thesap.cloud.service
property inapp/risks/webapp/manifest.json
andapp/mitigations/webapp/manifest.json
:JSONCopy"sap.cloud": { "public": true, "service": "cpapp.service" }
- Step 8
Create a file
app/package.json
for the HTML5 application deployer application and add the following code to it:JSONCopy{ "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.Add a file
app/build.sh
for the Fiori application build and add the following code to it:Shell/BashCopy#!/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.Navigate back to your project root folder:
Shell/BashCopycd ../..
Add the HTML5 application deployer package
@sap/html5-app-deployer
to theapp/package.json
file:Shell/BashCopynpm install --prefix app @sap/html5-app-deployer
Delete
node_modules
andpackage-lock.json
files withinapp
folder and its subfolders.When switching to the
npm
workspace feature oldpackage-lock.json
andnode_modules
cause problems. Therefore, execute the following command:Shell/BashCopyrm -rf {app,app/risks,app/mitigations}/{node_modules,package-lock.json}
- Step 9
Set container registry environment variable:
Shell/BashCopyCONTAINER_REGISTRY=<your-container-registry>
Looking for
<your-container-registry>
?Value for
<your-container-registry>
is the same as the docker server URL and the path used for docker login. You can quickly check it by running the following command in your terminal:jsonCopycat ~/.docker/config.json
Build docker image:
Shell/BashCopypack 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 theapp/package.json
, which runs the UI5 build for the SAP Fiori applications as it is defined in theapp/build.sh
file. The build result appears in the docker image only. It’s not on your file system.Push docker image:
Shell/BashCopydocker push $CONTAINER_REGISTRY/cpapp-html5-deployer
- Step 10
Add the HTML5 Application Deployer to your Helm chart:
cds add html5-repo
This adds three new sections
html5_apps_deployer
andhtml5_apps_repo_host
anddestinations
to thechart/values.yaml
file and also copies a few additional files in thechart/templates
folder. It deploys your HTML5 applications using thecpapp-html5-deployer
image and creates the required destinations to access the CAP service. TheHTML5Runtime_enabled
option makes the destinations accessible for the Launchpad Service.Replace
<your-container-registry>
with your container registry URL in thehtml5_apps_deployer
section of yourchart/values.yaml
file:YAMLCopyhtml5_apps_deployer: cloudService: null backendDestinations: {} image: repository: <your-container-registry>/cpapp-html5-deployer tag: latest
Add the destination and the cloud service to your backend service:
YAMLCopyhtml5_apps_deployer: cloudService: cpapp.service backendDestinations: cpapp-srv: service: srv image: ...
The
backendDestinations
configuration creates a destination with the namecpapp-srv
that points to the URL for your CAP servicesrv
.
With this step we’re reflecting in thevalues.yaml
file the configurations you already did for:- Destination
cpapp-srv
for the Risks application, done inStep 5: Add SAP Fiori elements Risks application
. - Destination
cpapp-srv
for the Mitigations application, done inStep 6: Add SAP Fiori elements Mitigations application
. - Cloud service for both applications, done
Step 7: Change Cloud Service
.
- Destination
- Step 11
Run the deploy command again:
Shell/BashCopyhelm 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?
- Prepare UI Applications
- Add navigation target for Risks UI
- Add navigation target for Mitigations UI
- Install required UI tools
- Add SAP Fiori elements Risks application
- Add SAP Fiori elements Mitigations application
- Change cloud service
- Create package.json and build script for app deployer
- Build HTML5 application deployer image
- Configure Helm chart for HTML5 application deployment
- Redeploy your application