SAP UI5 Fiori App Structure Explained – Complete Guide to Every File in the Free-Style JavaScript Template
When you create a new Free-style Fiori application using the SAP Fiori tools Application Generator, you get a ready-made project structure with many files and folders. For beginners, this structure can look confusing. Even experienced developers sometimes forget the exact purpose of certain files.
In this post, we will go through every single file that is generated in a standard JavaScript (non-TypeScript) Free-style UI5 application. You will understand what each file does and why it is important.
This is the base template. In a later post we will also cover the same structure when TypeScript is enabled.
SAP UI5 Fiori App Structure
Click any file on the left to jump to its explanation.
ESLint Configuration
What it does
Defines linting rules using the modern flat config format (ESLint 9+). It helps catch common JavaScript mistakes and keeps the code style consistent across the team.
Project Manifest
What it does
Contains the project name, version, scripts and all dependencies. This is the file npm reads when you run commands.
npm start– starts the local development servernpm run build– creates a productive buildnpm test– runs unit and integration tests
Dependency Lock File
What it does
Locks the exact versions of every package so every developer and CI environment gets the same dependency tree.
Project Documentation
What it does
The first thing people see when they open the repository. Replace the generated text with your own documentation.
UI5 Tooling Configuration
What it does
Main configuration for the UI5 Tooling. It tells the tooling where the webapp lives, which UI5 version to use, and which middleware or custom tasks to apply.
Local Override
What it does
Optional override used when you want to serve UI5 libraries from a local folder instead of the CDN.
Mock Server Configuration
What it does
Activates the UI5 Mock Server so the application can run against local metadata instead of a real backend.
Application Component
What it does
The root of the UI5 application. It creates the component instance, initializes models, sets up the router, and defines the root view.
Root Controller
What it does
Controller for the root App view. Usually very lightweight and handles only application-wide concerns.
Demo Page Controller
What it does
Contains the logic for the sample Demo page (event handlers, formatters, navigation, etc.).
Custom Stylesheet
What it does
Application-specific CSS. UI5 already provides a complete theme, so only put necessary overrides here.
Translation Bundle
What it does
Stores all user-visible texts as key-value pairs so the application can be translated later.
Bootstrap HTML
What it does
The HTML file loaded by the browser during local development. It bootstraps UI5 and creates the component.
OData Metadata
What it does
The $metadata document used by the Mock Server. It describes entity sets, properties and associations.
Application Descriptor
What it does
The most important configuration file in a modern UI5 app. It declaratively defines:
- App identity (ID, title, version)
- Data sources and models
- Routing configuration
- UI5 library dependencies
Model Factory
What it does
Helper module that creates and returns the device model (and any other global models). Called from Component.js during startup.
OPA5 Journey Loader
What it does
Loads all integration (OPA5) journey files so they can be executed by the test runner.
Test Arrangement
What it does
Starts the application before each OPA5 journey so every test begins from a clean state.
App Page Object
What it does
Reusable actions and assertions for the root App view. Keeps journey files clean and maintainable.
Demo Page Object
What it does
Page object for the Demo view – same pattern as the App page object.
Unit Test Loader
What it does
Loads all QUnit unit test modules so they can be run together.
Sample Unit Test
What it does
Shows how to write a QUnit unit test for a controller method in isolation.
Root View
What it does
The outermost view. Usually contains an App or Shell control that acts as the container for all other pages.
Demo Page View
What it does
XML definition of the sample Demo page. This is where you declare controls, bind data, and attach event handlers.
Conclusion
Understanding the standard Free-style UI5 project structure is very important. Once you know the purpose of each file, it becomes much easier to add new pages, configure routing, write tests, or prepare the application for production.
This post covered the pure JavaScript version of the template. In the next post, we will look at the same structure when TypeScript is enabled and explain the additional files that appear.
If you found this guide useful, feel free to leave a comment below. Your feedback helps me improve future posts.
Happy coding!
Comments
Post a Comment