SAPUI5, SAP Fiori

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.

Read More: SAP Certifications

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:

https://github.com/SAP/openui5-sample-app

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

https://github.com/lemaiwo/UI5Con2019

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

https://github.com/lemaiwo/UI5ToolsExampleApp

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:

webapp/libs/*.js
webapp/libs/**/*.js

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
i. It will put the build result of the libraries in the resource folder under dist
ii. 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:

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:

Deploy

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:

One thought on “Migrate UI5 apps to UI5 Tooling in your local IDE

  1. Nice post! I am really interested by the possibilities of the UI5 tooling, but actually face some issues with the dependencies (and lack of documentation…)

    Let’s say that we have an UI5 library (own developments) that we want to include in our project. Our library is published as an npm package, so that we just need to list it as dependency in our project package.json

    But when you build, you have the choice to include all (-a) or none of the dependencies. This specific library should be included, while the core libraries should be excluded (provided by the cloud or the FLP). How do you solve this? Unable to find any documentation…

    Another issue is related to the registration of the dependency. We can define the mapping between the namespace and the location in the resourceroots like this in the index.html
    “my.namespace.library”: “../node_modules/@my/library/src/my/namespace/library/”
    but it would differ if you try to run from source or from dist… (../..node_modules….).

    Also still trying to figure out how to register such a namespace in an app deployed to FLP (granted, the preload versions helps here…)

    Would like to hear about your experience….

Leave a Reply

Your email address will not be published. Required fields are marked *