npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sap/ux-ui5-tooling

v1.16.0

Published

SAP Fiori Tools – UI5 Tooling

Downloads

158,130

Readme

@sap/ux-ui5-tooling

The SAP Fiori Tools - UI5 Tooling contains a selection of custom middlewares that can be used with the command ui5 serve as well as custom tasks that can be used with the command ui5 build. Furthermore, the module expose the cli fiori offering e.g. the fiori run command is a wrapper of the ui5 serve commands and provides some additional parameters as well as fiori add deploy-config and fiori add flp-config to extend an existing project.

IMPORTANT:

  • Starting with version 1.10.5, the minimum required @ui5/cli version is >= 3! For more information about migration to version 3 of the @ui5/cli, see here.
  • Starting with version 1.11.3, the minimum required NodeJS version is 18.14.2 or higher!

Middlewares

SAP Fiori tools use the capabilities of custom middlewares to start and preview SAP Fiori elements or SAPUI5 freestyle applications, e.g. to enable auto refresh, to switch the version of SAPUI5 sources or to serve static resources. Starting with version 1.3.0 the behaviour of the preview of the SAP Fiori applications has changed. Now the persistent iAppState is ignored in order to have the source code changes always apply when application is refreshed. If you want to enable the iAppState then you need to add the URL parameter fiori-tools-iapp-state=true to the browser URL, e.g. http://localhost:8080/test/flpSandbox.html?fiori-tools-iapp-state=true#masterDetail-display.

1. Application Reload

The application reload middleware allows developers to preview SAP Fiori applications while developing/configuring them. Whenever a file relevant for the SAP Fiori application is changed, the reload middleware will refresh the application preview.

Example Configuration

Executing npx fiori run in your project with the configuration below in a ui5.yaml would start the application reload middleware with its default settings.

server:
  customMiddleware:
  - name: fiori-tools-appreload
    afterMiddleware: compression

Configuration options

The application reload middleware does not require any configuration parameters. However, there are optional parameters that can be used if the project structure differs from standard SAP Fiori projects.

path

  • <string> (default: webapp) Path that is to be watched. By default the standard SAPUI5 webapp folder is used

ext

  • <string> (default: html,js,json,xml,properties,change) Change this parameter to select a custom set of file extensions that are to be watched

port

  • <int> (default: 35729) Port to be used to communicate file system changes

debug

  • <boolean> (default: false) Set this parameter to get more log information.

2. Proxy

The proxy middleware provides you with the capabilities to connect to different back-end systems or to switch the SAPUI5 version of the application. The proxy is based on the @sap-ux/ui5-proxy-middleware for proxying the UI5 sources (starting with version 1.6.0) and the @sap-ux/backend-proxy-middleware for connecting to different back-end systems (starting with version 1.6.7). Both @sap-ux/ui5-proxy-middleware and @sap-ux/backend-proxy-middleware are based on the http-proxy-middleware.

Configuration Examples

Connecting to a back-end system

Executing npx fiori run in your project with the configuration below in the ui5.yaml file would forward any request starting with the path parameter to the provided back-end url.

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    backend:
    - path: /sap
      url: https://my.backend.com:1234

Connecting to a back-end system with destination

If the back-end is hidden behind a destination then you can also provide the destination in the configuration.

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    backend:
    - path: /sap
      url: https://my.backend.com:1234
      destination: my_backend

Connecting to a back-end system with destination and principal propagation

If the back-end destination is configured to use principal propagation, then in some cases the requests might fail. If this occurs then you will need to set the optional property xfwd to true. This will add the x-forwared headers to the proxy requests.

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    backend:
    - path: /sap
      url: https://my.backend.com:1234
      destination: my_backend
      xfwd: true

Connecting to multiple back-end systems

You can also connect to multiple back-end systems like this.

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    backend:
    - path: /northwind
      url: https://my.backend_2.com:1234
    - path: /sap
      url: https://my.backend.com:1234

Connecting to the SAP Business Technology Platform

If you want to connect to an ABAP Environment on SAP Business Technology Platform then you will need to set the optional property scp to true. For any other target, remove this property or set it to false.

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    backend:
    - path: /sap
      url: https://my.steampunk.com:1234
      scp: true

