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