Build and dev-server tooling

Serving an app locally and building it for deployment — proxying a backend, transpiling, bundling, and shaping the result for whatever will host it.

Overview

SAP SHIPSby design
Freestyle →

@ui5/cli The UI5 Tooling command line for project setup, the local dev server and the build, which defines a UI5 project's shape and its two extension points, custom middleware and custom tasks.

Fiori elements →

@ui5/cli The UI5 Tooling command line for project setup, the local dev server and the build, which defines a UI5 project's shape and its two extension points, custom middleware and custom tasks.

Not covered: It stops at the extension points. Proxying to a real backend, live reload, zipping for deployment and bundling npm dependencies are all left to middlewares and tasks that others write.

SourceSAP/ui5-tooling — repositorychecked
THE COMMUNITY ADDS

Custom middlewares and tasks on the extension points, from the UI5 community organisation and independent authors: serving and proxying (backend proxies, the CAP middleware, live reload and hot reload), transpiling, LESS and string replacement, bundling npm dependencies through ui5-tooling-modules, zipping and deployment steps, and checks on the output. SAP adds extensions of its own beyond the core CLI, such as a code coverage middleware and the deprecated Web Components wrapper tooling.

Artifacts42

42 of 42 artifacts
ArtifactSignals
Build tools37
@ui5/middleware-code-coverageUI5 CLI middleware for Istanbul code coverage
Signals
none
@ui5/tooling-webcDeprecated UI5 Tooling extensions for UI5 Web Components wrappers
Signals
Archived
ui5-middleware-approuterUI5 CLI middleware proxying the dev server through @sap/approuter
Signals
none
ui5-middleware-capUI5 CLI middleware running a CDS server inside the UI5 dev server
Signals
none
ui5-middleware-destinationUI5 Tooling middleware proxying destinations and neo-app.json routes
Signals
Quiet+1
ui5-middleware-hmrExperimental UI5 middleware for hot module replacement
Signals
none
ui5-middleware-iasyncUI5 middleware syncing interactions across browsers over websocket
Signals
none
ui5-middleware-indexUI5 middleware serving a chosen welcome page at the root path
Signals
none
ui5-middleware-livereloadLive reload middleware for the UI5 dev server
Signals
none
ui5-middleware-odata-recorderUI5 middleware recording OData traffic as mock server datasets
Signals
Functional boundary
ui5-middleware-oidcUI5 dev server middleware adding an OpenID Connect login
Signals
none
ui5-middleware-oneloginUI5 middleware logging in with Playwright and reusing the session
Signals
none
ui5-middleware-route-proxyUI5 server middleware proxying route prefixes to a backend
Signals
Quiet
ui5-middleware-serveframeworkUI5 middleware serving a locally built UI5 framework
Signals
none
ui5-middleware-servestaticUI5 middleware serving static resources from a path or npm package
Signals
none
ui5-middleware-simpleproxyDev-server middleware proxying requests to a backend system
Signals
none
ui5-middleware-ui5UI5 middleware including one UI5 application in another
Signals
none
ui5-middleware-webjarsUI5 middleware serving static resources from JAR files (WebJars)
Signals
none
ui5-middleware-websocketWebSocket support for Express-based dev servers such as UI5's
Signals
none
ui5-plugin-loaderUI5 Tooling v4 extension that registers other extensions
Signals
none
ui5-task-btp-manifestUI5 Tooling task writing the service name into the importer manifest
Signals
none
ui5-task-cachebusterUI5 builder task cachebusting standalone UI5 applications
Signals
none
ui5-task-cachebuster-indexingUI5 builder task preparing build output for the cachebuster
Signals
Quiet
ui5-task-check-eocpUI5 build task warning when the app's UI5 version reaches EOCP
Signals
Functional boundary
ui5-task-copyrightUI5 builder task appending copyright headers to source files
Signals
none
ui5-task-dts-generatorUI5 builder task generating d.ts type declarations
Signals
none
ui5-task-flatten-libraryUI5 builder task flattening library output for SAP NetWeaver
Signals
none
ui5-task-i18ncheckUI5 builder task checking XML views for missing i18n texts
Signals
none
ui5-task-minifierUI5 builder task minifying HTML, CSS and JSON files
Signals
none
ui5-task-minify-xmlUI5 builder task minifying XML views and fragments
Signals
none
ui5-task-pwa-enablerUI5 builder task turning a UI5 app into a progressive web app
Signals
none
ui5-task-transpile-genUI5 builder task transpiling ES6 to ES5 with Babel
Signals
Quiet
ui5-task-zipperBuild task packaging the UI5 build result as a zip archive
Signals
none
ui5-tooling-lessUI5 CLI extension compiling Less files into CSS
Signals
none
ui5-tooling-modulesUI5 tooling extensions loading npm packages as UI5 modules
Signals
none
ui5-tooling-stringreplaceUI5 CLI extension for string replacement during the build
Signals
none
ui5-tooling-transpileUI5 CLI extension transpiling code during the UI5 build
Signals
none
CLI tools2
@ui5/cliUI5 Tooling command line for project setup, dev server and build
Signals
none
ui5-deployerUI5 Tooling module deploying Fiori/UI5 apps to SAP systems
Signals
none
Generators1
generator-ui5-library-af-deployYeoman generator for Application Frontend config in UI5 libraries
Signals
Functional boundary
IDE extensions1
UI5 ToolsVS Code extension to serve, proxy, build and deploy UI5 projects
Signals
none
Packages1
@ui5/loggerInternal logger of the UI5 CLI
Signals
none

Content3

Group by
Piece, what it offers
UI Composition with Application Frontend Service
SAP Community, Vadim Tomnikov, BlogThe reasoning
How to consume UI5 custom libraries in BAS or VS Code
SAP Community, Mio Yasutake, BlogThe reasoningA recipeRunnable code
UI Composition with Application Frontend Service
SAP Community, Vadim Tomnikov, BlogThe reasoning
How to Use NPM Modules Like crypto-js in SAPUI5 Using UI5 Tooling Modules
SAP Community, DakshKumarSingh, Blog

Seen working13

ArtifactSignals
Samples13
@ui5/sample-appOpenUI5 sample app set up with the UI5 CLI
none
ui5-appUI5 app carrying 18 UI5 CLI extensions in one configuration
none
ui5-bookshop-viewerUI5 app consuming the cds-bookshop server via ui5-middleware-cap
none
ui5-errorhandler-sampleTwo UI5 apps consuming one npm package in two ways
No license
ui5-fe-mockserver-tutorialTen exercises on the Fiori elements mock server middleware
No license
ui5-libSample setup for developing a UI5 library
none
ui5-moduleCustom UI5 control packaged as an npm package
none
ui5-monorepo-showcasepnpm workspace developing a UI5 app, library and plugin together
No license
ui5-ts-modules-showcaseShowcase of consuming npm libraries from a TypeScript UI5 app
none
ui5-tsappTypeScript UI5 app consuming custom UI5 CLI extensions together
none
ui5-tsapp-webcTypeScript UI5 app consuming @ui5/webcomponents
none
ui5-tsmoduleTypeScript UI5 module consumed through ui5-tooling-modules
none
ui5con24-dev-envpnpm workspace running CAP, a local launchpad and two UI5 apps
No license

Details

Coverage
statecore and community, UI5
assessed
relationshipnarrow by design
SourceSAP/ui5-tooling — repositorychecked
For your agent
Ref
capability:ui5-build-tooling
JSON
/capabilities/ui5-build-tooling.json
MCP
Connecting an agent