UI5 Middleware FE Mockserver in Practice

A comprehensive, hands-on tutorial for mastering @sap-ux/ui5-middleware-fe-mockserver with Fiori Elements and beyond. Learn through 9 progressive exercises covering setup, data strategies, actions, multi-service scenarios, tenant isolation, offline E2E testing, and recording real backend traffic.

Get Started Jump to Exercises

Why This Tutorial Matters

The mockserver enables you to develop and test Fiori apps locally and offline with metadata-accurate data, predictable scenarios, and action implementations—without waiting on backend availability. This tutorial distills best practices into small, focused exercises you can run immediately.

Exercise Overview

Each exercise builds upon the previous one, creating a comprehensive understanding of mockserver capabilities for Fiori development and offline testing.

Exercise Focus Key Takeaways Port
1. Basic Setup – Generated Data Zero-config mock data from metadata Start fast; remove backend proxy for true offline; draft simulation 8081
2. Custom JSON Data Predictable datasets Stable testing scenarios; relationships; consistent IDs and referential keys 8082
3. JavaScript Logic Dynamic data + actions Implement getInitialDataSet and executeAction ; validations; latency simulation 8083
4. Multiple Services Bookshop + Reviews Microservices-style config with distinct metadata and datasets 8084
5. Cross-Service Communication Service-to-service flows Trigger operations across services (e.g., promotion creates review) 8085
6. Context-Based Isolation Tenant-specific data Use ?sap-client= to switch tenants; optional tenant-aware logic 8086
7. Error Handling Business and system errors Return 400/404/422/500/501 with helpful messages for UI testing 8087
8. Offline E2E Testing wdi5 + mockserver Reliable CI-ready tests without backend dependency 8088
9. Record Live OData ui5-middleware-odata-recorder Capture real backend traffic → generate mock datasets for offline replay 8089
10. TypeScript Types fe-mockserver-admin Generate TypeScript types from metadata for type-safe mock data development 8090

Who Is This For?

Role Value
Fiori Elements developers Develop offline, simulate actions, validate UI flows without backend
Freestyle UI5 developers Dynamic datasets, custom logic, error scenarios, cross-service patterns
Test engineers Stable, backend-free E2E tests with wdi5

Quick Start

Ready to begin? Start with the Prerequisites & Setup to configure your development environment, then jump into Exercise 1 for your first hands-on experience with the mockserver.

All exercises are designed to run locally with the provided CAP backend service. You'll find commands, file locations, and ready-to-run configurations for each scenario.

Related Resources