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.
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.
Thanks for sharing and for the mention.
There is now an official way to create a Component-Preload file using SAP/grunt-openui5 · GitHub was released a couple of days ago..
many thanks for your tutorial. It was a very helpful guide to create a Component-preload file!
Now I have some problems to load my *.xml and *.js files from the Preload-file. I would appreciate your help very much in this case and hope that you could find some time to take a look at this.
In Chrome I can see, that the preload-file is loaded successfully. But all xml/js files are still loaded separately and not from this Preload-file.
Here one Example:
The Home View is in the Preload-File, but it is loaded separately:
I guess, the problem is a wrong fpath or a wrong application- name.
I´m confused about what the right application-name is. You can see in the next screenshots, that my project in Eclipse is called 2015_03_16DW1. The BSP-Name is Z_WEB_DW. I guess the application name is the prefix of the Component.js. In this case it would be "com.helia.Component.js". But the controllers and views in the project are referenced by “Views”. So I guess the problem are the ressourceroots. There are to Component.js due to a desktop- and a mobile application in the same project which are loaded depending on the device, that calls the application.
and for the Mobile Views/Mobile/Component.js
I have tried all variants by the name or by the fpath in the modules:
Named the Component-Preload:
But nothing works!
Same situation by the fpath in the modules.
So what is my mistake? Can you please give me a screenshot of your Component-preload file from Chrome-Debugger? How should my Component.preload be named? And what is the right fpath in the modules. You can see my Eclipse-structure from the screenshots before.
Thanks a lot for your help!
Can you check the versions of the component preload with the preload of a standard app? It has to be exactly the same.
So sorry I did not reply this for almost a year. My focus had shifted from Fiori. Now, it looks like I have to revisit Fiori (Cloud edition).
Did you find a solution to this? My untrained JS mind thinks there is a problem in your HTML <script src ...> tags. Should not they only refer to component-preload.js?
Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question. The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable. Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem. If a blog or document is related, put in a link. Read the Getting Started documents (link at the top right) including the Rules of Engagement.
NOTE: Getting the link is easy enough for both the author and Blog. Simply MouseOver the item, Right Click, and select Copy Shortcut. Paste it into your Discussion. You can also click on the url after pasting. Click on the A to expand the options and select T (on the right) to Auto-Title the url.
Thanks, Mike (Moderator)
SAP Technology RIG
I am using SAP UI5 library version 1.24.2 and not the sap.m library but the ui.commons. I do not get this error of
Component-preload.js 404 Not found.
Is it available only after a specific version of library?
This blog is 2 years old and for a very old version of SAPUI5. Component.js is still a integral part of SAPUI5 app and so should Component-preload.js.
Specially if you use WebIDE to build these apps, the build toolset creates Component-preload.js during the deployment.
Hence this trick is no longer required.
Thanks and regards,
Thank you for the post. It is very helpful !
But how can I put .css, .hdbtextbundle files into Component.preload.js ?
Thanks and best regards,
I have moved on from this topic, but as far as I know, the CSS cannot be bundled into minified .js files. You need to minify CSS separately. Please have a look at the existing CSS minification libraries - http://goalsmashers.github.io/css-minification-benchmark/. You can contribute to the github project and add the CSS minifation tasks as well.
You can contribute to the GitHub project and add the CSS minification tasks as well.
Thanks and regards,