Skip to Content
Technical Articles
Author's profile photo Matthias Schmalz

How to Get Your Preferred JavaScript IDE Ready for SAPUI5 Development

This blog post picks up where we left off after our article about alternatives for our recently retired SAPUI5 Tools for Eclipse. In this post, we want to show you some useful tips and tricks that are essential to developing SAPUI5 apps with the JavaScript IDE of your choice. There are lots of code samples that you can easily implement in your environment.

In general, we recommend SAP Web IDE as the development environment of choice for SAPUI5 app development. It offers the biggest feature set and integrates easily with ABAP on-premise platforms as well as SAP Cloud Platform. However, you can generally use any IDE that supports JavaScript development. There is a huge variety of UI5 development tools and IDE plugins available. In this blog we pick up one possibility to enable your former Eclipse project, but you can adjust it and pick any other tools as you desire.

Enable Application Preview

It’s key to have a preview when you’re developing an app. Below, we will show how you can enable the application preview with serving UI5 dist-layer libraries via ui5-middleware-servestatic and proxying the OData requests to your ABAP backend via ui5-middleware-simpleproxy. With ui5-middleware-livereload you get the additional benefit of a live reload when files inside your app change, e.g. on save.
We will also enable a deployment to the ABAP system with the custom task ui5-task-nwabap-deployer which will be explained in the next chapter below.

If you want to know more about these middlewares and their usage, check out https://github.com/petermuessig/ui5-ecosystem-showcase.

Here’s how this works:

  1. Since the recent UI5 Tooling is based on JavaScript and runs on Node.js, you should download and install a recent Node.js package from https://nodejs.org.
  2. Download the SAPUI5 runtime resources from SAP Development Tools in the version of your choice.
  3. Create a new directory called download in your project root folder, and unpack the resources in a version-specific folder.
    Example: If you download sapui5-rt-1.71.4, unpack it into download/sapui5-rt-1.71.4. You can also store them in another location, but you’d have to adjust the code below accordingly.
  4. If your ABAP server uses https certificates that are signed by your local IT, you have to establish trust for the root certificates:
    • To retrieve the certificate, you can export it from your browser. It’s important that you use the Base-64 encoded format, because this is the only format Node.js can read.
    • Store the certificate, for example, in your project root directory. You can also store it at a different location, but the project folder has the benefit of allowing relative paths, which are also checked in to Git).
  5. In your project root folder create the following files with the corresponding content, and adjust the blue parts according to your situation:

.gitignore

Dist
node_modules
download
.DS_Store

If the file is already there, just add the missing lines.

package.json

{
  "name": "<Your App Name>",
  "version": "<Your App Version e.g. 1.0.0>",
  "description": "UI5 application to show-case the static serve middleware for offline development",
  "private": true,
  "sslcert": "<SSL Root certificate path if needed>",
  "scripts": {
    "prepare": "mkdirp dist",
    "build": "ui5 build --clean-dest",
    "start": "cross-env NODE_EXTRA_CA_CERTS=$npm_package_sslcert ui5 serve --config ui5-dist.yaml --port 1081 --open index.html",
    "dev": "cross-env NODE_EXTRA_CA_CERTS=$npm_package_sslcert ui5 serve --port 1081 --open index.html",
    "debug": "node --inspect node_modules/.bin/ui5 serve --port 1081",
    "watch:build": "npm-watch build",
    "watch": "npm-run-all prepare --parallel watch:build start",
    "upload": "cross-env NODE_EXTRA_CA_CERTS=$npm_package_sslcert ui5 build --config ui5-dist.yaml --exclude-task * --include-task ui5-task-nwabap-deployer",
    "deploy": "npm-run-all build upload"
  },
  "watch": {
    "build": {
      "patterns": [
        "webapp"
      ],
      "extensions": "html,js,json,xml,properties",
      "quiet": false
    }
  },
  "devDependencies": {
    "@ui5/cli": "^1.10.0",
    "cross-env": "^6.0.3",
    "mkdirp": "~0.5.1",
    "npm-run-all": "^4.1.5",
    "npm-watch": "^0.6.0",
    "ui5-middleware-livereload": "^0.1.4",
    "ui5-middleware-simpleproxy": "^0.1.3",
    "ui5-middleware-servestatic": "^0.1.2",
    "ui5-task-nwabap-deployer": "1.0.1"
  },
  "ui5": {
    "dependencies": [
      "ui5-middleware-livereload",
      "ui5-middleware-simpleproxy",
      "ui5-middleware-servestatic",
      "ui5-task-nwabap-deployer"
    ]
  }
}

