Skip to Content
Author's profile photo Mauricio Lauffer

Google Drive hosting SAPUI5 apps

Hi guys.

This is my first post here and I’m going to talk a little bit about how to host a SAPUI5 App on Google Drive and share with everybody.

You don’t need neither a domain nor a webserver. You can use Google Drive to publish and to use your UI5 apps.

It’s very simple 😉

1 – Access your Google Drive account

Go to the link https://drive.google.com/

2 – Create a new folder

Click on “CREATE” button.

/wp-content/uploads/2014/05/gdrive1_462540.png

Click on “Folder” button.

/wp-content/uploads/2014/05/gdrive2_462541.png

Give a name to your new folder.

/wp-content/uploads/2014/05/gdrive3_462557.png

Your new folder (SAPUI5 – GoogleDrive) has been created.

4 – Share your folder – Public access

Right-click on your new folder (SAPUI5-GoogleDrive), go to “Share” > “Share”.

/wp-content/uploads/2014/05/gdrive4_462558.png

Your folder is not public, you can see the status: Private – Only you can access.
Click on “Change” to change the access permission.

/wp-content/uploads/2014/05/gdrive5_462559.png

Choose the option “Public on the web” and save.

/wp-content/uploads/2014/05/gdrive6_462561.png

Now your folder has public access and it has a hosting link. You can see clicking on Details button.

Everything that you upload to this folder can be accessed using the hosting URL.

/wp-content/uploads/2014/05/gdrive7_462562.png

5 – Create a SAPUI5 app

Create your new app: index.html

You can use the example below.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>SAPUI5 + Google Drive</title>
<meta name="author" content="Mauricio Lauffer">
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m">
</script>
<script type="text/javascript">
var oApp = new sap.m.App("myApp");
var oLabel = new sap.m.Label({
text : "Hello World"
});
var oPage = new sap.m.Page("page1", {
title : "SAPUI5 + Google Drive",
content : [ oLabel ]
});
oApp.addPage(oPage);
oApp.placeAt("content");
</script>
</body>
</html>

I prefer to use XML view, but for simplicity’s sake I used JS.

6 – Upload and Share the app to the Google Drive

Just upload your “index.html” file.

Yes, just it. You don’t need to upload nothing more.

7 – Access the app

Did you remember the hosting link for your folder (SAPUI5-GoogleDrive)?

So, you’ll use it to access your app.

Copy and paste the hosting URL in your browser (I hope it won’t be Internet Explorer 😛 ).

Now just add your filename to the end of the URL.

It should look like it: https://googledrive.com/host/0B2gJUv6a_V1deXV4UWthQkdHbjQ/index.html

You can go straight by the file as well.

Click on your uploaded file and click on “Preview” button.

/wp-content/uploads/2014/05/gdrive8_462570.png

8 – The Result

I hope you enjoy your application and spread the word   😆

/wp-content/uploads/2014/05/gdrive9_462571.png

If you like to use GitHub (you should!), here’s the link:

https://github.com/mauriciolauffer/UI5/tree/master/SAPUI5-GoogleDrive

Portuguese version: Hospedando SAPUI5 app no Google Drive

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sanket Chimalwar
      Sanket Chimalwar

      @ Mauricio : Nice post . Will definately try this out.

      Author's profile photo Former Member
      Former Member

      Very good post!

      I willl try later

      Author's profile photo Former Member
      Former Member

      Good job. But when I have project with controler and view this not work (( Und how can I run project on goodle drives ?

      Author's profile photo Piyush Gupta
      Piyush Gupta

      @Maurico I am able to host the page ut it's throeing the error "sap not found".
      Can you sugest a way to resolve this..

      Author's profile photo Kishore Kumar
      Kishore Kumar

      Hi Piyush,

      Just make sure you are referencing to global link of SAPuicore (https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js), not the local one followed by resources/

      Kishore Kumar

      Author's profile photo Marcos Andrade
      Marcos Andrade

      Hello Mauricio,

      great post 🙂 .

      just a quick question as you have declared the resource sap-ui-core.js that comes from hana.ondemand domain and it can be publicly accessed so you have one page html application. I usually develop the apps using SAP WEB IDE in this case is that still possible to develop the app using web ide and host it on the google drive?

      maybe if we download the project and with all the files and upload it in the google drive should make it possible?

      Regards,

      Marcos