Understanding SAPUI5 resource path


Resource path tells the browser where all the SAPUI5 libraries are placed. Based on this Resource path, the browser loads the required SAPUI5 libraries.

Whenever we create a SAPUI5 application, the bootstrap section will be something similar to the below code:

<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>

The first line src="resources/sap-ui-core.js" tells the browser that all the SAPUI5 libraries are placed inside the resources folder.

Based on this instruction, the browser registers the resources folder.
Quickly create a SAPUI5 application. Do not worry about placing any control. Run the application in Chrome browser. Press F12 to check the console tab.
You will find an entry similar to below:

registerResourcePath ('', 'resources/') -  sap.ui.ModuleSystem
URL prefixes set to: -  sap.ui.ModuleSystem
(default) : resources/ -  sap.ui.ModuleSystem

This indicates that based on the src="resources/sap-ui-core.js" attribute, the browser has registered Resouce path to the 'resources/'  folder. It is very important to understand this concept, as it will be very helpful in real time debugging of SAPUI5 applications.

Few good to know points:

If you do not define the src parameter in bootstrap section, you will get an error
"Unncaught ReferenceError: sap is not defined"

or NetworkError: 404 File not found

We may not be able to directly locate the resources folder. The path "/resources" is a mapping to a servlet called ResourceServlet. This can be found in the web.xml file placed inside WEB-INF folder. This servlet internally points to JavaResources folder which holds all SAPUI5 libraries.