How to create HTML5 Module SAP Cloud Foundry

In this tutorial we will explain how to create and run the HTML5 module within a MTA project in SAP Cloud Foundry environment.  

• Open Web IDE for trial account and right click on the workspace root folder.
• Choose "New" and click on "Project from Template"

• Pop up with Template Selection screen appears, select Multi Target Application project and choose Next.

• Enter the Project Name and choose Next.

• Enter the description and select the check box for "Use HTML5 Application Repository", press next and click finish. It will create the MTA project with a name "HTML5_tutorial".

• Right click on the MTA project and choose "New" and then select "HTML5 Module".

• Template selection pop will appear, select SAP UI5 Application and click on Next button.

• Enter SAP UI5 Application name in the Module Name field and enter demo.ui in the Namespace field and click next.

• Select XML from the View Type dropdown and enter the View Name as "First View" and press next and finish.

• It will create the UI5 application with the name "HTML5App" in HTML5 module. In the View folder open the FirstView.view.xml file and create the text element in the content as per below screenshot and save the changes.

• We have created our first sample Hello World UI5 application. To test the application right click on the created UI5 application "HTML5App" and choose "Run" and then "Run as Web Application". A pop will appear to choose the file to run, select the index.html file and press OK

• It will open up the new browser tab displaying "Hello World" text.