Skip to Content
Author's profile photo Subhra Jyoti Saha

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:

eclipse-start.PNG

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

Node.PNG


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

node-installed.PNG

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

folder-start.PNG


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 –


folder-mid.PNG


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.


gulpfile-modify.PNG


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.


gulpcmd-proxy.PNG



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.


folder-end.PNG


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).


node-modules.PNG


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.


/wp-content/uploads/2014/12/eclise_refresh_605329.png  /wp-content/uploads/2014/12/right_605331.jpg  /wp-content/uploads/2014/12/eclipse_format_605332.png  /wp-content/uploads/2014/12/right_605331.jpg eclipse-final.PNG


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.



Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo John Patterson
      John Patterson

      Hi Subrha

      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..


      cheers

      JSP

      Author's profile photo Former Member
      Former Member

      Hello Subra,

      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:

      Chrome_Component-preload.pngThe Home View is in the Preload-File, but it is loaded separately:

      /wp-content/uploads/2015/03/separated_667087.jpgI 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./wp-content/uploads/2015/03/bootstrap_667088.jpg

      /Desktop/Views/Component.js :

      /wp-content/uploads/2015/03/over1_667097.jpg

      and for the Mobile Views/Mobile/Component.js

      /wp-content/uploads/2015/03/over2_667099.jpg

      I have tried all variants by the name or by the fpath in the modules:

      Named the Component-Preload:

      /wp-content/uploads/2015/03/prenamed_667105.jpg

      2015_03_16DW1/Component-preload

      com.helia/Component-preload

      com.helia/WebContent/Views/Desktop/Component-preload

      2015_03_16DW1/WebContent/Views/Desktop/Component-preload

      2015_03_16DW1/Component-preload

      Z_WEB_DW/Component-preload

      Etc….

      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!

      Author's profile photo Subhra Jyoti Saha
      Subhra Jyoti Saha
      Blog Post Author

      Can you check the versions of the component preload with the preload of a standard app? It has to be exactly the same.

      Author's profile photo Subhra Jyoti Saha
      Subhra Jyoti Saha
      Blog Post Author

      Robert,

      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?

      Regards,

      Subhra

      Author's profile photo Michael Appleby
      Michael Appleby

      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

      Author's profile photo thekkina purayil
      thekkina purayil

      Hello All,
      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?

      Regards,
      Purayil

      Author's profile photo Subhra Jyoti Saha
      Subhra Jyoti Saha
      Blog Post Author

      Hello Purayil,

      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,
      Subhra

      Author's profile photo Phong Dam
      Phong Dam

      Hi Subrha,

      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,

      Phong

      Author's profile photo Subhra Jyoti Saha
      Subhra Jyoti Saha
      Blog Post Author

      Hi Phong,

       

      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,

      Subhra