ui5-ecosystem-showcase

The repository is showcasing the ecosystem possibilites of the UI5 Tooling.

:wave: This is a community project and there is no official support! Feel free to use it, open issues, contribute, and help answering questions.

Prerequisites

• Latest releases of the provided tooling extensions require at least @ui5/cli@3.0.0 (to support specVersion: "3.0")

:warning: UI5 Tooling Compatibility All tooling extensions using the major version 3 require UI5 Tooling V3. Any previous releases below major version 3 (if available) also support older versions of the UI5 Tooling. But the usage of the latest UI5 Tooling is strongly recommended!

Overview

This repository showcases the endless possibilities of the UI5 Tooling. The UI5 Tooling extensibility (tasks and middleware) can be used to combine various OSS tools for UI5 application development. This increases the development experience and efficiency and also allows to use well-known tools.

The content of the repository is structured in packages and showcases. The packages folder includes the tooling extensions implementations and the showcases includes the demo applications, libraries and modules.

Packages (Tooling Extensions)

The following list provides an overview of the available tooling extensions in this repository:

1packages
2├── cds-plugin-ui5                  // cds-plugin: embed UI5 tooling based projects via express middleware into CDS server
3├── dev-approuter                   // dev time wrapper for the SAP Application Router that can serve UI5 and CDS modules added as dependencies
4├── karma-ui5-transpile             // karma preprocessor: transpile sources using ui5-tooling-transpile
5├── ui5-middleware-cap              // middleware extension: use the CDS server middlewares inside the UI5 tooling
6├── ui5-middleware-approuter        // middleware extension: use the approuter as proxy for SAP Cloud Foundry or SAP XS Advanced backend services
7├── ui5-middleware-iasync           // middleware extension: sync UI interaction across browsers (alpha! careful!)
8├── ui5-middleware-index            // middleware extension: serve an HTML file for / (root)
9├── ui5-middleware-livereload       // middleware extension: usage of livereload for development
10├── ui5-middleware-onelogin         // middleware extension: enable a generic login support
11├── ui5-middleware-serveframework   // middleware extension: serve resources of a locally built framework
12├── ui5-middleware-servestatic      // middleware extension: serve static resources
13├── ui5-middleware-simpleproxy      // middleware extension: simple express proxy
14├── ui5-middleware-ui5              // middleware extension: enable UI5 application dependencies for UI5 dev server
15├── ui5-middleware-webjars          // middleware extension: deliver content from JAR files
16├── ui5-middleware-websocket        // middleware extension: enable web sockets for the UI5 Tooling
17├── ui5-task-cachebuster            // task extension: enables cachebusting for standalone applications
18├── ui5-task-copyright              // task extension: append copyright for TypeScript, JavaScript or XML files
19├── ui5-task-flatten-library        // task extension: prepares build result for deployment to SAP NetWeaver
20├── ui5-task-i18ncheck              // task extension: checks for missing i18n texts
21├── ui5-task-minify-xml             // task extension: minify xml resources
22├── ui5-task-pwa-enabler            // task extension: enables ui5 app with pwa functionalities
23├── ui5-task-zipper                 // task extension: bundle the entire webapp in a zip-archive
24├── ui5-tooling-less                // tooling extension: serving and building less files
25├── ui5-tooling-modules             // tooling extension: direct consumption of NPM packages in UI5 apps
26├── ui5-tooling-stringreplace       // tooling extension: replaces placeholder strings
27├── ui5-tooling-transpile           // tooling extension: transpile resources using Babel
28└── ui5-utils-express               // utilities: helper stuff for express

Showcases (Demos)

The following list provides an overview of the available showcases in this repository:

1showcases
2├── approuter                       // Showcase for the dev-approuter
3├── cds-bookshop                    // CDS bookshop app to showcase cds-plugin-ui5
4├── cds-bookshop-ui5-viewer         // UI5 bookshop viewer referenced in cds-bookshop
5├── ui5-app                         // UI5 application
6├── ui5-app-simple                  // simple UI5 application using UI5 Tooling V3
7├── ui5-bookshop-viewer             // Standalone UI5 bookshop viewer to demo ui5-middleware-cap
8├── ui5-lib                         // UI5 library
9├── ui5-module                      // UI5 module providing a custom control as NPM package
10├── ui5-tsapp                       // TypeScript UI5 application
11├── ui5-tsapp-simple                // simple TypeScript UI5 application using UI5 Tooling V3
12└── ui5-tslib                       // TypeScript UI5 library

Getting Started

First of all, make sure to use a proper long-term support version of Node.js. You can download it from nodejs.org or use nvm.

The ui5-ecosystem-showcase repository is a monorepo based using pnpm. To get started with pnpm, it's best to install it globally:

1# Install pnpm (if not done already)
2npm i -g pnpm

