Skip to Content
Technical Articles
Author's profile photo Peter Muessig

UI5ers Buzz #51: UI5 Tooling 2.0: How to develop and run SAP Fiori elements locally!

Introduction

On April 1st I talked about the UI5 Tooling – a modern CLI-based development experience” in a SAP Community call. A week later, on April 7th I published the blog post UI5 Tooling: a modern development experience for UI5! which demonstrates the capabilities of the UI5 Tooling how we can consume UI5 library dependencies locally and how we can use custom middlewares to improve the overall UI5 development experience. This time, I want to focus on the availability of SAPUI5 on NPM and how we can utilize this to develop and run an SAP Fiori elements application locally.

SAPUI5 from NPM!

The biggest benefit of the UI5 Tooling 2.0 is the consumption of the SAPUI5 library dependencies from NPM. Merlin Beutlberger explains the new features of the UI5 Tooling 2.0 in his blog post The UI5 Tooling and SAPUI5 – The Next Step. Thanks to the awesome work of the UI5 Tooling team, we can now develop SAPUI5 applications locally. We can consume the sap.suite.ui.generic.template library to build and develop SAP Fiori elements applications locally and also consume the sap.ushell library to make the application running in the SAP Fiori launchpad sandbox. Within this blog post, I will focus on creating an SAP Fiori elements application in SAP Web IDE and run it locally with the UI5 Tooling.

Prerequisites

As the UI5 Tooling is based on Node.js. We need to ensure that at least Node.js version 10 is installed and configured properly.

Step 1: Create an SAP Fiori elements application

In the first step, we create an SAP Fiori elements application based on the List Report Application template. This has to be done in SAP Web IDE by using the template wizard.

Follow these steps to create a List Report Application:

  1. Open SAP Web IDE
  2. “File” > “New” > “Project from template”
  3. Select environment “Neo” (as this affects the datasource URL relevant for the proxy)
  4. Select category “SAP Fiori Elements”
  5. Select template “List Report Application”
  6. Enter your project name, title and namespace
  7. In the data connection step (prerequisite: setup a destination to Northwind OData Services first), select the Northwind OData Services as “Service URL”, use the “Relative URL”: /V2/Northwind/Northwind.svc/) and press “Test”.
  8. Skip the annotation selection step, just press “Next”
  9. In the template customization step, select the Object Collection: Customers, OData Navigation: Orders, OData Sub Navigation: Order_Details.
  10. Finish

Step 2: Create the annotation file

As second step, we need to create a simple annotation file for our SAP Fiori elements application. Therefore, follow these steps:

  1. Create the folder annotations in the webapp folder
  2. Use the context menu on the annotations folder and select “New” > “Annotation File”
  3. Just keep the default settings for the annotation file and press “Next” and “Finish”
  4. Create a LineItem annotation with the DataFields: CustomerID, CompanyName and ContactName and the SelectionFields annotation with the Items: CustomerID, CompanyName and ContactName

Feel free to add more annotations. 🙂 Finally, the simple annotation file should look like this:We can test the annotations file by running the SAP Fiori elements application with the SAPUI5 Visual Editor. The application should look like this (select the project in the project explorer and use the context menu on the project folder to launch the SAPUI5 Visual Editor):

That’s all we need to do in the SAP Web IDE. Let’s go local…

Step 3: Download and prepare the SAP Fiori elements application

After the SAP Fiori elements application has been created, select it in the project explorer, export it from SAP Web IDE and unzip it locally in your file system. As a first step locally, we validate whether we need to update the project dependencies of the created UI5 application. To update the project dependencies, we can use the open-source tool npm-check-updates. This tool can be installed via:

npm install -g npm-check-updates

After the installation of the tool, we can run:

ncu -u

to upgrade the project dependencies in the package.json. Once the project dependencies are upgraded, run:

npm install

to prepare the project for a first run. The project can be started with the command:

npx ui5 serve -o test/flpSandbox.html

Although the development server starts technically, there are a few things missing to make the SAP Fiori elements application to run properly (e.g. the SAPUI5 resources).

