Node.js-Based Development Environment in VS Code

Setup

• Download Node.js from http://nodejs.org and install it.
• Install VSC https://code.visualstudio.com/download#
• Set the environment variables in the operating system settings or in the command line. You need to do this if you are working behind an HTTP proxy:

  @SET HTTP_PROXY=http://proxy:8080 
  @SET HTTPS_PROXY=http://proxy:8080 
  @SET FTP_PROXY=http://proxy:8080 
  @SET NO_PROXY=localhost,127.0.0.1,.mycompany.corp

• Install the Grunt command line interface (grunt-cli) globally with the following command: npm install grunt-cli -g.

• Download and install Git from http://git-scm.com/download.

• Clone the Git repository with the following command git clone https://github.com/SAP/openui5.git.

• Install all npm dependencies locally. Execute the commands inside the openui5 directory as show below:

  cd openui5 
  npm install

• Start the server: with grunt serve.

  Note: grunt serve has various configuration options you can use. For example, you can specify the parameter –port=9090 to use a different HTTP port.

• Point your browser to the following server where SAPUI5 is running: http://localhost:8080/testsuite/

Testing SAPUI5

Test your development using ESLint or unit tests.

All SAPUI5 code must conform to a certain ruleset which is checked using a tool called ESLint (see Related Information for more details).

To run an ESLint check, navigate to the root directory of the repository and execute:

grunt lint

Optionally, you can check a selected library only or even just a single file or directory.

The SAPUI5 unit tests are implemented using jQuery’s qUnit testing framework and run by a Selenium-based infrastructure.

To execute the unit tests, navigate to the root directory of the repository and execute:

grunt test

Caution

By default, this command runs tests for all libraries in the Google Chrome browser. For all browsers except for Mozilla Firefox, additional Selenium web drivers need to be installed.

You can change this default behavior by specifying the following parameters:

grunt test --browsers="safari,firefox" # run tests of all libraries on Safari and Firefox

Before we dive into the development, it is first necessary to understand that most modern browsers have a built-in security feature that prevents JavaScript-based communication with servers other than the one specified in the browser’s address line. This security feature implements a principle known as the Same Origin policy and has been designed to prevent malicious coding within a web page from performing what is known as a Cross Site Scripting(XSS)attack.

One of chealange it is consumed promise OData.

OData Service in manifest.json causes CORS problem

The OData Service which you want to use in the app is added to the manifest.json, in the SAPUI5 example the Northwind OData Service.

"dataSources": {
  "invoiceRemote": {
    "uri": "https://services.odata.org/V2/Northwind/Northwind.svc/",
    "type": "OData",
    "settings": {
      "odataVersion": "2.0"
    }
  }
}

Unfortunately, your app is running on localhost:8080 and is not allowed to call a resource from odata.org. This is normally not a problem because the remote system would care for the CORS headers so that the browser could directly access remote URLs.

Please create an SAPUI5 Application Project (Use a SimpleProxyServlet for Testing to Avoid Cross-domain Requests)

And import the UI5 project from Web IDE and import and check the following:

Eclipse project structure

WEB.XML file to setting up your proxy and open URL

The SimpleProxyServlet allows proxy requests to an arbitrary server in the intranet.

The proxy URL that is used in the coding looks like this: proxy/<service url>.

Open the web.xml file located in the <WebContent folder name>/WEB-INF folder and configure the parameter com.sap.ui5.proxy.REMOTE_LOCATION of the SimpleProxyServlet where the placeholders {protocol}, {host name}, {port number} are to be exchanged by the real protocol, host name and port number:

<servlet>
  <servlet-name>SimpleProxyServlet</servlet-name>
  <servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>
</servlet>

<servlet-mapping>
  <servlet-name>SimpleProxyServlet</servlet-name>
  <url-pattern>/proxy/*</url-pattern>
</servlet-mapping>

<context-param>
  <param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>
  <param-value>{protocol}://{host name}:{port number}</param-value>
</context-param>

Internet Servers

The SimpleProxyServlet can be configured for proxy requests to internet servers in the same way as for intranet servers. Additional proxy settings may be necessary.

As the SimpleProxyServlet automatically uses the proxy settings from your Eclipse this can be configured in Eclipse under  Window  Preferences , and select  General  Network Connections . Here you can specify the proxy entries and the proxy bypass.

For example, set Active Provider to Manual, Schema=HTTP, Host=proxy, Port=8080 under proxy entries and localhost, *.mycompany.corp as Host under proxy bypass.

Simple Proxy Servlet – Restriction Regarding DELETE Requests

The simple proxy servlet currently does not support the sending of HTTP DELETE requests with content. This is due to restrictions of the Java SE functionality that is used. If an HTTP DELETE request with content is sent, an HTTP 500 result status is sent with the description: “The HttpUrlConnection used by the SimpleProxyServlet doesn’t allow to send content with the HTTP method DELETE. Due to spec having content for DELETE methods is possible but the default implementation of the HttpUrlConnection doesn’t allow this!”

For practical purposes, this restriction should have only minor effects. This is because:

• When applying a REST-like programming style, an HTTP DELETE request would use the URL to transmit which objects should be deleted, but not the content.

• When building your own protocol that uses the content of the HTTP request, you typically use HTTP POST.

INDEX.HTML > UI5 resource path

Ideally, all OData service URLs should be in one file to make the exchange easier – either in the index.html, or in one separate .js file which needs to be included. The application is responsible for exchanging the URLs before checking in and after checking out to SAPUI5 Repository. You can also use the helper function getServiceUrl for which also the application is responsible. See the following example

<script>
//var serviceUrl = "/mypath/myservice";       //url when running on the ABAP system
//var serviceUrl = "proxy/mypath/myservice";  //url when running locally in Eclipse
var serviceUrl = getServiceUrl("/mypath/myservice");
function getServiceUrl(sServiceUrl) {
  //for local testing prefix with proxy
  //if you and your team use a special host name or IP like 127.0.0.1 for localhost please adapt the if statement below 
  if (window.location.hostname == "localhost") {
      return "proxy" + sServiceUrl;
  } else {
      return sServiceUrl;
  }
}
</script>

As parameter for the getServiceUrl helper method, use the URL of the OData service document without {protocol}://{host name}:{port number}, for example: /mypath/myservice.

Source: https://help.sap.com/doc/saphelp_uiaddon20/2.05/en-US/2d/3f5fb63a2f4090942375df80abc39f/frameset.htm

Manifest.json > URL (proxy)(why?)

Run your web application http://localhost:8080/LocalUI5Dev/webapp/index.html

*Note from SAP: “We recommend this development environment only for experienced developers, and only for simple use cases. For all other purposes we recommend using the SAP Web IDE.”

Source: https://answers.sap.com/questions/12965144/eclipse-sapui5-unable-to-get-odata-from-sap-system.html