If you require additional certificates put the path to it inside the sslcert variable. It can be a relative or an absolute path. Do not forget that JSON encoding requires to escape \ as \\, e.g. “sslcert”:”certs\\sslcert.cer”.

ui5.yaml

specVersion: "1.0"
metadata:
  name: <Your App Name>
type: application
# https://sap.github.io/ui5-tooling/pages/extensibility/CustomServerMiddleware/
server:
  customMiddleware:
  - name: ui5-middleware-livereload
    afterMiddleware: compression
    configuration:
      debug: true
      ext: "xml,json,properties"
      port: 35729
      path: "webapp"
  - name: ui5-middleware-simpleproxy
    mountPath: /sap/opu/odata/
    afterMiddleware: compression
    configuration:
      baseUri: "https://<Host and Port of your ABAP backend>/sap/opu/odata/"
  - name: ui5-middleware-servestatic
    mountPath: /resources
    afterMiddleware: compression
    configuration:
      rootPath: "./download/sapui5-rt-1.71.4/resources"

ui5-dist.yaml

specVersion: "1.0"
metadata:
  name: <Your App Name>
type: application
resources:
  configuration:
    paths:
      webapp: dist
# https://sap.github.io/ui5-tooling/pages/extensibility/CustomServerMiddleware/
server:
  customMiddleware:
  - name: ui5-middleware-livereload
    afterMiddleware: compression
    configuration:
      debug: true
      ext: "xml,json,properties"
      port: 35729
      path: "dist"
  - name: ui5-middleware-simpleproxy
    mountPath: /sap/opu/odata/
    afterMiddleware: compression
    configuration:
      baseUri: "https://<Host and Port of your ABAP backend for testing>/sap/opu/odata/"
  - name: ui5-middleware-servestatic
    mountPath: /resources
    afterMiddleware: compression
    configuration:
      rootPath: "./download/sapui5-rt-1.71.4/resources"
builder:
  customTasks:
  - name: ui5-task-nwabap-deployer
    afterTask: generateVersionInfo
    configuration:
      resources:
        path: "dist"
        pattern: "**/*.*"
      connection:
        server: https://<Host and Port of your ABAP backend for deployment>
        client: '<ABAP Client to use>'
        useStrictSSL: true
      authentication:
        user:
        password:
      ui5:
        calculateApplicationIndex: true
        language: EN
        package: <Package needed for creation>
        bspContainer: <Target UI5 Repository>
        bspContainerText: <Description for creation>
        createTransport: true
        transportText: <Description for transport to create>
        transportUseUserMatch: true
        transportUseLocked: true

Open a command line window for your project folder and run the following:

  • npm install
    This will download and unzip all required dependencies. You need to do this only once as prerequisite. In case you are behind a company proxy, you might have to set proxy environment variables first.
  • npm run dev
    This will start a small server, which will serve your project sources, the downloaded UI5 resources, and forward OData calls to your backend system. It will also launch the app URL in your default browser. If you do a change in your project, the browser will refresh automatically.
  • npm run watch
    This will behave similar than npm run dev, but it will also execute a build of your project and run the preview based on the results. The build produces minified resources and bundles to optimize performance.

That’s it!

Deployment to the SAPUI5 ABAP Repository

It is recommended to set up a continuous integration pipeline for your projects, which will build and deploy to the ABAP server automatically after changes are submitted into the Git repository. Find out how it works: https://developers.sap.com/tutorials/ci-best-practices-fiori-abap.html

