SAP UI5 Tutorial Part 1 : How to Setup SAPUI5 Development Environment

This blog will provide step by step guide for How to Setup SAPUI5 Development Environment.

Follow below steps.

Java Installation

Java Development Kit is the package for developers, which includes complete runtime tools for developing, debugging and monitoring the Java Applications. You can download the latest Java version from the following site Java Download

• Run the installer once the download is complete.

For Mac – This is an automatic installation and the paths are setup no need for any separate settings.

For Windows – You need to set your Path in the Environment Variables.

After the installation of your JDK, it’s important to create a new environment variable called JAVA_HOME. To do this, open your “Run” window in Windows and type in “control sysdm.cpl”. On the Advanced tab, click Environment Variables. Then create a new System variable called JAVA_HOME. The value of this should be the path to your JDK.

 

After that, you have to add this variable to the existing PATH-Variable with %JAVA_HOME%;

•  Test if the Java is working fine. Open the Terminal / CMD to check it out.

java -version.

Eclipse Juno 4.2 Setup

1. Download the setup from below link

Eclipse Download

2. I am downloading the latest Eclipse IDE for Java EE Developers.
3. Unzip the archives and the IDE. Setup the Workspace.
4. In order to use SAPUI5 developments / SAP Development tools for Juno go to Eclipse —> Help —> Install New Software

Type in https://tools.hana.ondemand.com/juno

 

5. Select All and Click Next. Accept the SAP disclaimer and finish. Restart your Eclipse.
6. Now when you create a new project you should see an option to create SAPUI5 Project.

HTML5 Development Kit

This is an optional step but if you are planning to setup a local environment or work offline  where there is no connectivity and you need access to the HTML5 SDK Kit, API references then this is useful.

 

Download UI Development Kit for HTML5 from the link HTML5 Development ToolKit . Download the current version and Unzip the files to get the folder structure.

You can also refer the latest HTML5 latest SDK here. This is an exclusive guide SAP has put up together and a mandatory read for anyone who is willing to work on SAPUI5. https://sapui5.netweaver.ondemand.com/sdk/#content/Overview.html

 

Apache Tomcat Server setup

 

I am setting up my environment on Macbook so if you are using windows then there are lot of stuff out there in google how you approach this. Listed below is the one for Macbook.

 

1. Download the binary distribution of the core module; apache-tomcat-7.0.50.tar.gz (My version for mac) from here Apache Tomcat Server . You can download the one that suites your OS.
2. Opening / Unarchiving this will create a folder structure for you Tomcat setup.

 

3. Download the Tomcat Controller to start and stop the server which is a very useful software so we need not do commands or anything just a UI to start and stop the server.
4. Open the Tomcat Controller and set up the preferences to your tomcat directory.

 

My Path –  /Users/SweetHome/Desktop/Applications/APACHE7/apache-tomcat-7.0.50

 

Open your browser and type http://localhost:8080

You are all setup with your local server running on your machine

Deploying SAPUI5 SDK in Tomcat

 

We need to deploy the downloaded SDK from SCN to your Tomcat server. There are different ways of deploying but the simple one is

 

1. Copy the sapui5-sdk.war and sapui5.war from HTML5 Development kit to the /webapps folder in Tomcat installation directory.
2. Stop and Start the Tomcat Server.
3. Goto your browser and type the following URL SAPUI5 Page on Tomcat Server

There you go !!! Setup of SAPUI5 development locally on your personal laptop is DONE.