Use GitHub Pages to host your OpenUI5 app!

If you want to learn OpenUI5 but has no place to deploy your app (like inside a Hana system, SAP Gateway or any paid hosting service) this blog was made specially for you. If you have a place to host your app but also want another free and public alternative read this as well. I will show you what you need to do to host a OpenUI5 app using GitHub Pages, a free service provided by GitHub.

---

Following the SAPUI5 Momentum described by Graham Robinson, there are many skills which should be learned in order to work with SAPUI5/OpenUI5. Personally I’m doing my best to improve skills like Javascript, jQuery, node.js, etc to become more than an ABAP developer should be nowadays. One of such desirable skills is Git, which enables you to version your source code in a very clever way. When you talk about Git, it’s hard not to mention GitHub, which enables you to share your projects (aka repositories) publicly or privately to your team (the last it’s a paid service).

GitHub Pages

Probably you already know Git and GitHub and probably you have some public repositories which prove how a good and versatile developer you are. If you don’t, you definitely should.

But maybe you are not familiar with GitHub Pages yet. And even if you have heard about them… maybe you just didn’t realize that you can use them in order to deploy/host your apps created using OpenUI5!

Why GitHub Pages?

It’s very cool to share your development projects publicly and GitHub makes that possible on an effective way. Your repositories can be downloaded, cloned, forked and pushed by others.

However, there are many repositories which have some (or lots of) prerequisites that must be completed so the person trying to use your code can be successful. For small dependencies like tiny and open libraries, you can obviously share the dependent files collectively within your own repository. When the dependency is big or complex enough, the smartest decision is to document all required setup inside your repository wiki, another feature provided by GitHub.

GitHub Pages address another frequent requirement from developers: the need of a website for their repositories, usually nothing really complex… just a hotsite. GitHub Pages is a free hosting service provided by GitHub on which you can host static content like HTML, CSS and Javascript files. With GitHub Pages, you can advertise your repository for those are not developers and who don’t even know GitHub.

If you have ever visited a website with an URL with the substring “github.io” you already visited a website hosted using GitHub Pages. You might not know, but the official OpenUI5 website is delivered using GitHub Pages.

http://sap.github.io/openui5/

Alternatively, you can use the URL below, as GitHub Pages support custom domains:

http://openui5.org/

Isn’t that cool?!

Why GitHub Pages to host OpenUI5 apps?

Now you know how GitHub Pages can help you… but let’s leverage our creativity now. Imagine you are studying or working with OpenUI5 and you are using GitHub repositories to share your work so others can benefit from it.

Wouldn’t be better to demonstrate the power of your repository before the user try to download it and setup their environments? Isn’t better to let another developer or a user to test/use your application online and decide if it is worth a clone?

You guessed right! Of course you can use GitHub Pages to host your OpenUI5 apps. OpenUI5 apps are made of static files.

Creating GitHub Pages

First of all, you will need a GitHub account. If you don’t have it create it now... it’s free and you can have as many public repositories as you want.

Personal/Organization Pages

The very first type of page you can create is for your own GitHub user. If you want to create a hotsite linking all your cool projects like I’m planning to do in my new GitHub Page, I recommend using such alternative. This type of page is simply a special GitHub repository following a simple name convention.

My GitHub username is “fabiopagoti”, so in order to create a GitHub Page for my account, I had to create a new repository named “fabiopagoti.github.io” (it must be username.github.io otherwise it won’t work).

After that you can create a normal web app inside this repository and push it to GitHub. The very first time you push content to this repository, it will take some time in order to have your page available. GitHub website says it should take up to 10 minutes but in my case it took 30 minutes. If you want to spend your time during this period with something useful, you might want to watch OpenUI5 presentation at OSCON on YouTube.

If you use organizations inside GitHub, you can definitely create pages for them as well. Just follow the same convention (organization.github.io). SAP’s page on GitHub is actually an organization page.

Repositories Pages

As aforementioned, you can also create pages for a specific repository. Assuming you already have a repository, using such alternative there is no need to create another one (like you need for setting up personal/organization pages). In fact, repositories pages are created and delivered using a special remote branch called gh-pages.

The easiest way of creating this remote branch is inside your repository settings. There you will find a button called “Automatic Page Generator”. Then, you just need to follow the 2 steps wizard.

At the right side, click on “Settings”.

Next, create some content for your initial GitHub page. Notice that you can also insert a Google Analytics tracking ID so you can keep track of the traffic to your GitHub Page. Awesome!

Finally, choose a template from the options. You can change it later if you want.

In the end, you have a complete hotsite for your repository. Remember that for repository pages it is delivered as a branch name.

To switch between your actual repository and its pages use the button as show in the images below.

Hosting your OpenUI5 app

Now what you need to do to host your OpenUI5 app using GitHub pages is simply pull the content generated from the wizard (inside gh-pages branch for repository pages and master branch for personal/organization pages). Then, add the files from your app, commit them and push the changes to the gh-pages remote branch.

Personally, I like the templates generated from GitHub Pages and I wouldn’t replace them with my OpenUI5 app completely (but of course you can create the whole page for your app using OpenUI5. Instead, I would simply create a new folder inside your branch and add your app there as I did below.

• Account: fabiopagoti – http://github.com/fabiopagoti/
• Repository: NYT-Launchpad-UI5 – https://github.com/fabiopagoti/NYT-Launchpad-UI5
• GitHub Pages of the repository (created using the wizard)- http://fabiopagoti.github.io/NYT-Launchpad-UI5/
• New Folder inside ROOT: app
• OpenUI5 project ROOT: WebContent (the same one created using Eclipse Wizards)
• OpenUI5 App on GitHub pages – http://fabiopagoti.github.io/NYT-Launchpad-UI5/app/WebContent/index.html

More information

To know more about GitHub Pages, read the official documentation of GitHub Pages Basics.

Examples inside this blog

In order to learn OpenUI5, I’m creating a couple of applications which consume some public RESTful APIs from New York Times. I consider them a great example of a well-defined, documented and free web APIs. To know more about such apps, follow me at GitHub.

Share your GitHub page!

So… what are you waiting for? Share your GitHub page in the comments of this blog and share push your thoughts!