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.