Connecting to the SAP Business Accelerator Hub

If you want to connect to the SAP Business Accelerator Hub then you will need to set the optional property apiHub to true, and set the corresponding path and url, e.g.

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    backend:
    - path: /s4hanacloud
      url: https://api.sap.com
      apiHub: true

Proxying WebSockets

If you want the proxy to handle also WebSockets, then you need to set the optional property ws to true, e.g.

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    backend:
    - path: /sap
      url: https://my.backend.com:1234
      ws: true

Note: proxying WebSockets is currently not supported in SAP Business Application Studio.

Changing the path to which a request is proxied

Let's that you want to configure the proxy to send requests from a certain path /services/odata to a destination with a specified entry path /my/entry/path. Then you need to do the following:

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    backend:
    - path: /services/odata
      pathPrefix: /my/entry/path
      url: https://my.backend.com:1234
      destination: my_backend

Providing Proxy Configuration

By the default the fiori-tools-proxy will read the proxy configuration from the Node.js environment variables proxy, https-proxy and noproxy. If those variables are not set, then you can also provide the proxy configuration in the ui5.yaml file. Please note: if you want to exclude any domains from the proxy then you will need to set the noproxy variable, e.g. npm config set noproxy "sap.com".

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    proxy: https://myproxy.com:8443
    backend:
    - path: /sap
      url: https://my.backend.com:1234

Ignoring Certificate Errors

By default, the fiori-tools-proxy will verify the SSL certificates and will throw an error if the validation fails. One can set the parameter ignoreCertError: true to ignore the certificate errors. Setting this parameter to true also allows the usage of self-signed certificates.

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    ignoreCertError: true
    backend:
    - path: /sap
      url: https://my.backend.com:1234

Providing Credentials

Starting with version 1.6.7 it is now possible to provide the credentials for the backend service upfront in a .env file.

FIORI_TOOLS_USER=YOUR_USER
FIORI_TOOLS_PASSWORD=YOUR_PASSWORD

When the two environment variables FIORI_TOOLS_USER and FIORI_TOOLS_PASSWORD are defined, then they will be used as credentials when connecting to the backend service.

Backend configuration options

Here is the full list of the available configuration options for the backend proxy.

  • forward (available with version 1.8.5): url string to be parsed with the url module
  • ws (available with version 1.1.5): true/false: if you want to proxy websockets
  • xfwd (available with version 1.1.9): true/false, adds x-forward headers
  • toProxy (available with version 1.8.5): true/false, passes the absolute URL as the path (useful for proxying to proxies)
  • prependPath (available with version 1.8.5): true/false, Default: true - specify whether you want to prepend the target's path to the proxy path
  • ignorePath (available with version 1.8.5): true/false, Default: false - specify whether you want to ignore the proxy path of the incoming request (note: you will have to append / manually if required)
  • localAddress (available with version 1.8.5): Local interface string to bind for outgoing connections
  • changeOrigin (available with version 1.8.5): true/false, Default: true - changes the origin of the host header to the target URL
  • preserveHeaderKeyCase (available with version 1.8.5): true/false, Default: false - specify whether you want to keep letter case of response header key
  • auth (available with version 1.8.5): Basic authentication i.e. 'user:password' to compute an Authorization header
  • hostRewrite (available with version 1.8.5): rewrites the location hostname on (301/302/307/308) redirects
  • autoRewrite (available with version 1.8.5): rewrites the location host/port on (301/302/307/308) redirects based on requested host/port. Default: false
  • protocolRewrite (available with version 1.8.5): rewrites the location protocol on (301/302/307/308) redirects to 'http' or 'https'. Default: null
  • cookieDomainRewrite (available with version 1.8.5): rewrites domain of set-cookie headers. Possible values:
    • false (default): disables cookie rewriting
    • String: new domain, for example cookieDomainRewrite: "new.domain". To remove the domain, use cookieDomainRewrite: ""
    • Object: mapping of domains to new domains, use "*" to match all domains
  • cookiePathRewrite (available with version 1.8.5): rewrites path of set-cookie headers. Possible values:
    • false (default): disable cookie rewriting
    • String: new path, for example cookiePathRewrite: "/newPath/". To remove the path, use cookiePathRewrite: "". To set path to root use cookiePathRewrite: "/"
    • Object: mapping of paths to new paths, use "*" to match all paths.
  • headers (available with version 1.8.5): object, adds request headers
  • proxyTimeout (available with version 1.8.5): timeout (in millis) when proxy receives no response from target
  • timeout (available with version 1.8.5): timeout (in millis) for incoming requests
  • followRedirects (available with version 1.8.5): true/false, Default: false - specify whether you want to follow redirects