Step 4: Consume SAPUI5 library dependencies from NPM

Now, we are configuring the application to consume the SAPUI5 library dependencies from NPM. Therefore, we modify the ui5.yaml to use the specVersion: 2.0:

specVersion: '2.0'
metadata:
  name: mylistreport
type: application
[…]

As next step, we add the framework dependency to SAPUI5 by running the following command:

npx ui5 use sapui5@latest

Once the framework dependency is added, we can include the required SAPUI5 libraries with the following command (make sure to grab the whole line => it’s long 😉 ):

npx ui5 add sap.ui.core sap.m sap.ushell sap.collaboration sap.ui.generic.app sap.suite.ui.generic.template themelib_sap_fiori_3

This will add the sap.ui.core, sap.m, sap.ushell, sap.collaboration, sap.ui.generic.app, sap.suite.ui.generic.template and the themelib_sap_fiori_3 as UI5 library dependencies to the project and the two commands above will create the following section in the ui5.yaml:

framework:
  name: SAPUI5
  version: "1.76.1"
  libraries:
    - name: sap.collaboration
    - name: sap.m
    - name: sap.suite.ui.generic.template
    - name: sap.ui.core
    - name: sap.ui.generic.app
    - name: sap.ushell
    - name: themelib_sap_fiori_3

After starting the development server with:

npx ui5 serve -o test/flpSandbox.html

the SAPUI5 resources are loaded from the framework dependencies configured in the ui5.yaml. We will see the following screen:

Now the SAP Fiori elements application is starting up and you can go ahead to configure the proxy to access the Northwind OData Service.

Step 5: Setting up a proxy to tunnel the Northwind OData Service

To access the Northwind OData Service in the SAP Fiori elements application, we can simply use the simple proxy middleware from the UI5 Ecosystem Showcase. It can be installed as a dev dependency by running the following command:

npm install ui5-middleware-simpleproxy --save-dev

Afterwards, we need to add the ui5-middleware-simpleproxy as ui5/dependencies in the package.json:

  "ui5": {
    "dependencies": [
      "@sap/ui5-builder-webide-extension",
      "ui5-middleware-simpleproxy"
    ]
  },

Now, we need to open the ui5.yaml and add the following configuration before the framework section:

[…]
server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    mountPath: /Northwind/V2/Northwind/Northwind.svc/
    afterMiddleware: compression
    configuration:
      baseUri: https://services.odata.org/V2/Northwind/Northwind.svc/
framework:
  name: SAPUI5
  version: "1.76.1"
[…]

This configuration ensures that requests to /Northwind/V2/Northwind/Northwind.svc/ are proxied to https://services.odata.org/V2/Northwind/Northwind.svc/.

Step 6: Validate that the SAP Fiori elements application runs locally

The next step is to validate that the SAP Fiori elements application runs locally. Therefore, we first ensure that all project dependencies are installed by running:

npm install

Afterwards, we can start the development server by executing:

npx ui5 serve -o test/flpSandbox.html

This will open our preferred browser and the SAP Fiori launchpad will come up with a tile for our SAP Fiori elements application. If we click on this tile, our application will start, and the data will be loaded from the Northwind OData Service.

Step 7: Add the livereload middleware

With the livereload middleware you can achieve a click and refresh behavior while developing. The middleware is watching the changes of the sources in the file system. Once a source file has been modified the livereload middleware refreshes the application in the browser.

Add the livereload middleware with the following command:

npm install ui5-middleware-livereload --save-dev

Afterwards in the package.json ensure to list the ui5-middleware-livereload in the ui5/dependencies:

  "ui5": {
    "dependencies": [
      "@sap/ui5-builder-webide-extension",
      "ui5-middleware-simpleproxy",
      "ui5-middleware-livereload"
    ]
  },

Afterwards, in the ui5.yaml just include the livereload middleware configuration next to the simpleproxy middleware configuration to the server/customMiddleware section:

