SAP Fiori Development Setup Guide 2024

Setting up a productive Fiori development environment takes some configuration. Here's the definitive guide.

Option 1: SAP Business Application Studio (Recommended)

BAS is the cloud-based IDE for SAP development:

1. Access via SAP BTP Cockpit

2. Create a Dev Space with "SAP Fiori" preset

3. All tools pre-installed: UI5 Tooling, Fiori Tools, ABAP connectivity

Option 2: VS Code + SAP Fiori Tools

For local development:

Install prerequisites

npm install -g @ui5/cli

npm install -g @sap/ux-ui5-tooling

Install VS Code extensions

code --install-extension SAPOSS.sap-ux-fiori-tools-extension-pack

Essential Configuration

**ui5.yaml** for local development:

specVersion: "3.0"

type: application

metadata:

name: my-fiori-app

server:

customMiddleware:

- name: fiori-tools-proxy

afterMiddleware: compression

configuration:

backend:

- path: /sap

url: https://my-sap-system.example.com