Prerequisites & Setup

🚀 Two Ways to Use This Tutorial

Option 1: Run the Tutorial Examples (Clone Required)

If you want to run the complete tutorial examples ( ex1/ , ex2/ , ... ex9/ ) with all configurations already set up:

# Clone this tutorial repository
git clone https://github.com/marianfoo/ui5-fe-mockserver-tutorial.git
cd ui5-fe-mockserver-tutorial
npm install

# Also clone and run the CAP backend service (see CAP Backend Setup below)
git clone https://github.com/marianfoo/ui5-call-action.git
cd ui5-call-action
npm install
npm run deploy
npm run watch  # Keep running on http://localhost:4004

Option 2: Create Your Own App (No Clone Needed)

If you want to create your own Fiori app and follow the tutorial concepts:

• No need to clone this repository
• Just follow the tutorial steps to set up your own app
• You'll still need the CAP backend service for complete testing (see CAP Backend Setup below)
• Generate your own Fiori Elements app using SAP Fiori Application Generator or EasyUI5 Generator

Required Tools

• Node.js (20 LTS or higher)
• npm (comes with Node.js)
• Git - for cloning repositories

CAP Backend Service Setup

This tutorial uses a SAP CAP (Cloud Application Programming) service with multiple OData endpoints and actions. You'll need to run the backend service locally:

1. Clone and setup the CAP service:

git clone https://github.com/marianfoo/ui5-call-action.git
cd ui5-call-action
npm install
npm run deploy             # sets up the SQLite database with sample data
npm run watch              # starts CAP server on http://localhost:4004

2. Verify the service is running:

Open http://localhost:4004 in your browser. You should see:

• BookshopService : /bookshop - Main service with Books, Chapters, Reviews
• ReviewsService : /reviews - Dedicated review management service

Fiori Application Prerequisites

This tutorial is based on Fiori Elements List Report & Object Page applications. You can use your already existing app, or generate a new one using the tools below.

Option 1: SAP Fiori Application Generator (Recommended)

Generate a Fiori Elements app connected to the CAP BookshopService:

• Service Type : OData URL
• Service URL : http://localhost:4004/bookshop
• Main Entity : Books
• Navigation Entity : chapters (optional)
• Template : List Report Page V4

Tutorial : Create App with Fiori Tools

Option 2: EasyUI5 Generator

Alternative generator for UI5 applications:

Tutorial : Create App with EasyUI5 Generator

Generated App Structure

After generation, your app will include:

• manifest.json with BookshopService configuration
• localService/mainService/metadata.xml (downloaded from CAP service)
• ui5.yaml and ui5-mock.yaml configurations

Tutorial Repository

Learn to use @sap-ux/ui5-middleware-fe-mockserver for offline Fiori development.

Documentation & Repository

• Repo : SAP open-ux-odata
• Docs : Open UX OData Docs

Exercise Structure

Each ex{n}/ folder contains a Fiori application demonstrating different mockserver capabilities: