Posts

SAP UI5 Fiori App Structure Explained – Complete Guide to Every File in the Free-Style JavaScript Template

SAP UI5 Fiori App Structure Explained – Every File Guide 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 Free-Style App – File Structure at a Glance 📁 Project Root 📄 eslint.config.mjs → Linting rules for clean & consistent JavaScript 📄 package.json → Project metadata, scripts and dependencies 📄 package-lock.json → Locks exact dependenc...