Skip to Content
Technical Articles

End-To-End setup of local development environment with UI5 Tooling – Part 3 VS Code

Welcome to this blog series, if you are going straight in here.

[Update] I’ve added a little table of content below for quicker navigation


Now let’s move into VScode. You should be able to run command

code .

To open VSCode with your folder already there.

A few handy shortcuts for VSCode:

  • CTRL + SHIFT + P – Opens the command pallette for you to continue your CLI from the editor itself
  • CTRL + ` – Opens the terminal
  • SHIFT + ALT + F – Formats the document
  • CTRL + F2 – Select all occurences of current word (For search replace)
  • CTRL + \ – Split Editor

Let’s continue and expand on the functionality of our app. I want to use an OData service on my gateway system that needs some authentication.

I’ve added the datasource

"dataSources": {
	"mainService": {
		"uri": "/sap/opu/odata/IWBEP/GWSAMPLE_BASIC",
		"type": "OData",
		"settings": {
			"localUri": "localService/metadata.xml"

and model to my manifest

"": {
	"dataSource": "mainService",
	"preload": true,
	"settings": {
		"defaultBindingMode": "TwoWay",
		"defaultCountMode": "Inline",
		"refreshAfterChange": false

and then a list to the view,

<List items="{/SalesOrderSet}" noDataText="{masterView>/noDataText}" mode="{= ${device>/system/phone} ? 'None' : 'SingleSelectMaster'}" growing="true" growingScrollToLoad="true">
		<ObjectListItem type="Navigation" title="{SalesOrderID}" number="{NetAmount}" />

but when i run my app we get a 404 on the metadata.

In Volker’s blog another community member K. Schouten has created a proxy middleware package that uses authentication.

Let’s install that.

npm install ui5-middleware-proxy-basicauth --save-dev

I had another issue here, that you probably won’t. But thought I’d share all my experiences. When I ran the install command I got the following error:

npm ERR! Cannot read property ‘0’ of undefined

I needed to delete my package-log.json file and then run the command again.

Afterwards run the NPM start again.

Also bear in mind that the server and custommiddleware properties are only declared once in the yaml file and you just need the name etc. Be mindful of your indentations.

Now rerun the NPM start and you should get a 200 from the metadata call. So we can now proxy as well.

And our app should look like this:


I’m hoping K. Schouten will fix the npm package, if you hear my call out, please comment on when it’s complete and I’ll update the blog.

Alright let’s explore some of the plugins.

  • michalkozubik.ui5-explorer – Gives you the API from SAPUI5 inside vscode
  • milannankov.vscode-ui5 – Adds code snippets to use while you are coding.
  • eg2.vscode-npm-script – Gies you capabilities to execute scripts directly from the editor
  • tapsiturbi-publisher.openui5-require – Moves all sap* classes to your sap.ui.define part of your controller.

Alright on to my next problem. We do a lot of component reuse and I want to either proxy that from the server as well or at least use the local resources. Let’s see what we can do in our next blog coming soon.




You must be Logged on to comment or reply to a post.
  • Hey, what a brilliant post I have come across and believed me I have been searching out for this similar kind of post for past a week and hardly came across this. Thank you very much and I will look for more postings from you.

  • Hi Jakob,

    Thank you for mentioning me. I've merged your fixes to the proxy middleware. So a part of the blog could alread be skipped.

    Amazing to see what we are able to setup together.

  • I think I am lost here.

    I was following the blog and more or less managed to make the things happen. But it seems that I hit the wall with the proxy configuration

    I have the local instance of netweaver which is running in virtual box. This link : http://vhcalnplci.dummy.nodomain:8000/sap/opu/odata/IWBEP/GWSAMPLE_BASIC is showing the data as expected. Thus I have configured everything as per the blog. Still when I am starting the application via npm – I am getting no data error. Upon checking console log I can see that there is an error that is associated with accessing http://localhost:8080/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata?sap-language=EN

    Upon accessing the link directly I am getting the error Cannot GET /sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata

    I have to admit that I am not sure if there is any way out. I have maintained the username and password in .env - but I do not see any possible way for me to investigate this problem further.

    • Hi Dmitry,


      My manifest.json setting is as follows. (I added "odata/" in front of normal uri)

      "dataSources": {
      			"mainService": {
      				"uri": "odata/sap/opu/odata/iwbep/GWSAMPLE_BASIC/"

      and ui5.yaml

        - name: ui5-middleware-proxy-basicauth
          afterMiddleware: compression
          mountPath: /odata
            baseUri: "" 

      It's working fine for me.

  • Hi Jakob,

    I am having trouble running the proxy. tried hard always get 404

    added .env file in the root folder (where package.Json) is located with my credentials to NWGW system. (Tried putting the file inside folder i.e next to YAML file) no luck ?

    and fixed the YML and manifest as described in ui5-middleware-proxy-basicauth read me file. but no luck ?

    Any pointers ? my suspicion: proxy config is not reading my .env files and hence not able to access oData.

    Br, Kashif