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

[UxKjaer]

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

• 
  

  End-To-End setup of local development environment with UI5 Tooling

  
  


• 
  

  End-To-End setup of local development environment with UI5 Tooling – Part 2

  
  


• 
  

  End-To-End setup of local development environment with UI5 Tooling – Part 4 Component reuse

  
  


• End-To-End setup of local development environment with UI5 Tooling – Part 5 Deployment

• End-To-End setup of local development environment with UI5 Tooling - Part 6 Code Coverage

 

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">

	<items>

		<ObjectListItem type="Navigation" title="{SalesOrderID}" number="{NetAmount}" />

	</items>

</List>

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

In Volker's blog another community member schoutenk 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 schoutenk 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.

 

 

 

[former_member640351]

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.

[schoutenk]

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.

[UxKjaer]

Awesome stuff, thanks very much. I've edited the blog to reflect the changes. I'd be happy to continue to contribute.

[akpetteroe2]

Hi, thank you for posting this 🙂

Does anyone know what do to if I have to use other authentication methods than basic auth?

[UxKjaer]

You update the package to use passport 😉 Currently the package only supports basic auth. Hopefully someone can help out with this. I'm leaving for Denmark soon to catch up with yo in person 😄

[akpetteroe2]

LOL, well let me see what I can do the next few weeks then ?

Safe travels, and see you soon!

[dmitry_yudin]

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.

[MioYasutake]

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

    configuration:

      baseUri: "https://sapes5.sapdevcenter.com/" 

It's working fine for me.

[kashif_bashir]

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

[UxKjaer]

Hi Kashif,

Sorry just saw this today. I'm not sure if you've got it solved.

I would recommend you to use this instead https://www.npmjs.com/package/ui5-middleware-route-proxy

[former_member677858]

Hey, has anyone had trouble getting a CSRF token error on this step? This is what my console looks like.

[ssrinivas]

Facing same issue. Do let me know if you able to resolve