Setup Eclipse and Tomcat for local development of SAPUI5

JAVA Configuration

  • Install the JDK.
  • Set the system variables for Java in Windows. Create a system variable JAVA_HOME, which would point to the root of the JDK. Then, add the JAVA_HOME variable to the system variable PATH.
  • Check on the command line if java – version gives you the correct output.

Eclipse Configuration

  • Install Eclipse, if not already done.
  • Ensure that Eclipse is pointing to the correct JRE or JDK.
  • Install the plugins below in Eclipse.
    • UI development toolkit for HTML5
    • ABAP Development Tools for SAP NetWeaver
  • Restart Eclipse.

Tomcat Configuration

  • Download Tomcat in the zip format. We don’t want to install Tomcat as a service. As it will later give errors while starting from Eclipse.
  • Extract it to a local folder, e.g. c:\apache_tomcat.
  • Open Eclipse. If Servers View is not visible, click on Window->Show View->Others and select the Servers View.
  • Click on New Server Wizard hyperlink to start the configuration.
  • In the dialog box, select Apache and the version of Tomcat you have downloaded.
  • Select Next.
  • Set the Tomcat installation directory and the JRE.
  • Click on Finish.
  • Right-click on the server and choose properties.
  • Click on Switch Location. Apply and save the change.
  • A Servers node will appear in the Project Explorer pane.
  • Expand the node and double-click on the Tomcat Server (not the config).2 servers node.png
  • A file will open in the work area of Eclipse.
  • Change the port number for HTTP to 8080.
  • In the Server Locations section, choose Use Tomcat installation.

2.png

  • Save the file.
  • In the Servers view pane, right-click on the server and choose Start.
  • If everything is ok, the Console view will show messages that Tomcat has started.
  • Open the link http://localhost:8080 and you will see the Tomcat homepage.

2 tomcat homepage.png

How to access SAPUI5 Resources locally from Tomcat server

  • Download the version of SAPUI5 fromĀ https://tools.hana.ondemand.com/#sapui5.
  • Extract the contents of the SDK on a local directory.
    • On my dev box, I was already using apache web server. So, I have extracted it over there. (C:\wamp64\www\resources)
  • In Eclipse, open the server’s node in the Project Explorer. Double-click on server leaf node (not the config one).
  • Select the modules tab.
  • Click on Add External Web Module.

1.png

This will ensure that you can use /resources/sap-ui-core.js as the resource path.

  • Click on OK and save.

external web module.png

 

 

 

 

Advertisements