To get started with the project, please ensure to run pnpm install once to setup your mono repo and download and install all required dependencies.

1# Install the node modules via pnpm
2pnpm install

To get started just run one of the following commands:

1# 1) Run the dev mode
2# which gives you 
3# - live reload of ui5-app/webapp/**/**
4# - live transpilation of ui5-app/webapp/**/** on the fly
5#   including debug functionality via source maps
6#   (attention: async functions not yet supported!)
7# - proxy functionality at $server/proxy
8# - POC: same proxy middleware reused at $server/proxy2
9# - cf-style proxy destinations at $server/$destinations
10# - ability to execute the same UI actions across all browsers pointed to http://localhost:1081/index.html
11# - using NPM packages as dependencies
12pnpm dev
13
14# 1.1) Run the TypeScript app dev mode
15# which gives you 
16# - live transpilation of TypeScript code
17# - using NPM packages as dependencies
18pnpm dev:ts
19
20# 2) Run the Component-preload build + transpile steps
21# which in addition to the above
22# - transpiles all ui5-app/webapp/**/* to ui5-app/dist
23# - live reload of ui5-app/dist/**/*
24pnpm watch
25
26# 3) Run the dist folder (needs manual build via `pnpm build` first)
27pnpm start
28
29# 3.1) Run the dist folder for the TypeScript app (needs manual build via `pnpm build:ts` first)
30pnpm start:ts
31
32# 4) Run Unit-(QUnit-)Tests and Integration-(OPA5-)Tests
33# against "as-is" sources in /webapp/* (of /packages/ui5-app)
34# with Chrome
35# note: no transpiling, no bundling/building
36pnpm test:opa5
37
38# 5) Run end-to-end tests
39# in dedicated terminal: 
40pnpm dev # > start the local ui5 server tooling
41# in another terminal:
42# (uses Chrome)
43pnpm test:wdi5 # > run e2e tests via wdi5 from /packages/ui5-app/webapp/test/e2e/*
44
45# 6) Utilize CI for end-to-end tests
46# using Chrome headless
47pnpm test:ci # > start ui5 server in background, runs wdi5-tests, shuts down the ui5 server

Using tasks and middlewares in your project

The tasks developed in this monorepo are also publicly available on NPM right here:

• https://www.npmjs.com/package/ui5-task-cachebuster
• https://www.npmjs.com/package/ui5-task-copyright
• https://www.npmjs.com/package/ui5-task-flatten-library
• https://www.npmjs.com/package/ui5-task-i18ncheck
• https://www.npmjs.com/package/ui5-task-minify-xml
• https://www.npmjs.com/package/ui5-task-pwa-enabler
• https://www.npmjs.com/package/ui5-task-zipper

The middlewares developed in this monorepo are also publicly available on NPM right here:

• https://www.npmjs.com/package/ui5-middleware-cap
• https://www.npmjs.com/package/ui5-middleware-approuter
• https://www.npmjs.com/package/ui5-middleware-iasync (alpha! careful!)
• https://www.npmjs.com/package/ui5-middleware-index
• https://www.npmjs.com/package/ui5-middleware-livereload
• https://www.npmjs.com/package/ui5-middleware-onelogin
• https://www.npmjs.com/package/ui5-middleware-serveframework
• https://www.npmjs.com/package/ui5-middleware-servestatic
• https://www.npmjs.com/package/ui5-middleware-simpleproxy
• https://www.npmjs.com/package/ui5-middleware-ui5
• https://www.npmjs.com/package/ui5-middleware-webjars
• https://www.npmjs.com/package/ui5-middleware-websocket

The tooling extensions (contains tasks and middlewares) developed in this monorepo are available on NPM right here:

• https://www.npmjs.com/package/ui5-tooling-less
• https://www.npmjs.com/package/ui5-tooling-modules
• https://www.npmjs.com/package/ui5-tooling-stringreplace
• https://www.npmjs.com/package/ui5-tooling-transpile

The consumption of the individual tasks and middlewares can be seen inside their local README.md.

Available tasks in this project:

NPM package	Description	Badge
ui5-task-cachebuster	enables cachebusting for standalone applications
ui5-task-copyright	append copyright for TypeScript, JavaScript or XML files
ui5-task-flatten-library	prepares build result for deployment to SAP NetWeaver
ui5-task-i18ncheck	checks for missing i18n texts
ui5-task-minify-xml	minify xml resources
ui5-task-pwa-enabler	enables ui5 app with pwa functionalities
ui5-task-zipper	bundle the entire webapp in a zip-archive

Available middlewares in this project:

