File Structure and their Usage

Below File structures were created -

fioriui5 (application name)
|
|- node_modules (Folder)
|
|- webapp (Folder)
|   |- controller (Folder)
|   |   |- App.controller.js
|   |   |- View1.controller.js
|   |
|   |- css (Folder)
|   |   |- style.css
|   |
|   |- i18n (Folder)
|   |   |- i18n.properties
|   |
|   |- model (Folder)
|   |   |- models.js
|   |
|   |- test (Folder)
|   |
|   |- view (Folder)
|   |   |- App.view.xml
|   |   |- View1.view.xml
|   |
|   |- Component.js
|   |- index.html
|   |- manifest.json
|   
|- .appGenInfo.json
|- .gitignore
|- mta.yaml
|- package-lock.json
|- package.json
|- ui5-deploy.yaml
|- ui5-local.yaml
|- xs-app.json
|- xs-security.json

Understand the Files and their usage -

1. node_modules Folder

• It is a core part of Application (which uses npm Node Package Module) as this file store all the project dependencies.
• You can delete this folder and when you execute the command npm install then npm automatically create this folder and install the dependencies.
• Which dependencies needs to be installed is defined on package.json file so npm uses the details from package.json and install the dependencies on node_module folder.

2. webapp Folder

• It is the main source folder of the application that contains application runtime resources like index.html, Component.js, manifest.json, view, controller, etc.
• It contains all files which will be deployed and served to the browser.

2.1. controller Folder

• This folder contains all the controller files of the views.
• The controller file of each view holds the logics of that view.

2.1.1. App.controller.js

• It is a JS file which controls the main view (App view).
• It controls how the app behaves when it starts and during navigation etc.

2.1.2 View1.controller.js

• It is a JS file which controls the specific view (View1, or View2, etc).
• It contains the View specific logics.

2.2. css Folder and style.css file

• CSS Folder and style.css file is used to define custom styles that overrides or extend the standard SAP UI5/Fiori visual designs.
• This file configuration has been already defined on the manifest.json file under resources on sap.ui5 section.

2.3. i18n Folder and i18n file

• i18n stands for Internationalization Resource files used to store all translatable texts for your app.
• i18n.properties file is default language resource file (usually English). It contains the data in Key-value pair and can be binded (used) with the view.
• Its binding with UI(View) is called One-Time Binding as it gets loaded when the application gets loaded.
• Its configuration is defined on the model section on manifest.json file.

2.4. model folder and models.js file

• The model folder is the place to keep all model-related utilities and helpers.
• It helps to keep the setup modular, reusable and centralized.
• The models.js file is typically a utility module that exposes function to create and configure models used throughout the app.
• The models.js file uses the device dependency of sap.ui library and provide information about the current devices and environment (phone, tablet, desktop, orientation) at the runtime and hence provide Responsive UI out of the box and its is Read-Only safe with OneWay binding.
• This model is then set to the view through Component.js file.

import JSONModel from "sap/ui/model/json/JSONModel";
import Device from "sap/ui/Device";

export function createDeviceModel () {
    const model = new JSONModel(Device);
    model.setDefaultBindingMode("OneWay");
    return model;
}

2.5. test folder

• It contains files which are used for QUnit-based Testing.

2.6. view folder and App.view.xml file

• View Folder contains the UI Definition of the application where each view represents a visual part of the app.
• App.view.xml is the root view of UI5 application and act as a container for other views/pages.
• All other views are loaded inside this root container.
• <App> of sap.m.App is a navigation container that holds multiple sap.m.Page controls and manages transitions from one page to other.

<mvc:View controllerName="fiori.ui5app.controller.App"
    displayBlock="true"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <App id="app">
    </App>
</mvc:View>

2.7. Component.js

• Component.js is the starting point (logical starting point) of application and act as main controller of the whole application.
• It loads the manifest.json file and initialize Router which injects target (main view) into <App>.
• It also sets the device model (defined on models.js file) for the whole application.

import BaseComponent from "sap/ui/core/UIComponent";
import { createDeviceModel } from "./model/models";

/**
 * @namespace fiori.ui5app
 */
export default class Component extends BaseComponent {

