Generate Your First SAPUI5 App

Open the Fiori Application Generator in VS Code, pick a Fiori Elements template, connect to an OData service, and generate the project skeleton.

Generate Your First SAPUI5 App

The fastest way to start a SAPUI5 project is the SAP Fiori Application Generator inside VS Code.

Step 1 — Open the generator

Press Ctrl+Shift+P → type Fiori: Open Application Generator → press Enter.

Step 2 — Choose a template

Select SAP Fiori Elements → List Report Page (good default for most enterprise apps).

Step 3 — Choose a data source

For a local mock server (no BTP account needed yet), select:

• Data source: None
• Template: List Report Page
• Click Next

Step 4 — Fill in project details

Click Finish. The generator creates the folder and runs npm install automatically.

Step 5 — Open the project

cd my-first-app
code .

Alternative — CLI without VS Code

npx @sap/create-fiori-app my-first-app
# follow the interactive prompts

This runs the same wizard as the VS Code generator but from the terminal — useful in CI or when you prefer the command line.

What gets generated

my-first-app/
├── webapp/
│   ├── manifest.json       ← app descriptor (most important file)
│   ├── Component.js        ← app entry point
│   ├── index.html          ← local test page
│   └── view/               ← XML views
├── ui5.yaml                ← build/serve config
└── package.json

The manifest.json is the heart of every SAPUI5 app — it declares the data model, routing, and UI settings.