UI5

The proxy configuration contains also the configuration for loading the SAPUI5 resources when previewing the application, e.g.

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    ui5:
      path:
      - /resources
      - /test-resources
      url: https://ui5.sap.com

By using the proxy configuration one can also change the SAPUI5 version, which is used to preview the application. You can use the version parameter to change the SAPUI5 version as follows:

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    ui5:
      path:
      - /resources
      - /test-resources
      url: https://ui5.sap.com
      version: 1.102.7

Starting with ux-ui5-tooling version 1.4.7, if the version property is not set in the ui5.yaml, then the minUI5Version from manifest.json will be used for the application preview. If the version property is set, but it is empty, then the latest SAPUI5 version from https://ui5.sap.com will be used for the application preview. For any other case the value of the version property will be used for the application preview.

Starting with ux-ui5-tooling version 1.7.1 a check for the SAPUI5 version of the application was added, which checks if the version is availble on the SAPUI5 SDK. If not, then the nearest, highest patch, version is used instead.

Note: all UI5 requests are routed through the proxy. Sometimes this can cause performance issues. If you don't want route the UI5 requests through the proxy, then you can set parameter directLoad: true. This will inject the UI5 url in the HTML file of the application and thus the UI5 libs will be loaded directly.

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    ui5:
      path:
      - /resources
      - /test-resources
      url: https://ui5.sap.com
      directLoad: true

Starting with version 1.6.0 one can use the following syntax for proxying different UI5 requests to different URLs, e.g.

- name: fiori-tools-proxy
  afterMiddleware: compression
  configuration:
    ui5:
      paths:
        - path: /resources
          url: https://ui5.sap.com
        - path: /test-resources
          src: https://ui5.sap.com
      version: '1.100.1'

3. Serve Static

The serve static middleware provides the capability to serve any static resources locally from your machine. E.g. you can serve SAPUI5 locally or any other resources.

Example Configuration for serving locally SAPUI5

Pre-requisites: SAPUI5 SDK version is downloaded and extracted locally on the machine. One can download UI5 resources from https://tools.hana.ondemand.com/#sapui5

Executing npx fiori run in your project with the configuration below in a ui5.yaml file would serve the UI5 sources from your machine. Any request starting with the path parameter will be forwarded to the local path provided in the src parameter.

server:
  customMiddleware:
  - name: fiori-tools-servestatic
    afterMiddleware: compression
    configuration:
      paths:
        - path: /resources
          src: "Path/To/SAPUI5-SDK"
        - path: /test-resources
          src: "Path/To/SAPUI5-SDK"

Example Configuration for serving any resources locally

Executing npx fiori run in your project with the configuration below in a ui5.yaml file would serve resources from your machine. Any request starting with the path parameter will be forwarded to the local path provided in the src parameter.

server:
  customMiddleware:
  - name: fiori-tools-servestatic
    afterMiddleware: compression
    configuration:
      paths:
        - path: /images
          src: "Path/To/images"
        - path: /libs
          src: "Path/To/libs"

Example configuration for mocking the User API Service from @sap/approuter

If you are using the User API Service from @sap/approuter in your application, then you can mock by providing the following configuration.

server:
  customMiddleware:
  - name: fiori-tools-servestatic
    afterMiddleware: compression
    configuration:
      paths:
        - path: /userapi/currentUser
          src: "Path/To/UserJson/user.json"
          index: false
          fallthrough: false
          redirect: false

whereas the user.json can look like this e.g.

