SAPUI5 Folder Structure Explained

Walk through each part of a SAPUI5 app folder — webapp, manifest.json, Component.js, views, controllers, and build config.

SAPUI5 Folder Structure Explained

Every SAPUI5 app follows a predictable structure. Here's what each part means.

my-app/
├── webapp/                  ← all runtime source code lives here
│   ├── manifest.json        ← app descriptor (routing, data, i18n)
│   ├── Component.js         ← app entry point — bootstraps the whole app
│   ├── index.html           ← local dev HTML — not deployed to production
│   │
│   ├── view/                ← XML views — one file per screen
│   │   └── Main.view.xml
│   │
│   ├── controller/          ← JS controllers — logic for each view
│   │   └── Main.controller.js
│   │
│   ├── model/               ← data model setup (OData, JSON)
│   │   └── models.js
│   │
│   ├── i18n/                ← translations
│   │   └── i18n.properties
│   │
│   └── css/                 ← custom styles (use sparingly)
│       └── style.css
│
├── ui5.yaml                 ← @ui5/cli config — serves, builds, deploys
├── package.json             ← npm dependencies and scripts
└── .gitignore

Key files explained

manifest.json

The single most important file. It declares:

{
  "sap.app": {
    "id": "com.mycompany.myapp",
    "type": "application",
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata/sap/MY_SERVICE/",
        "type": "OData",
        "settings": { "odataVersion": "4.0" }
      }
    }
  },
  "sap.ui5": {
    "routing": {
      "routes": [{ "name": "main", "target": "main" }],
      "targets": {
        "main": { "viewName": "Main" }
      }
    }
  }
}

Component.js

sap.ui.define(["sap/ui/core/UIComponent"], function (UIComponent) {
  return UIComponent.extend("com.mycompany.myapp.Component", {
    metadata: { manifest: "json" },
    init: function () {
      UIComponent.prototype.init.apply(this, arguments);
      this.getRouter().initialize();
    }
  });
});

ui5.yaml

Controls the local server and build process:

specVersion: "3.0"
metadata:
  name: my-first-app
type: application
server:
  customMiddleware:
    - name: fiori-tools-proxy
      configuration:
        backend:
          - path: /sap
            url: https://your-btp-service.hana.ondemand.com

Golden rules

Never put business logic in a view — keep XML clean, put logic in the controller.
All OData paths go in manifest.json — not hard-coded in controllers.
Use i18n for all user-facing strings — never hard-code text in XML or JS.