	public static metadata = {
		manifest: "json",
        interfaces: [
            "sap.ui.core.IAsyncContentCreation"
        ]
	};

	public init() : void {
		// call the base component's init function
		super.init();

        // set the device model
        this.setModel(createDeviceModel(), "device");

        // enable routing
        this.getRouter().initialize();
	}
}

2.8. index.html

• It is the Entry point (starting point) of the Application (any UI app have .html file as starting point) which loads the SAP UI5 Framework Application.
• It loads the SAPUI5 Libraries defined on script.
• It also loads the Component.js file also set the SAP UI Theme.
• Without index.html file browser wouldn't know from where to load the UI5 app.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Fiori UI5 Application</title>
        <style>
            html, body, body > div, #container, #container-uiarea {
                height: 100%;
            }
        </style>
        <script
            id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"
            data-sap-ui-theme="sap_horizon"
            data-sap-ui-resource-roots='{
                "fiori.ui5app": "./"
            }'
            data-sap-ui-on-init="module:sap/ui/core/ComponentSupport"
            data-sap-ui-compat-version="edge"
            data-sap-ui-async="true"
            data-sap-ui-frame-options="trusted"
        ></script>
    </head>
    <body class="sapUiBody sapUiSizeCompact" id="content">
        <div
            data-sap-ui-component
            data-name="fiori.ui5app"
            data-id="container"
            data-settings='{"id" : "fiori.ui5app"}'
            data-handle-validation="true"
        ></div>
    </body>
</html>

2.9. manifest.json

• It is the central configuration file of the application.
• It is the descriptor file which tells the SAP UI5 app about the app name, resources needed, routing/navigation used and the model which we are using.
• It contains the app details, sap.ui5 details which includes router details, models, and dependencies.
• It contains the manifest.json version at the top and also contain the SAP UI5 verion used under sap.ui5 section.

3. .app.GenInfo.json

• This file is auto generated by SAP Development Tool when we generate the app from Template.
• It stores the general information about how the app was created, help sap tools to identify the template to re-generate the application.

4. mta.yaml

• It is the blueprint of the app which tells the BTP build/deployment tools what the app consists of, which services it needs, etc.
• It contains details of resources and services like xsuaa, destination, HTML5 App Repo, etc.

5. package-lock.json

• This file gets automatically generate by npm and it locks the exact version of all the dependencies (and sub-dependencies).
• It does this so that everyone using this project gets the same version of dependencies to avoid work on particular machine issue.
• Deleting this fill wouldn't affect the working of application but create some issues as npm will regenerate this file but the exact version of the dependencies will not be installed and can lead to inconsistent behavior between environments.

5. package.json

• It is the main configuration file for a NodeJS project.
• It contains details like project metadata (which includes name, description, version), Dependencies and Script commands.
• It contains a rough version detials of the dependencies.
• The project will not work if you delete this file because it have the details of which dependencies you app needs and which script needs to run.

6. ui5-deploy.yaml

• It is a deployment configuration file which tells Fiori Tools where and how to deploy your build UI5 App.

7. ui5-local.yaml

• It is used to define local development settings for UI5 app which includes local server port, local server middleware, etc.

8. ui5.yaml

9. xs-app.json

• It is a configuration file for the SAP Approuter and defines the routing rules.
• It is used to define authentication and authorization requirements for routes and used by Approuters to handle HTML5 app hosting, Destination based routing, and XSUAA Authentication.
• It contains the welcome file (ie., index.html file), authentication method for route, etc.

10. xs-security.json

• It is used to define Role templates for assigning permission to users.

{
  "xsappname": "my-ui5-app",
  "tenant-mode": "dedicated",
  "scopes": [
    { "name": "$XSAPPNAME.Display", "description": "Display content" },
    { "name": "$XSAPPNAME.Admin", "description": "Admin access" }
  ],
  "role-templates": [
    {
      "name": "Viewer",
      "description": "Can view content",
      "scope-references": [ "$XSAPPNAME.Display" ]
    },
    {
      "name": "Administrator",
      "description": "Full access",
      "scope-references": [ "$XSAPPNAME.Display", "$XSAPPNAME.Admin" ]
    }
  ]
}

Files Generated when we Build the UI5 Application

1. dist Folder