[…]
server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    mountPath: /Northwind/V2/Northwind/Northwind.svc/
    afterMiddleware: compression
    configuration:
      baseUri: https://services.odata.org/V2/Northwind/Northwind.svc/
  - name: ui5-middleware-livereload
    afterMiddleware: compression
    configuration:
      ext: "xml,json,properties"
      path: "webapp"
framework:
  name: SAPUI5
  version: "1.76.1"
[…]

The next time when you start the development server by running the following command:

npx ui5 serve -o test/flpSandbox.html

the livereload middleware is watching your file system and in case of changes it will refresh your browser (remark: in case you face issues with livereload, maybe your html page was cached before, just ensure to reload the html page properly).

Conclusion

As we can see, we can develop an SAP Fiori elements application locally with the UI5 Tooling. The SAPUI5 library dependencies are available locally and can be consumed. However, local SAP Fiori elements application development still feels a bit bumpy! Within SAP Web IDE, due to the availability of the Annotation Modeler and the SAPUI5 Visual Editor we have quite nice visual tools which support us to develop SAP Fiori elements applications. For local development these visual tools really missing. But for the purists among us who like to develop directly in the annotation files with the angle brackets, this could be nonetheless an interesting alternative. Enjoy…

Related Links

 

Previous Post: UI5ers Buzz #50: The Loading Evolution: “Get the most out of your UI5 app!”

 

Peter is one of the initiators who started the Phoenix project (a.k.a. OpenUI5/SAPUI5) grown into the role of the UI5 Chief Architect mainly focusing on UI innovation in the area of the UI framework (UI5 Evolution), controls (UI5 Web Components), tooling (UI5 Tooling). 

 

 

 