If you want to deploy directly from your developer machine you have two options:

  • Option 1: Execute: npm run deploy
    This will run a build and then deploy the build results to ABAP. You can customize the creation of transport requests with the parameters in ui5-dist.yaml, see UI5 Tooling Custom Task to deploy UI5 sources to an ABAP server. To avoid storing your logon credentials in the ui5-dist.yml file, you can set them as environment variables UI5_TASK_NWABAP_DEPLOYER__USER and UI5_TASK_NWABAP_DEPLOYER__PASSWORD.
  • Option 2: Use the ABAP report /UI5/UI5_REPOSITORY_LOAD to deploy the content of the dist folder, see Using the SAPUI5 ABAP Repository

Start a New UI5 Project

In order to start the development of a new app with state-of-the-art techniques, have a look at Introducing the easy-ui5 generator. This tool is able to generate a new UI5 app which uses components and comes with an app descriptor manifest.json as well as a runner for unit tests.

In order to connect OData from your ABAP system and to deploy there, you can just enhance the generated package.json and add the ui5.yaml and ui5-dist.yaml files. A real kickstart for any new UI5 project!

Further Information

As you can see: It’s not difficult to get your preferred JavaScript IDE ready for SAPUI5 projects. If you want to know more about setting up a new local development environment with our UI5 Tooling, check out the following blog post series: End-To-End setup of local development environment with UI5 Tooling.

