Skip to Content
Technical Articles
Author's profile photo Wouter Lemaire

Migrate UI5 apps to UI5 Tooling in your local IDE

SAP invested and still invests a lot of effort in providing a good IDE in SCP, called SAP Web IDE. This IDE comes with out of the box tools to develop your UI5 app. These tools helps you with creating a build  of your apps, test them and deploy it to the backend. Next to that, you could also prefer to use any other local IDE. Although, SAP did not really provide tools for this. For local developments, you had to use several third-party tools. The third-party tools are not the issue, but the time it takes and making the effort to setup everything that works together with UI5 is a lost cost.

Now with the new UI5 tooling, SAP provides a solution that closes the gap between local UI5 development and SAP Web IDE. It provides tools that replace the third-party tools and give you the same possibilities that comes out-of-the-box in SAP Web IDE.

UI5 Tooling is the key enabler to free your developers. Developers can choose for SAP Web IDE or any other local IDE. They will have all tools in any IDE to create their UI5 app.

SAP Web IDE is great, especially for beginners, but experienced UI5 developers will prefer their local IDE. Local IDE’s, like VSCode, also offer a nice Development eXperience.

In this blog, I want to share how you can migrate your UI5 app from SAP Web IDE to your local IDE by using the new UI5 Tooling. I’m using VSCode for this and I used the sample app from SAP:

For this, I will start from my UI5Con app which is available on GitHub:

The result with the new UI5 tooling is available in this repository:

You can clone my UI5Con app or export one of your apps in the SAP Web IDE and follow the steps.

Configure UI5 project

Let’s start by installing the UI5 CLI:

npm install --global @ui5/cli

The UI5 Tooling is using an additional config file. You can add this manually but it’s easier by just running the following command. This will add the file “ui5.yml”:

UI5 init

It will add the name of your project in this file with the type of the application (can be application or library)

Add dependencies to UI5 libraries that you’re using to your project. (this is only needed if you want to test locally, you could also use the online url to the SDK)

npm install @openui5/sap.ui.core
npm install @openui5/sap.m
npm install @openui5/sap.f
npm install @openui5/themelib_sap_belize

These commands will add the dependencies in the package.json

You could also do it the other way around by adding the dependencies manually to the “package.json” and just run “npm install”

Remove the “@sap/grunt-sapui5….” devDependency and add the following just to start with:

Run “npm install” after adding the devdependencies.

Next, add the basic scripts:

  • Start: runs the app based on the code in the webapp folder
  • Lint: uses eslint to run basic code checks on the code in the webapp folder
  • Build: this command will remove the dist folder and build the code from the webapp folder together with the libraries defined in the dependencies.
  • Sapbuild: does the same as the build command but will only build the code from the webapp folder

Grunt is not needed anymore and can be removed:

Code checks

Just like in SAP Web IDE, we like to have code validation. Therefore, we need to configure ESLint.

In case you didn’t configure lint and you run ESLint, it will give you the following error:

npm run lint

ESLint needs configuration which can be added manually to your project or by running:

Eslint –init

This will generate a basic ESLint config file.