Assigned tags

      38 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Rahul Magdum
      Rahul Magdum

      I must say.... That was a good tutorial... Eager to try it out myself. Thanks Peter!

      Author's profile photo Shai Sinai
      Shai Sinai

      Thanks for this guide, a very detailed one.

      However, isn't it a little paradoxical to use Web IDE for a local SAPUI5 application?

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Shai,

      thanks for your feedback. SAPUI5 applications can also be created using the SAPUI5 Yeoman generator. I explained that in one of my other posts: https://blogs.sap.com/2020/04/07/ui5-tooling-a-modern-development-experience-for-ui5/. The SAP Fiori elements applications do not yet have a Yeoman generator available (at least nothing is known to me here).

      BR,

      Peter

      Author's profile photo Shai Sinai
      Shai Sinai

      Thanks.

      Yet, using non-local IDE for a local SAPUI5 application sounds a little paradoxical to me.
      Is there any pragmatic use case for it?

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Basically, there are good arguments for both - having the IDE either local or remote. The main advantage of an online IDE is that your projects are available on any machine, there is no setup and configuration required to connect to your cloud systems and there is no hardware limitation since all resources are stored in your workspace in the cloud.

      Author's profile photo Shai Sinai
      Shai Sinai

      Yes,

      These are all valid points, of course.

      My question was if there is any use-case for creating an SAPUI5 application via the Web IDE and then run it locally?

      Author's profile photo Ethan Jewett
      Ethan Jewett

      Yes, of course. 2 or more developers working on the same application, one using WebIDE and one using a local development toolchain.

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      A centrally managed IDE has some limitations on which tools can be used and in case of you want to extend this IDE with additional plugins to improve your development experience then this can only be done on your local IDE. There you have everything under control and you can plugin different tools as you want and as you need.

      Author's profile photo Somnath Paul
      Somnath Paul

      Business Application Studio possibly does 'Yo'. - Thanks Som

      Author's profile photo Pascal Gutheil
      Pascal Gutheil

      Cool! Thought about that when the 2.0 tooling was released, but a small caveat is that so far only the version 1.76 of the SAPUI5 libraries are released via the npm channel. A lot of customers run 1.71 due to the announced maintenance duration, but I guess older versions are not brought to npm?

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Pascal,

      thanks for your feedback. Unfortunately, supporting 1.71 would be a lot of work. But as of today, you can either use a proxy middleware e.g. ui5-middleware-simpleproxy or use the ui5-middleware-servestatic and download a 1.71 runtime from https://tools.hana.ondemand.com/#sapui5.

      HTH and BR,

      Peter

      Author's profile photo Benjamin Kreuscher
      Benjamin Kreuscher

      Hi Peter,

      is there a blog or tutorial out there how e.g. in my case UI5 v1.48.20 can be used locally with the UI Tooling via the mentioned middlewares?

      I was not able to find one.

      BR

      Benjamin

      Author's profile photo Robert Eijpe
      Robert Eijpe

      Thanks Peter, a very helpful blog

      Author's profile photo Aleksandr karpov
      Aleksandr karpov

      Hi Peter.

      I have my own ui5 library. Can i include(use) my library in other local development project?

      I tried to use ui5-middleware-servestatic with rootPath = path to library folder but it is doesn't work.

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Aleksandr,

      when you have your own library, I would recommend to use the library type for the project in the ui5.yaml and put the source in the src folder - similar like we do it in OpenUI5, e.g. for the sap.ui.layout library: https://github.com/SAP/openui5/blob/master/src/sap.ui.layout/ui5.yaml

      ---
      specVersion: "1.1"
      type: library
      metadata:
        name: my.custom.lib
      

      In the package.json you just need a dependency to the sap.ui.core library:

      {
        "name": "my.custom.lib",
        "version": "1.0.0",
        "description": "My awesome custom library",
        "author": "Me",
        "license": "Apache-2.0",
        "dependencies": {
          "@openui5/sap.ui.core": "1.78.0"
        }
      }

      Now in your other project you can consume this library as normal dependency either by using npm link or the automatic linking of yarn workspaces in your monorepo (see the ui5-ecosystem-showcase repository setup).

      In your application you can consume the library as follows in the package.json:

      {
        "name": "my-app",
        "version": "1.0.0",
        "description": "My unbelievable app",
        "private": true,
        "author": "Me again",
        "license": "Apache-2.0",
        "dependencies": {
          "my.custom.lib": "^1.0.0"
        }
        "devDependencies": {
          "@ui5/cli": "^2.2.4"
        }
      }

      Compared to the UI5 framework dependencies such as OpenUI5 or SAPUI5 which will reside in the ui5.yaml, the custom libraries are included as dependencies in the package.json.

      Now your library is also considered for the self-contained build and it will also be properly served by the ui5 serve development server.

      HTH and BR,

      Peter

      Author's profile photo Aleksandr karpov
      Aleksandr karpov

      Thanks very much, Peter.

      I will try to use this approach.

      Author's profile photo Aleksandr karpov
      Aleksandr karpov

      Hi, Peter.

      I tried to use npm link and dependencies section in package.json for library consuming and it is work fine for simple folder structure project/webapp, but i have more complicated path project/src/main/webapp(by history reason) and it doesn't work. In resources folder i don't see library files.

      Can i resolve my problem?

      And second question. Can i consume library in integration test in Jenkins, maybe there is some blogs with example?

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Aleksandr,

      in the ui5.yaml you can maintain the paths configuration and change it from webapp to src/main/webapp:

      specVersion: "2.0"
      metadata:
        name: my-app
      type: application
      resources:
        configuration:
          paths:
            webapp: src/main/webapp

      For the second question, this basically depends on the setup there and what is used. If you would start the server there using ui5 serve this should also work for integration tests. But it dependends on the infrastructure being used there. If it is not a node based build it might be more complicated and needs to be fully understood how it is setup right now.

      HTH and BR,

      Peter

      Author's profile photo Aleksandr karpov
      Aleksandr karpov

      Thanks, Peter.

      But I already configure paths section in ui5.yaml and when localhost  is started              i don't see mylibrary in resource folder.

      I create project with standard path( project/webapp ) and i see library in resource folder.

      I think that the problem in the right folder structure of project.

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Can you share the project somehow with me?

      Author's profile photo Aleksandr karpov
      Aleksandr karpov

      Thanks, Peter. Thanks for help.

      I resolve my issue. It is strange for me that if in package.json i have a section

        "ui5": {
          "dependencies": [ .. ]
      }
      i must add "mylib" in this section and in other case(section "ui5" omitted)  i can add in dependencies section .
        "dependencies": {
          "mylib": "^1.0.0"
        }
      My solution is below:
        "devDependencies": {
          "@ui5/cli": "^2.2.5",
          "eslint": "^6.7.2",
          "ui5-middleware-livereload": "^0.1.10",
          "ui5-middleware-proxy-basicauth": "0.0.6",
          "ui5-task-nwabap-deployer": "^1.0.10",
          "ui5-task-transpile": "^0.1.5",
          "mylib":"^0.0.1"
        },
        "ui5": {
          "dependencies": [
            "ui5-middleware-livereload",
            "ui5-middleware-proxy-basicauth",
            "ui5-task-transpile",
            "ui5-task-nwabap-deployer",
            "mylib"
          ]
        },
      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Ahh, yes - this is important. Once the "ui5" > "dependencies" are maintained the UI5 tooling only checks the dependencies listed here.

      Happy to hear that you solved the issue! 🙂

       

      Author's profile photo Fedor Shestov
      Fedor Shestov

      Cannot run the command "npx ui5 serve -o test/flpSandbox.html" I get a mistake "Unknown Middleware ui5-middleware-simpleproxy". What can it be?

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Fedor,

      sorry for my late reply - either you missed to run:

      npm install ui5-middleware-livereload --save-dev

      Or you missed to add the entries to the ui5 > dependencies in the package.json:

        "ui5": {
          "dependencies": [
            "@sap/ui5-builder-webide-extension",
            "ui5-middleware-simpleproxy",
            "ui5-middleware-livereload"
          ]
        },

      Hope this helps and best regards,

      Peter

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Thanks for the detailed blog. Very useful

      I have managed to set up my project and all is good.

      I have two issues though. Please see my comment in your other blog - UI5 Tooling: a modern development experience for UI5!

       

      Thanks

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Timothy,

      good question, I assume this is related to your question at my other blog?

      https://blogs.sap.com/2020/04/07/ui5-tooling-a-modern-development-experience-for-ui5/comment-page-1/#comment-529720

      If yes, then it is related to the SAP Fiori tools proxy rather than the simpleproxy. But also for the simpleproxy, there is no dedicated option to pass the SAP client and I would also avoid this configuration here as the simpleproxy is not SAP related. I need to check how to pass that information separately.

      Best regards,

      Peter

      Author's profile photo Aleksandr karpov
      Aleksandr karpov

      Hi, Peter.

      I have a question.

      I want to use some SAPUI5 services such as:

      sap.ui2.srvc.get(sUrl, /*XML=*/true, successHandler, errorHandler);
      But i don't know how to add them in ui5.yaml. I tried to use library section, but it doesn't work.
      Maybe you can help ?
        libraries:
          - name: sap.ui2.srvc
            development: true
      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Aleksandr,

      in the current shipment of the SAPUI5 distribution to NPM, the sap.ushell_abap library is missing. This library also includes the sources from sap.ui2.srvc. We are working on the availability of this library on NPM and can hopefully ship it soon with one of the next releases.

      An option to overcome this today would be to use either the servestatic or proxy custom middleware. E.g. you can add the following routing for the proxy middleware to the ui5.yaml (assuming that you are also loading UI5 locally):

      server:
        customMiddleware:
        - name: ui5-middleware-simpleproxy
          afterMiddleware: compression
          mountPath: /resources/sap/ui2/
          configuration:
            baseUri: "https://sapui5.hana.ondemand.com/resources/sap/ui2/"
            strictSSL: false
        - name: ui5-middleware-simpleproxy
          afterMiddleware: compression
          mountPath: /resources/sap/ushell_abap/
          configuration:
            baseUri: "https://sapui5.hana.ondemand.com/resources/sap/ushell_abap/"
            strictSSL: false
      

      Hope this helps...

      Best regards,

      Peter

      Author's profile photo Aleksandr karpov
      Aleksandr karpov

      Thanks, Peter.

      I will try this solution.

      Author's profile photo Bilen Cekic
      Bilen Cekic

      hi Peter Muessig

      Just want to ask after running

      ui5 build --all  --exclude-task=createDebugFiles --include-task= generateAppPreload

      is it possible to have only pre-load files rather than entire library files? I want to upload my project to SAP but there are 5k+ files (even without .dbg) and it makes it nearly impossible to push to server.

       

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Bilen Cekic

      did you try to run the build without the --all option? This will only create the bundles / preload for the application and doesn't build the libraries. Or maybe I got it wrong?

      Best regards,

      Peter

      Author's profile photo Bilen Cekic
      Bilen Cekic

      hi Peter

      Yes you are right but it won't include library files. I am looking a way like webpack where it will pack entire library also 3-5 js files. Problem here is, based on SAP, i can't use SAP CDN to bootstrap my application in server (please correct me if i wrong) i have FES 6.0 in my server and it doesn't bring the version i want. I am planning to push a dummy application to server just to use it's UI5 resource files for any other app that i am deploying. (here i always have index.html to refer any ui5 resource)

      So i included the version and library in ui5.yaml which it puts to resource folder correctly, problem is there are thousands of files. With eclipse pushing take too long, now i am trying with SAPUI5 Repository Load program via URL but not sure it will succeed. I was thinking UI5-CLI can build pre-load like files (maybe very few but big in size). In this case pushing will be easy. Is there way to do above scenario ? I don't want to publish UI5 library to my personal AWS S3 folder and consume from there.

       

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Bilen,

      sorry for my late reply. AFAIK, this isn't possible. The step to copy the resources in the tooling is deeply manifested. Maybe the excludes might work (I didn't try that yet). But anyways, beside the JS files you also need the CSS files and eventually the mimes, right?

      I did not have this kind of scenario in my mind yet. I will follow up with the developers of the UI5 Tooling whether this is possible somehow. As said, the resources excludes might work:

      https://sap.github.io/ui5-tooling/pages/Configuration/#exclude-resources

      You could use globs to exclude all files except of the library-preload.js and the library.css eventually?

      Best regards,

      Peter

      Author's profile photo Bilen Cekic
      Bilen Cekic

      Thanks Peter for your reply.

      Yes it looks we need a command like

      UI5 build --all with_library_preload_only

      something like that :). If we use exclude it will be alot i think.

      i used ui5 build -all and deleted all .js files except library-preload files. Also leave fonts, .properties files, .css files (sap.ui.thirdparty have no pre-load so i included entire folder). I think with this way it looks working. overall 5k files i will push to server. It will take time maybe up to hours but this application will be my ui5 library files where i don't depend by FES server components.

      My index.html will contain(all other apps will refer to this URL )

      sap/bc/ui5_ui5/sap/zlocal_cdn/resources/sap-ui-core.js

      I am just wondering, anyone want to use openui5 and want to have npm build-like command, how do they deploy their apps (without openui5 cdn)

      Thank you

       

       

       

      Author's profile photo Add Belati
      Add Belati

      Hi Bilen, did you find an answer for this?

      Author's profile photo Bilen Cekic
      Bilen Cekic

      hi Add,

      There is no solution. As per Peter, entire library is too much nested and i think it is hard to generate a file as we think on other frameworks. My solution was a custom CDN implementation via Azure. Currently SAP also does not allow to bootstrap via sapui5.ondemand.com (technically you can). I am still using sapui5 cdn temporarily but will move to Azure CDN.
      I tried to remove all uncessarry files from generated files and finally made it around 30mb which i can deploy but it is too much work. Does not make sense on the long term.

       

      Author's profile photo Add Belati
      Add Belati

      What about using webpack? Can you share your email to discuss off-line?

       

       

      Author's profile photo Amrit Mohapatro
      Amrit Mohapatro

      Hi,

       

      How can I add the local annotation file while deploying the code using UI5 tooling. I can see the local annotation file cannot be fetched, hence could not display the chart data in fiori element.

       

      Thanks

      Sumit