• It is a production ready build output of your UI5 Application created by UI5 tooling when we run the build.
• It contains all the files optimized for deployment (minified, bundled, and structured for fast loading).

2. mta_archives Folder

• It is the location where the built deployable package (.mtar) is generated and stored when we run an MTA Build.

3. resources Folder

• It acts as a container for static assets (like image, logo, icons, background, css, fonts, etc) that your app needs at runtime but are not part of the core UI5 Framework.

Starting Point and Flow of Execution of SAP UI5 Application

• index.html is the first file the browser loads (entry point).

It loads the UI5 Framework defined on UI5 bootstrap script of index.html

• Component.js file gets initialized and loaded with index.html
• manifest.json is consumed by Component.js file to configure routes, models, etc.
• The Routes then loads the main View which then loads the Controller of the View.

So the entry flow is:

index.html ➜ UI5 bootstrap ➜ Component.js ➜ manifest.json ➜ routing/views/controllers

Typical Local Execution Sequence

1. Browser requests index.html

• Served by UI5 tooling or static dev server.

2. index.html loads bootstraps UI5

• It loads sap-ui-core.js library and other resources.
• UI5 Core loads configuration libraries (like sap.m, sap.ui.core) and apply the theme.
• It then loads the Component.js

3. Component.js

• Component.js reads the manifest.json file (through init method) which initialize the models (models.js and i18n), Router and css/style.css

4. manifest.json

• Router then reads the routes from manifest.json and navigates to initial route which is root view (mostly App.view.xml) and then main view (which can be View1.view.xml).
• The view xml file loads their Controller.js file.

Execution Sequence After Deployment (Approuter + HTML5 Apps Repo)

Platform Side

1. xs-app.json

• Browser requests app url through the Approuter (configured via xs-app.json)

2. xs-security.json

• Approuter checkes the authentication/authorization based on service binding defined on xs-security.json

3. index.html

• Static contents are served from HTML5 App Repository or ui5-deploy.yaml target and then redirects to index.html of your app.

UI5 App Runtime (same as local but optimized)

1. index.html

• index.html loads UI5 bootstrap and then refers to Component-preload.js file generated by ui5 build.

2. Component.js and manifest.json

• Component.js file initialize the models, and router.
• Router then reads the routes from manifest.json file and redirect to root view (usually App.view.xml).

3. Views and their Controllers

• App.view.xml loads its controller which is App.controller.js file and the other required view (like View1.view.xml) is served on the <App> section of App.view.xml and the controller of the respective view gets loaded.

4. Destinations/Backend Calls

• If any backend service calls are required, Approuter uses destinations defined in xs-app.json and BTP Destination.

5. Static assets

• Static assets and resources like images, css are delivered from build dist.

File-by-File Sequence Mapping (Local vs Deployed)

Local (ui5 serve)

• index.html
• sap-ui-core.js (UI5 bootstrap)
• Component.js (init/component metadata)
• manifest.json (descriptor; auto-loaded by component)
• models.js (if called from Component.js)
• App.view.xml + App.controller.js
• View1.view.xml + View1.controller.js
• i18n/i18n.properties (as resource model)
• css/style.css

After Deployment (Approuter/HTML5 Repo)

• Approuter → xs-app.json → XSUAA (xs-security.json) (platform layer)
• index.html (from HTML5 repo runtime)
• sap-ui-core.js (UI5 bootstrap; often from CDN or served optimized)
• Component-preload.js (if built; bundles Component.js and other modules)
• manifest.json (may be in preload or fetched separately)
• models.js (if referenced; often in preload)
• App.view.xml/View1.view.xml + controllers (may be preloaded)
• i18n/i18n.properties (resource model, can be preloaded)
• css/style.css (minified; can be part of preload or separate)

Where xs-app.json and xs-security.json Fit

xs-app.json (in project root):

• Defines routes and authentication for the approuter. It decides:
• Which path serves your UI5 app static content (e.g., /resources, /index.html).
• Which paths are proxied to backend destinations.
• xs-security.json:
• Defines scopes/roles for XSUAA service (auth). The approuter uses it to protect your app.

These files do not change the UI5 runtime sequence, they control access and routing before index.html is served.