{
   "firstname": "John",
   "lastname": "Doe",
   "email": "[email protected]",
   "name": "[email protected]",
   "displayName": "John Doe ([email protected])",
   "scopes": "openid,user_attributes,uaa.user"
}

Configuration options

Additionaly you can specify any of the configuration options (excluding setHeaders!) of the serve-static middleware.

E.g. you can set fallthrough: false, which will cause the middleware to return 404 error, when it can't find a file on the local system:

server:
  customMiddleware:
  - name: fiori-tools-servestatic
    afterMiddleware: compression
    configuration:
      paths:
        - path: /resources
          src: "Path/To/SAPUI5-SDK"
        - path: /test-resources
          src: "Path/To/SAPUI5-SDK"
      fallthrough: false

Alternatively you can set e.g. fallthrough: false only for specific requests:

server:
  customMiddleware:
  - name: fiori-tools-servestatic
    afterMiddleware: compression
    configuration:
      paths:
        - path: /resources
          src: "Path/To/SAPUI5-SDK"
          fallthrough: false
        - path: /test-resources
          src: "Path/To/SAPUI5-SDK"

4. Preview

The preview middleware provides the capability to preview an application in a local Fiori launchpad. It hosts a local Fiori launchpad based on your configuration and offers an API to modify flex changes in your project. The middleware is a wrapper for the open source middleware @sap-ux/preview-middleware (https://www.npmjs.com/package/@sap-ux/preview-middleware) with a handful of default settings that are useful for the Fiori application development.

Configuration Options

The full list of configuration options is described at https://www.npmjs.com/package/@sap-ux/preview-middleware.

The following properties are the most important:

  • flp:
    • path: optional mount point of the local Fiori launchpad default is /test/flp.html
    • theme: optional flag for setting the UI5 Theme
    • libs: boolean: optional flag to add a generic script that fetches the paths of the libraries used, which are not available in UI5. To disable it, set it to false. If the flag is not set, the project will be checked for a load-reuse-libs script and if it is available, the libraries will also be fetched.
  • adp:
    • target: required configuration for adaptation projects defining the connected backend
  • debug: boolean: enables debug output

Minimal configuration

With no configuration provided, the local Fiori launchpad will be available at /test/flp.html and the log level is info. Additionally, an editor in UI adaptation mode for variant creation will be hosted at /preview.html.

  customMiddleware:
  - name: fiori-tools-preview
    afterMiddleware: fiori-tools-appreload

Configuring path and theme

With the following configuration, the local Fiori launchpad will be available at /test/flpSandbox.html, the used theme will be SAP Horizon and the log level is debug. Additionally, an editor in UI adaptation mode for variant creation will be hosted at /preview.html.

  customMiddleware:
  - name: fiori-tools-preview
    afterMiddleware: fiori-tools-appreload
      configuration:
        flp:
          path: /test/flpSandbox.html
          theme: sap_horizon
        debug: true

Deprecated configuration

The initial version of the middleware allowed setting the theme and required to set an application component. The component is not required anymore and the theme property has move to flp-theme, however, for backward compatibility, the following configuration is deprecated but still supported.

  customMiddleware:
  - name: fiori-tools-preview
    afterMiddleware: fiori-tools-appreload
    configuration:
      component: myapp
      ui5Theme: sap_fiori_3

This configuration is internally converted to following.

  customMiddleware:
  - name: fiori-tools-preview
    afterMiddleware: fiori-tools-appreload
      configuration:
        flp:
          path: /test/flpSandbox.html
          intent:
            object: preview
            action: app
          theme: sap_fiori_3

Tasks

SAP Fiori Tools use the capabilities of custom tasks to deploy the SAP Fiori projects to ABAP servers.

Deployment to ABAP

The deployment to ABAP task allows deploying SAP Fiori applications to SAP systems using the SAPUI5 Repository OData service.

Pre-requisites:

  • SAP component SAP_UI 7.53 or higher is installed in your SAP system
  • Service needs to be enabled and accessible from your development environment (how to check this)
  • For operations on a SAPUI5 ABAP repository, you need the S_DEVELOP authorization.

Notes:

  • the task does not create ABAP transports, therefore, it requires an existing transport if the target ABAP package requires a transport
  • only Basic Authentication (user/password based authentication) as well as OAuth2 with the SAP Business Technology Platform

Example Configuration

Executing ui5 build --config ui5-deploy.yaml in your project with the configuration below in a ui5-deploy.yaml, manually added to the project, would deploy all files of your dist folder except files ending with .test.js and the internal.md file. The target system is XYZ with client 200. Username and password for authentication will be read from the environment variables XYZ_USER and XYZ_PASSWORD.

Based on this example, the application will be created/updated as /TEST/SAMPLE_APP in package /TEST/UPLOAD and all changes will be recorded in transport request XYZQ300582.

Content of ui5-deploy.yaml

builder:
  customTasks:
  - name: deploy-to-abap
    afterTask: replaceVersion
    configuration:
      target:
        url: https://XYZ.sap-system.corp:44311
        client: 200
        auth: basic
      credentials:
        username: env:XYZ_USER
        password: env:XYZ_PASSWORD
      app:
        name: /TEST/SAMPLE_APP
        package: /TEST/UPLOAD
        transport: XYZQ300582
      exclude:
      - .*\.test.js
      - internal.md

Command to create the ui5-deploy.yaml file

A newly created project does not contain a deployment configuration (ui5-deploy.yaml) but you can create it by executing npx fiori add deploy-config. You will be prompted for required information and then the file will be created based on your input and the content of the existing ui5.yaml file used for the preview. In addition to creating the configuration, the create deployment command will also update your package.json so that you can execute npm run deploy afterwards to deploy your application.

Setting environment variables in a .env file

If you prefer to keep the environment variables in a file, an option can be to create .env file at the root of your project which contains the environment variables that can be referenced in the ui5.yaml file.

IMPORTANT: The username and password property will only accept environment variable references in the ui5-deploy.yaml.

XYZ_USER=[MY_USER_NAME]
XYZ_PASSWORD=[MY_PASSWORD]

Command to deploy

After completing the changes in the configuration files, execute the command npm run deploy. The deployment task is by default interactive and requires that the user confirms the deploy configuration. If such a confirmation is not required or desired then it can be disable by adding -- -y to the deploy script e.g. ui5 build preload --config ui5-deploy.yaml -- -y

Accessing the deployed app

Based on the sample configurations above, after deploying the app, you can access the app using URL: https://XYZ.sap-system.corp:44311/sap/bc/ui5-ui5/test/sample_app/index.html?sap-client=200#app-preview

Documentation on the Configuration options

In addition to defining parameters in the main yaml file, every parameter can also be defined as environment variable that is referenced in yaml. Using the dotenv module, the task also supports project specific environment variables defined in a .env file in the root of your project. To reference an environment variable the pattern env:VAR_NAME must be used.

target

The target object contains properties identifying your target SAP system.

url

  • <string> pattern <protocol>://<hostname>[:<port>] (required)
  • This parameter must contain a url pointing to your target SAP system

client

  • <number> range [0..999] (optional)
  • The client property is used to identify the SAP client that is to be used in the backend system. It translates to the url parameter sap-client=<client> If the client parameter is not provide, the default client will be used.

scp

  • <boolean> (default: false)
  • By default the deployment task will use basic authentication when connecting to the backend. If the target system is ABAP Environment on SAP Business Technology Platform, this parameter needs to be set to true.

service

  • <string> (default: /sap/opu/odata/UI5/ABAP_REPOSITORY_SRV)
  • Path pointing to the SAPUI5 ABAP repository OData service in your target system. This parameter only needs to be used if the service is exposed at a different path in your backend system e.g. via alias.

credentials (optional)

The credentials object is mainly required for CI/CD based deployments and it needs to contain the required parameters to authenticate at your target system. It is only possible to use references to environment variables e.g. env:MY_VARIABLE here, plain username and password are not supported.

For local usage, we recommend to not use the credentials object at all. As result, the deployment task will utilize the operating systems secure storage maintain credentials.

username

  • <string> (required)
  • SAP business user for the target system. The user requires authorizations to create/update the target ABAP development object.

password

  • <string> (required)
  • Password required to authenticate the previously configured user. IMPORTANT: while technically possible to add the password to your config, we strongly DISCOURAGE that but recommend instead the use of environment variables.

authenticationType

  • <string> (optional)
  • Authentication type for the app (e.g. 'basic', 'reentranceTicket'). IMPORTANT: It is required for authentication with reentrance tickets.

app

The app object describes the backend object that is created/updated as result of the deployment.

name

  • <string> (required)
  • Unique name of the application. The name is used as part of the application url as well as the name of the ABAP development object used as container for the app.

package

  • <string> (required for new apps)
  • Name of an existing ABAP package that is used as parent of the deployed application. The parameter is required for the creation of the application in the backend. Any following deployment updating the application does not require the package parameter, i.e. it will be ignored.

transport

  • <string> (optional)
  • The transport parameter refers to a transport request number that is to be used to record changes to the backend application object. The property is optional because it is only required if the package that is used for deployments requires transport requests.

description

  • <string> (optional)
  • Optional description added to the created application object in the backend.

exclude

  • <string[] array of regex> (optional)
  • By default the deployment task will create an archive (zip file) of all build files and send it to the backend. By using exclude, you can define expressions to match files that shall not be included into the deployment. Note: string.match() is used to evaluate the expressions.

index

  • true|false (default: false)
  • If set to true, then an additional index.html will be generated and deployed to run the application standalone.

test

  • true|false (default: false)
  • If set to true, the task will run through all steps including sending the archive to the SAP backend. The backend will not deploy the app but run the pre-deployment checklist and return the result.

Commands

fiori run - starts a local web server for running a FE application

Options

  • --config, c - Path to config file (default: ui5.yaml in root folder of the project).
  • --verbose - Enable verbose logging (default: false).
  • --port, -p - Port to start the server on (default for HTTP: 8080, HTTPS: 8443).
  • --open, -o - Open web server root directory in default browser. Optionally, supplied relative path will be appended to the root URL.
  • --https - Enables HTTPS over the HTTP/2 protocol for the web server (default: false). If you provide the --https parameter, but you do not provide the --key and --cert parameters, then a private key and certificate will be created automatically. Note: For the automatic key and certificate generation, you need to have OpenSSL installed on your OS. Using HTTPS over HTTP/2 is currently not supported in SAP Business Application Studio.
  • --key - Path to the private key for https (default: "$HOME/.ui5/server/server.key").
  • --cert - Path to the certificate for https (default: "$HOME/.ui5/server/server.crt").
  • --ui5 - UI5 version to use when running the application (default: version from ui5.yaml).
  • --ui5Uri - UI5 uri to load the UI5 resources from (default: uri from ui5.yaml).
  • --proxy - specify proxy configuration, e.g. https://myproxy:8443 (default: uses host machine proxy configuration, if any).

fiori add deploy-config - adds a deployment configuration to the project

The command allows adding a deployment configuration to the project. The command supports the generation of a configuration for deployment to an ABAP system or to a Cloud Foundry space.

Deployment to ABAP

If ABAP is chosen as target then the CLI will prompt the required information to generate a ui5-deploy.yaml required for the deploy-to-abap task.

Deployment to Cloud Foundry (CF)

For the deployment to CF, an MTA configuration will be created. The command allows to create a new configuration i.e. a new mta.yaml file or updates an existing mta.yaml with the information required for deployment. After successfully creating the configuration, running npm run build in the MTA directory that contains the application will try to build a deployable mtar file that can then be deployed to CF with npm run deploy.

Pre-requisites:

  • Availablity of the mta executable in the path. Use npm i -g mta to install globally
  • Availability of Cloud Foundry CLI tools. Installation instructions: https://docs.cloudfoundry.org/cf-cli/install-go-cli.html
  • Availability of CF multiapps plugin. Installation instructions: https://help.sap.com/viewer/65de2977205c403bbc107264b8eccf4b/Cloud/en-US/27f3af39c2584d4ea8c15ba8c282fd75.html
  • A correctly configured destination to the backend system
  • User authorization on CF to deploy

Artifacts & configuration created

Running the command/task, results in a directory structure that looks like this:

mta_directory
|_ application_directory
   |_ ...
   |_ webapp
      |_ ...
      |_ manifest.json
   |_ ui5.yaml
|_ cf
   |_ deployer
   |_ router
   |_ flp (optional)
...
|_ package.json
|_ mta.yaml

Information required to generate the configuration

Location of MTA Directory

The tool finds the nearest parent directory that contains a mta.yaml and offers that as the MTA directory. Failing that, it defaults to the parent directory of the application.

Destination

Destination configured to connect to the backend on Cloud Foundry. If there's a setting in ui5.yaml, that value is offered as the default.

Prefix

Prefix used for the ID of the MTA and the service names. It defaults to the namespace of the app. If a namespace is not found, it defaults to test. Please choose a prefix so that the service names are unique to your MTA. Otherwise deployment by multiple people will overwrite the same service.

At the end of the generation, it's possible to optionally generate SAP Fiori launchpad configuration (default: no).

fiori add flp-config - Fiori Launchpad configuration generation

It's possible to create configuration and artifacts required to run the application in an SAP Fiori launchpad. Depending on the target, the command will update either only the application manifest.json with the required inbound navigation property, or will also enhance the MTA configuration to contain a standalone FLP on CF.

fiori deploy - performs the deployment of the application into an ABAP system

Deploys an application to an ABAP frontend server.

Options

  • --config, c - Path to config file (default: ui5-deploy.yaml in root folder of the project).
  • --noConfig - Only CLI arguments will be used, no config file is read.
  • --destination, -d - The destination used in SAP Business Application Studio (default: destination from ui5-deploy.yaml).
  • --url, -u - The url of the service endpoint at the ABAP system (default: url from ui5-deploy.yaml).
  • --username - Name of environment variable containing a username to authenticate (default: username from ui5-deploy.yaml).
  • --password - Name of environment variable containing a password to authenticate (default: password from ui5-deploy.yaml).
  • --authenticationType - Authentication type for the app (e.g. 'basic', 'reentranceTicket'). Required for 'reentranceTicket'.
  • --client, -l - The ABAP client (default: client from ui5-deploy.yaml).
  • --transport, -t - The id of the transport request (default: transport from ui5-deploy.yaml).
  • --name, -n - The application name (default: name from ui5-deploy.yaml).
  • --package, -p - The ABAP package (default: package from ui5-deploy.yaml).
  • --description, -e - The application description (default: description from ui5-deploy.yaml).
  • --yes, -y - Deploy without asking for confirmation.
  • --failfast, -f - Throw an error if something goes wrong and exit with a return code != 0.
  • --testMode, -tm - Shows the results of CRUD operations that would be done in a real deployment to help you make an informed decision.
  • --archive-path, -ap - The path to the archive that should be deployed. If provided, the archive will be used instead of creating a new one from the dist folder.

FAQ

My backend system contains the SAP_UI component version 7.53 or newer, but the SAPUI5 repository service cannot be reached.

A: Please check if the service has been activated. More information at https://help.sap.com/viewer/68bf513362174d54b58cddec28794093/7.52.5/en-US/bb2bfe50645c741ae10000000a423f68.html.

The SAPUI5 repository service is active and reachable but whenever I deploy an application I see the following error "Request failed with status code 400".

This could have multiple reasons, please check the console for more information or open transaction /IWFND/ERROR_LOG and check the server logs. A common issue is that during the setup, configuring a virus scan profile has been forgotten. This can be corrected in transaction /IWFND/VIRUS_SCAN.

SSL certificate creation and installation fails with: Unable to find openssl - please make sure it is installed and available in your PATH.

Most probably the OpenSSL package is not installed on your OS. Please install it and make sure that it is available in your PATH environment variable.

Support

Join the SAP Fiori Tools Community. Ask Questions, Read the Latest Blogs, Explore Content.
Please assign tag: SAP Fiori tools.

To log an issue with SAP Fiori Tools, please see Contact SAP Support.

Documentation

License