How to build Component-preload.js for Fiori like custom apps

DISCLAIMER: SAP does not have an ‘Official’ toolset to achieve this. ** Though I am an SAP employee, SAP does not endorse the methods, toolset or the codes that I have used in this guide.

Hi Fiori Friends,

I am sure when one tried to build first few custom Fiori like applications in SAPUI5 you have encountered a problem regarding Component-preload.js.

Especially if you tried to figure out the which files are required to run the application via Chrome debugger tools, most probably you have encountered the following error –

/sap/bc/ui5_ui5/sap/…./Component-preload.js 404 Not found

This is an error due to the absence of such a file from the custom Fiori like app directory. To avoid this some of us add a dummy Component-preload.js file in the eclipse working folder and commit the changes to the Gateway server. While it is sufficient to stop the error by this way, we fail to achieve the intent of Component-preload.js file.

The purpose of Component-preload.js file is to load all the project resources in one single file. This resolves multiple problems for the online app – it reduces loading time and maintains single source for project resources. It also reduces the total payload of resource files.

The component-preload file is a minified and uglified combination of all javascript and xml resources. How to achieve this?

Well while this is not rocket science , it is a multi-step process. When I started the process myself, I could not find many reusable resources which will enable me do achive what I wanted. Following is the step-by-step guide which will help you to create such a file.

Note: I assume you use Windows. The reusable files are created accordingly. If you use OS X or Linux, you may need to change the batch file and node installations. Also gulpfile.js needs to changed include unix style separators from ‘/’ to ‘\’.

The reusable files are at sjsaha/Fiori-Reusables · GitHub 

Step 1: You have finished your Eclipse based SAPUI5 development  and your project looks like this:

Step 2: Download Noad.js installer and install in your OS. Source: http://nodejs.org/download/

Step 3: Install the node and confirm the node installation from command prompt, by checking the Node.js version

Step 4: Please close Eclipse and go to the workspace folder in Windows Explorer and navigate to the WebContent folder of your Fiori UI project

Step 5: Download the files (gulpcmd.bat and gulpfile.js) from github – https://github.com/sjsaha/Fiori-Reusables and copy the files  in WebContent folder. After copying the directory structure should look like this –

Step 6: Modify the ‘gulpfile.js’ to suit your project name and structure. At minimum, please modify your application name. You may need to change individual gulp tasks according tour project structure and needs.

Step 7: Review the gulpcmd.bat file. If your computer is behind a corporate network proxy you might need to delete the REM from the following lines and change to the proxy servers IP or domain name.

Step 8: Execute the gulpcmd.bat file by double clicking or open the command prompt at WeConetent folder. This script should work in a verbose mode and if there is no error, will silently create a Component-preload.js file in the WebContent folder.

Warning: The script does download a lot of Node plugins. So network connectivity is required. Also it will create a ‘node_modules’ folder in the working directory, where Node is installed (check PATH in environment variables).

Step 9: Rest of the tasks are standard development tasks. Open Eclipse, Format the project folder to import the generated files, delete the gulpfile.js and gulpcmd.bat from eclipse.

Step 10: Commit the new project into NetWeaver Gateway server.

Step 11: Run the new Fiori app.

Do not forget to read the documentation at Extending and Testing SAP Fiori Apps before you modify / build your custom app.

To know more about the problem and solution you may refer to the following forum posts.

component-preload.js not found  (404 not found) In SAP fiori like UI5 APP

Inline XMLViews into component-preload.js 

John Patterson’s confidence on Gulp.js helped me to create the reusable tools.

As I said this is an indicative how-to, may not work 100% for your project implementation. I hope it gives a good starting point, on which you can build your own successful Fiori app.

Let’s get fast and fiori-ous.

____________________________________________________________________________________________________________________________________

** SAP now has an official method to package SAPUI5 into Component-preload at SAP/grunt-openui5 · GitHub. The Fiori specific tools had to be reused from there.

This methods still remain valid, – especially for those who like gulp.js more than Grunt.