Skip to Content

If you have recently tried to create Fiori application using Fiori Master Details Template under WebIDE version 160519 and deployed it to HANA Cloud Platform, you may have experienced an error 404 – Not found when you are trying to access your application through Hana Cloud Platform landscape as shown below:

/wp-content/uploads/2016/06/404_967654.jpg

If you do face this behavior, here is what’s happening:

    1. By default, HCP was looking for index.html in order to load the site or whatever the parameter welcomeFile which is located in neo-app.json under your project in WebIDE.
    2. Now in WebIDE when the user selects the Fiori Master Details template, this template no longer creates index.html and no longer the welcomeFile = “index.html exists in the neo-app.json anymore. The reason for this change is to allow the application to run within Fiori Launchpad which does not require an index.html file. However this change in behavior, causes the application when it is deployed to HCP not to load anymore when it is accessed by the user. Having said that, the fix for this issue is simple

Here is how to fix this:

      1. In the WebIDE under the webapp folder under your project, create a blank file called index.html
      2. Add the following information below and modify it to match your application and change the following:
        1. Line 14 in the code below make sure that matches your namespace. My name space is called “com.sap.northwind”
          Example: data-sap-ui-resourceroots='{“com.sap.northwind”: “./”}’

        2. Line 22 to same as Line 14 it needs to match your namespace, in my example it is:
          name: “com.sap.northwind”

          
          <!DOCTYPE html>
          <html>
            <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Northwind OData Application</title>
            <!-- Bootstrap the UI5 core library -->
            <script id="sap-ui-bootstrap"
            src="../resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-resourceroots='{"com.sap.northwind": "./"}'
            >
            </script>
            <script>
            sap.ui.getCore().attachInit(function() {
            new sap.m.Shell ({
            app: new sap.ui.core.ComponentContainer ({
            height: "100%",
            name: "com.sap.northwind"
            })
            }).placeAt("content");
            });
            </script>
            </head>
            <!-- UI Content -->
            <body class="sapUiBody" id="content">
            </body>
          </html>
          
          
          
          
          
          
      3. Save the changes
      4. Edit the file neo-app.json under your project in WebIDE which is located on the root of the project and add this line before “routers”:

        “welcomeFile”: “/webapp/index.html”,

        It should look like this:
        {
        “welcomeFile”: “/webapp/index.html”,
            “routes”: [
               {
                 :
                 :

      5. Save the changes
      6. Now deploy your application to HANA Cloud Platform (HCP)
      7. You should be able now to access your application
      8. Here is the end result for my sample running on HANA Cloud Platform Trial Landscape:

        /wp-content/uploads/2016/06/northwind_967742.jpg

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Michael Klopf

    I followed your steps and changing the neo-app.json to /webapp/index.html helped, but after that it said that it couldn’t find the Component.js:

    Uncaught Error: failed to load ‘ourcompanyname/approval/Component.js’ from ./Component.js: 404 – Not Found

    What helped here is to change the index.html from

    data-sap-ui-resourceroots='{“ourcompanyname.approval”: “./”}’

    to

    data-sap-ui-resourceroots='{“ourcompanyname.approval”: “./webapp”}’

    (0) 
    1. Ali Chalhoub Post author

      Thank you for your feedback. I have updated the blog to include “./”, the other way I got the error like the one you mentioned. What you need todo is try to reload the page and it worked well for me.

      (0) 

Leave a Reply