Assigned tags

      24 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Arindam Seth
      Arindam Seth

      Hello Matthias,

      Thanks for writing, this helped me in setting up my local IDE.

      However, I would like to point out that in the upload script in package.json, the proper command is

      "upload": "cross-env NODE_EXTRA_CA_CERTS=$npm_package_sslcert ui5 build --config ui5-dist.yaml --exclude-task=* --include-task=ui5-task-nwabap-deployer",

      Without the = after the exclude-task command is not recognized and the build happens twice.

      Author's profile photo Matthias Schmalz
      Matthias Schmalz
      Blog Post Author

      Hello Arindam,

      thank you for the hint. I have checked this and for me both ways are working (with = and with space). Maybe this is node.js or os dependent. Which node version and operating system do you use?

      Best regards
      Matthias

      Author's profile photo Arindam Seth
      Arindam Seth

      Hello Matthias,

      I checked on Windows and Linux systems with node 10.6 and 12.x.

      Maybe, this is system dependent as well. Thanks for the blog though.

      Best regards,

      Arindam

      Author's profile photo Sathish g
      Sathish g

      I followed all the above steps . I am using vs code editor .when i run the app using the command 'npm run dev'  , i get error from ui5.yaml file saying

      Err - "metadata.name" configuration is missing for project <my project name>

      npm ERR! code ELIFECYCLE
      npm ERR! errno 1
      npm ERR! po@1.0.0 dev: `cross-env NODE_EXTRA_CA_CERTS=$npm_package_sslcert ui5 serve --port 1081 --open index.html`
      npm ERR! Exit status 1
      npm ERR!
      npm ERR! Failed at the po@1.0.0 dev script.
      npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

      Need help in fixing this !!!!

      Author's profile photo Matthias Schmalz
      Matthias Schmalz
      Blog Post Author

      Hi Sathish,

      this is a strange error. Could you post the content of your package.json and ui5.yaml?

      Best regards
      Matthias

      Author's profile photo Zayidu Ansari
      Zayidu Ansari

      Hello Matthias,

       

      I have followed your approach, BUT locally when I try to preview my app in localhost, the service is not working and it returns 404 error. Below is my code snippet, can you help me find what is wrong?

       

      Also if I want to add one more backend service HANA XS, how should I configure it?

       

      ui5.yaml File:

      specVersion: '1.0'
      metadata:
        name: ZR_MEMBER_PT
      type: application
      # https://sap.github.io/ui5-tooling/pages/extensibility/CustomServerMiddleware/
      server:
        customMiddleware:
        - name: ui5-middleware-livereload
         afterMiddleware: compression
         configuration:
            debug: true
            ext: 'xml,json,properties'
            port: 35729
            path: 'webapp'
       -  name: ui5-middleware-simpleproxy
         mountPath: /sap/opu/odata/
           afterMiddleware: compression
           configuration:
            baseUri: 'https://xxxxlimited.com:44302/sap/opu/odata/'
       - name: ui5-middleware-servestatic
          mountPath: /resources
          afterMiddleware: compression
          configuration:
            rootPath: './download/sapui5-sdk-1.48.20/resources'
      
      Author's profile photo Matthias Schmalz
      Matthias Schmalz
      Blog Post Author

      Hi Zayidu,

      which request URL is returning the 404 response?

      I assume for Hana XS the OData service URLs would be different than /sap/opu/odata, so you have to adjust the URIs a bit.
      I am not sure if it is possible to add 2 simpleproxy middlewares, with the same name. but you can try this. Anyway how would this work, when you have deployed it to the server? Would the hosting server proxy to the service on the other server?

      Best regards
      Matthias

      Author's profile photo Zayidu Ansari
      Zayidu Ansari

      Hello Matthias,

       

      Thanks for your reply.

       

      Odata Proxy URL is returning 404 Errors.

      Please find the below image where you can find the 404 Errors.

      • 1st 404 Error is HANA XS Service URL
      • 2nd 404 Error is Gateway Odata Service URL.

       

      Once I deploy it to the ABAP repo, the business data comes from the HANA XS and I use the OData Gateway service to fetch USER DETAILS by passing the SAP Fiori LP login ID. Hence 2 services.

      Now, I hope you understood the purpose of having 2 services.

       

      Gateway Service URL:

      https://XXXXlimited.com:44302/sap/opu/odata/sap/zel_gw_portal_srv

      XS Service URL:
      As you can see from above, both services are accessible from the same Hostname and Port.
      Could you be kind enough to provide me a code snippet of these 2 service configs in YAML format?
       From your reply, Does 2 simpleproxy middlewares with the same name means mountPath variable names?
      Thanks a lot in advance.
      Best,
      Zayid

       

      Author's profile photo Zayidu Ansari
      Zayidu Ansari

      Hello Matthias,

       

      There was a problem on my Yaml Indentation and hence the request returned 404.

       

      I made the changes now, it’s working but still Odata isnt working, Now it returns – 503 Service Not Available?

       

      Any suggestion?

       

      CLI Log:

      Client requested handshake...
      
      Handshaking with client using protocol 7...
      
      Client message: {"command":"info","plugins":{"less":{"disable":false,"version":"1.0"}},"url":"http://localhost:1081/index.html"}
      
      Server received client data. Not sending response.
      Author's profile photo Matthias Schmalz
      Matthias Schmalz
      Blog Post Author

      Hello Zayidu,

      please try whether the resulting path is working. I.e. take the URL which is called in the browser. Replace the host path including /sap/opu/odata with your base URI https://xxxxlimited.com:44302/sap/opu/odata/ and open it in the browser.
      Does it work? Also check the response body if there is content or the console log of the node runtime.

      Best regards
      Matthias

      Author's profile photo Zayidu Ansari
      Zayidu Ansari

      Hello Matthias,

       

      It works perfectly now in localhost. I am using ui5-middleware-route-proxy now.

       

      Thanks a lot.

      Author's profile photo Zayidu Ansari
      Zayidu Ansari

      npm run build doesn't work? Any idea you can suggest?

      Author's profile photo Zayidu Ansari
      Zayidu Ansari

      How you guys edit your YAML files,

      I am facing lots of indenting errors like in Python, Any VS code extensions, or any other tools.?

       

      Thanks.

      Author's profile photo Matthias Schmalz
      Matthias Schmalz
      Blog Post Author

      I have used VSCode to create the files.
      To avoid indentation issues it is best to avoid using tabs and only use spaces. But sometimes it still happens that a tab is in.

      Author's profile photo Zayidu Ansari
      Zayidu Ansari

      Is there any UI5 Task Middleware To Retrieve an existing UI5 object from SE80/Ui5 ABAP Repositor?

       

      How you guys retrieve the existing ui5 project to Local to do changes?

       

      Thanks!

      Author's profile photo Matthias Schmalz
      Matthias Schmalz
      Blog Post Author

      In the new approach, we don't do this. The repository is only for deployment but not for source versioning. This should be done with Git.

      Also the deployed content is not proper for editing. All files are minified. The original sources have "-dbg" suffix and a Component-preload.js contains everything. If you download them to do changes you have to revert all this to have the original sources back.

      If really needed for a one time migration, the easiest way is via report /UI5/UI5_REPOSITROY_LOAD

      Best regards

      Matthias

      Author's profile photo Zayidu Ansari
      Zayidu Ansari

      Sounds good! Thanks for your reply.

       

      So can you tell me how to change the minified version to the original version?

      Author's profile photo Matthias Schmalz
      Matthias Schmalz
      Blog Post Author

      To revert back, you would have to delete all minified files, which are the Component-preload.js and all single source files without -dbg. Then remove the -dbg from the original sources.

      Afterwards you will have to setup the build and preview configurations as described above and check all into Git.

      Author's profile photo Zayidu Ansari
      Zayidu Ansari

      Thanks a lot for all your responses Matthias.

      Author's profile photo Zayidu Ansari
      Zayidu Ansari

      Hello Guys,

       

      I am facing one issue. I had downloaded the ui5 objects from ABAP repo and I am using ui5-tooling to do the changes, I am editing and adding contents to the xml and in js files

      For eg: 

      • I added a debugger in onInit of one of the controller, the debugger isn’t getting triggered.
      • I added some new contents in xml or change the title in a Panel, still the changes are NOT getting reflected on live serve

      This means any new changes I do and save the files and when I check the new changes in the browser it isn't getting reflected on live serve.

      Any solutions or any idea why this weirdness?

       

      Thanks a lot.

      Author's profile photo Matthias Schmalz
      Matthias Schmalz
      Blog Post Author

      Hello Ansari,

      usually this problem can have 2 reasons:

      • The files are still in the Browser cache. Actually the live serve should suppress caching, but anyway you can try fully clean the browser cache and see if this helps
      • You are not chaning the file that is loaded. The common case is when you change a single source file and either no build is triggered to update the preload bundles or the preload bundles are part of your sources and won't be rebuild.
        Please verify that your source folder does not contain any Component-preload.js files.
        The live serve should run without building preloads. Therefore also check in the network trace that the single files are loaded.
        If you serve from dist folder with compiled preload files, ensure that the build is performed.

      Best regards
      Matthias

      Author's profile photo Zayidu Ansari
      Zayidu Ansari

      Thanks again, Matthias. I deleted my Component-preload.js file and it worked fine.

      Author's profile photo Zayidu Ansari
      Zayidu Ansari

      Is there a way to update the Component-preload file in webapp folder when we amend some changes or Can we generate a Component-preload file using ui5-tooling? if so what will be the build command?

      My current build command, I anyways don’t build my project as it is downloading all the Ui5 libraries and dependencies instead I use “https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js” to load the ui5 library.

      "build": "ui5 build --clean-dest"

      Hence is it possible to generate the Component-preload file in webapp or dev folder instead in the dist folder?

      Author's profile photo Matthias Schmalz
      Matthias Schmalz
      Blog Post Author

      Hi Ansari,

      the webapp folder is the sources folder. This is what you check in to Git.
      It must not contain a Component-preload.js file! If it is there, delete it.

      The dist folder is the folder where build results go to. This is what you deploy. The build will create the preload file by default.

      The preload files do not include UI5 itself but package all single source files of your app. Possibly there are ways to include the used UI5 files as well, but this is out of scope of this blog.

      Regards Matthias