SAPUI5 Local Development and Deployment
This article describes all necessary steps to create a local development environment in order to develop and run SAPUI5 apps locally with the use of remote servers for data retrieval.
Also it describes how to deploy a developed SAPUI5 app to a local server.
The following instructions are tested on:
- Windows 10 Version 20H2 Build 19042.685
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
node -v npm -v git --version
Installation of SAPUI5 Runtime Environment
Install UI5 Tooling and Verify Installation
npm install –global @ui5/cli ui5 --help
git clone https://github.com/mattxdev/openui5-basic-local-app/ cd openui5-basic-template-app
Run Local Development Server
ui5 serve -o 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 and Deploy a Standalone App to a Local Web Server
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.
The package.json needs to be adapted to consume the UI5 tooling for local defelopment. For more details see openSAP course UI52 and exercise: Week 4 Unit 5: Building and Deploying Your App
Create ui5.yaml file:
Generate a preload bundle in the DIST folder just like the build process in the SAP Web IDE:
ui5 build --all
The --all option makes sure to also build the dependencies, i.e. themes, or make resources like i18n available.
The DIST folder can now be deployed to a standalone web server. Therefore install "serve" web server (version 6)
npm install --global serve@6
Start CORS proxy, if needed:
npm run localproxy
Go to the UI5 folder of the app and start the server with parameter for the DIST folder:
Generate self containted build:
ui5 build self-contained --all serve ./dist
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 in the sap-ui-custom.js file.
See also openSAP course UI52 and exercise: Week 4 Unit 5: Building and Deploying Your App