I have added the following config into the file “.eslintrc.json” to supports arrow functions, spreading operator, …

    "env": {
        "es6": true,
        "browser": true
    "parserOptions": {
        "ecmaVersion": 9,
        "sourceType": "module"
    "globals": {
        "sap": true,
        "jQuery": true
    "rules": {
        "block-scoped-var": 1,
        "brace-style": [2, "1tbs", {
            "allowSingleLine": true
        "consistent-this": 2,
        "no-div-regex": 2,
        "no-floating-decimal": 2,
        "no-self-compare": 2,
        "no-mixed-spaces-and-tabs": [2, true],
        "no-nested-ternary": 2,
        "no-unused-vars": [2, {
            "vars": "all",
            "args": "none"
        "radix": 2,
        "keyword-spacing": 2,
        "space-unary-ops": 2,
        "wrap-iife": [2, "any"],
        "camelcase": 1,
        "consistent-return": 1,
        "max-nested-callbacks": [1, 3],
        "new-cap": 1,
        "no-extra-boolean-cast": 1,
        "no-lonely-if": 1,
        "no-new": 1,
        "no-new-wrappers": 1,
        "no-redeclare": 1,
        "no-unused-expressions": 1,
        "no-use-before-define": [1, "nofunc"],
        "no-warning-comments": 1,
        "strict": 1,
        "valid-jsdoc": [1, {
            "requireReturn": false
        "default-case": 1,
        "dot-notation": 0,
        "eol-last": 0,
        "eqeqeq": 0,
        "no-trailing-spaces": 0,
        "no-underscore-dangle": 0,
        "quotes": 0,
        "key-spacing": 0,
        "comma-spacing": 0,
        "no-multi-spaces": 0,
        "no-shadow": 0,
        "no-irregular-whitespace": 0


I also added a .eslintignore file to ignore all the files in the libs folder. This is not my code and I’m not going to change the libraries:


If you now run “npm run lint”, you’ll have something like this:

Build your app

The building process is one of the most important steps for creating a productive UI5 app. It will create a productive version of your code by generating a minified and debug version of each file and a component-preload file for your project. This will speed up the load time of your app!

I defined two build scripts in the package.json:

  1. First one will create a full build together with the libraries
    1. It will put the build result of the libraries in the resource folder under dist
    2. This can be useful for local testing or creating a standalone UI5 app
  2. Second one will only create a build of the code in the webapp folder without building the libraries -> much faster build time

In case you deploy to an SAP backend, you don’t want to deploy the libraries in the resource folder as this is already on the system. Therefore, I use the SAPBUILD command.

Using sapbuild requires you to use the online SDK:

The resource folder will then only contain a json file with the version:

The result of the build will look like this:

Run the app

The UI5 Tooling also provides a server to test your app locally. Test your app in the webapp folder by the running the following statement:

npm run start

App is running but you’ll probably get the following error in case you use an OData service:

Solution for this is explained in the following blog:

Run productive version

Add devdependency “serve” and a script to serve the dist folder

Npm install followed by npm run start:dist will run the app from the dist folder

Full run script

In the end, you should have a script to test the app from the webapp folder with proxy, from the dist folder without proxy and one for the dist folder with build and proxy in one command:

This is explained in details here: :



Final step, deploying your app to your front-end server. For this, I’m going to use the module “nwabap-ui5uploader” and add a script “deploy”

Fill in all the details of your system in this script:

"deploy": "npx nwabap upload --base ./dist --conn_server \"ABAP_DEVELOPMENT_SERVER_HOST\" --conn_user \"ABAP_DEVELOPMENT_USER\" --conn_password \"ABAP_DEVELOPMENT_PASSWORD\" --abap_package \"ABAP_PACKAGE\" --abap_bsp \"ABAP_APPLICATION_NAME\" --abap_bsp_text \"ABAP_APPLICATION_DESC\" --abap_transport \"TRANSPORTNR\""

Npm install to install the node module and use the following command to deploy to your backend:

npm run deploy

Optional config

You can also use the node module “watch” to optimize your local setup. This module will keep track of all your changes and runs other commands as soon as something changes. I use this one to trigger the build task each time something changes in my code. It will update the code in the dist folder without restarting the “start” command.

Add the “npm-watch” module to the devDependencies, a watch script and watch config. Don’t forget to add it to your start script:

Every change in the webapp folder will trigger a rebuild of your code:

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Pierre Dominique
      Pierre Dominique


      Thanks for sharing this Wouter. I found an issue with ui5-server ( when running a project created in the Web IDE locally. Did you run into it as well?



      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      No, didn't tried that yet...

      Author's profile photo Graff Christian
      Graff Christian

      Hi Wouter,


      thanks again for this excellent content!

      In your demoproject's package.json I saw that you included some kind of environment variables for the deployment script. How do you manage these variables? How do you set them and interpret them at runtime? Afaik the only possibility of variables in package.json were the $npm_package_* variables referencing to some other properties inside the package.json itself.




      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      The variables are coming from gitlab...

      Author's profile photo Yulia Chernishova
      Yulia Chernishova

      Hello Wouter,


      thanks for post. I have question. If I use some library from SAPUI5 which didn't exist in OpenUI5, charts for example, can I use UI5 tooling?




      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Good question, in theory it will only work for libraries that are available on npm... I can only find openui5 packages so I don't think so...

      Author's profile photo Martin Voros
      Martin Voros


      I just solved this problem. There is a npm package called sapui5-runtime.

      After adding this package and npm rebuild, it downloads the specified UI5 SDK. Afterwards, I defined a new middleware extension that checks request path. If the path starts with "/resources/", the extension simply loads the corresponding file from the local file.

      It would be nicer if SAP published all SAPUI5 libs as NPM packages but for now, it seems to be working fine. I also use the same extension to load custom reusable library that is in a different repo. I still need to polish some small details so the same repo works in WebIDE and in local IDE without any issues.

      Author's profile photo Bassel El-Bizri
      Bassel El-Bizri

      Again and Again Wouter thank you for your great blogs 

      Author's profile photo Zhounan Ye
      Zhounan Ye

      Hi Wouter,


      Thanks for your great post. I mentioned that there was a task called generateLibraryPreload when running ui5 build. Is there any condition for triggering this task. I failed to do it.


      Do u mind if we have a call for this issue?


      Victor Ye