NPM package	Description	Badge
ui5-middleware-cap	use the CDS server middlewares inside the UI5 tooling
ui5-middleware-approuter	use the approuter as proxy for SAP Cloud Foundry or SAP XS Advanced backend services
ui5-middleware-iasync	sync UI interactions across connected browsers (alpha! careful!)
ui5-middleware-index	serve an HTML file for / (root)
ui5-middleware-livereload	usage of livereload for development
ui5-middleware-serveframework	serve resources of a locally built framework
ui5-middleware-servestatic	serve static resources
ui5-middleware-onelogin	enable a generic login support
ui5-middleware-simpleproxy	simple express proxy
ui5-middleware-ui5	enable UI5 application dependencies
ui5-middleware-webjars	deliver content from JAR files
ui5-middleware-websocket	enable web sockets for UI5 tooling

Available tooling extensions in this project:

NPM package	Description	Badge
ui5-tooling-less	build less files
ui5-tooling-modules	direct consumption of NPM packages
ui5-tooling-stringreplace	replace placeholder strings
ui5-tooling-transpile	transpile resources using Babel

Other NPM packages in this project:

NPM package	Description	Badge
cds-plugin-ui5	embed UI5 tooling based projects via express middleware into CDS server
dev-approuter	dev time wrapper for the SAP Application Router that can serve UI5 and CDS modules added as dependencies
karma-ui5-transpile	Karma preprocessor to transpile sources using ui5-tooling-transpile
ui5-utils-express	utilities for express

Backend Connectivity

The UI5 Ecosystem Showcase provides several tooling extensions which can be used to connect to different backends.

cds-plugin-ui5

cds-plugin-ui5

The cds-plugin-ui5 is a CDS server cds-plugin which enables the integration of UI5 tooling based (UI5 freestyle or Fiori elements) projects into the CDS server via the UI5 tooling express middlewares. The UI5 or Fiori elements projects just need to be located in the app folder of the CDS server or be dependency of the CDS server.

ui5-middleware-cap

ui5-middleware-cap

The ui5-middleware-cap is a UI5 tooling middleware which is used to improve the development experience for the SAP Cloud Application Programming Model (CAP) and enables the integration of a CDS server into the UI5 development server via the CDS server express middlewares. In addition to the middleware the CDS server project needs to be added as dependency so that the server is detected and attached properly. The pre-defined routes in the CDS server are reused.

ui5-middleware-approuter

ui5-middleware-approuter

Middleware for ui5-server, making destinations configured in SAP Cloud Foundry or SAP XS Advanced available for local development using the http-proxy-middleware.

@sap/approuter

@sap/approuter

The application router is designed to work in XS Advanced - Cloud Foundry and XS OnPremise Runtime.

A calling component accesses a target service by means of the application router only if there is no JWT token available, for example, if a user invokes the application from a Web browser. If a JWT token is already available, for example, because the user has already been authenticated, or the calling component uses a JWT token for its own OAuth client, the calling component calls the target service directly; it does not need to use the application router.

dev-approuter

dev-approuter

The dev-approuter is a development time tooling only for the SAP Application Router that can serve UI5 and SAP Cloud Application Programming Model (CAP) apps that are added as (dev)dependencies to the approuter's package.json.

ui5-middleware-simpleproxy

ui5-middleware-simpleproxy

Middleware for ui5-server, enabling proxy support.

Comparison

The following table shows a small comparison of the different backend connectivity tooling features:

	cds-plugin-ui5	ui5-middleware-cap	ui5-middleware-approuter	@sap/approuter	dev-approuter	ui5-middleware-simpleproxy
Productive Usage	:x:	:x:	:x:	:white_check_mark:	:x:	:x:
UAA Support	(:white_check_mark:)	:x:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:x:
BTP Destinations	:x:	:x:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:x:
WebSockets	:x:	:x:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Development Usage	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:	:white_check_mark:
Embedding UI5 Middlewares	:white_check_mark:	:white_check_mark:	:white_check_mark:	:x:	:white_check_mark:	:white_check_mark:
Embedding CAP Server	:x:	:white_check_mark:	(:white_check_mark:)*	:x:	:white_check_mark:	(:white_check_mark:)*
Mock UAA Support	:white_check_mark:	:white_check_mark:	(:white_check_mark:)*	:x:	:white_check_mark:	(:white_check_mark:)*
Server processes	1	1	2 (UI5 server + AppRouter)	1 + required servers	2 (AppRouter + CAP)	1 + required servers

* via Proxy

Support, Feedback, Contributing

This project is open to feature requests/suggestions, bug reports etc. via GitHub issues. Contribution and feedback are encouraged and always welcome. For more information about how to contribute, as well as additional contribution information, see our Contribution Guidelines.

License

This work is dual-licensed under Apache 2.0 and the Derived Beer-ware License. The official license will be Apache 2.0 but finally you can choose between one of them if you use this work.

When you like this stuff, buy @vobu a beer or buy @pmuessig a coke when you see them.