SAPUI5 Local Development and Deployment

This page describes all necessary steps to create development environment in order developt and run SAPUI5 apps locally with the use of remote servers for data retrieval.

The following instructions are tested on:

• Windows 10 Version 20H2 Build 19042.685

Prerequisites

Following software needs to be installed locally:

• Node.js >= 8.5 --> https://nodejs.org/download
• npm >= 5
• Git >= 2.1 --> https://git-scm.com/downloads/
• CLI, i.e. PowerShell or cmd.exe
• Code Editor, i.e. Notepad, VIM, Emacs, Eclipse or Visual Studio Code

Check versions:

node -v
npm -v
git --version

Installation of SAPUI5 Runtime Environment

Install UI5 Tooling and Verify Installation

npm install –global @ui5/cli
ui5 --help

Clone Project

i.e.:

git clone https://github.com/mattxdev/openui5-basic-local-app/
cd openui5-basic-template-app 

Install Dependencies

npm install

Run Local Development Server

ui5 serve -o index.html

This should open a Server at http://localhost:8080/ and run the http://localhost:8080/index.html

Install local CORS Proxy

As it is not a good practice to access different domains from a web app the Chrome Browser will result in CORS errors in the console and the data will not be fetched.

In order work around that limitation a local proxy can be installed. In this repository the CORS anywhere proxy will be used. It is implemented in the proxy.js and in the package.json files.

Run CORS Proxy Server

The CORS proxy server should be run before the UI5 server by issuing:

npm run proxy

Create local ui5.yaml

If a SAPUI5 app is deployed to the local machine, i.e. for testing, a ui5.yaml file will be needed, and probably a CORS proxy server too.

Create ui5.yaml file:

ui5 init

Create and Deploy a Standalone App to a Local Web Server

ui5 build --all

This generates a preload bundle in the DIST folder just like the build process in the SAP Web IDE.

The --all option makes sure to also build the dependencies, i.e. themes, i18n.

The DIST folder can now be deployed to a standalone web server:

npm install --global serve@6

Go to the UI5 folder of the app and start the server with parameter for the DIST folder:

serve ./dist

Generate self containted build:

ui5 build self-contained --all

All UI5 modules used in the application will be analyzed, which controls are defined and used in the application and if needed they are all bundled together.

See also openSAP course UI52 and exercise: Week 4 Unit 5: Building and Deploying Your App