Migrate UI5 apps to UI5 Tooling in your local IDE

[WouterLemaire]

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:

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
   
   
   
   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: https://blogs.sap.com/2019/08/26/ui5-tooling-custom-server-middleware-proxy-extension/

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: : https://blogs.sap.com/2019/08/26/ui5-tooling-custom-server-middleware-proxy-extension/

 

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: