Skip to Content
Technical Articles
Author's profile photo Peter Muessig

UI5 Tooling: a modern development experience for UI5!

Introduction

On April 1st I talked about the UI5 Tooling – a modern CLI-based development experience” in a SAP Community call. Besides explaining the UI5 Tooling in general, I showed how to grab a UI5 application from SAP Web IDE and how to configure it to run it locally with the UI5 Tooling.

The slides can be found here: https://www.slideshare.net/PeterMuessig1/ui5-tooling-ecosystem

This blog explains the individual steps to you to make the same experience.

Background

Approximately one year ago, the SAP Web IDE switched to use the UI5 Tooling to build UI5 projects. Today, all UI5 projects created with the SAP Web IDE include the proper configuration to use the UI5 Tooling for the build process. As the SAP Web IDE comes with an integrated preview based on the HTML5 runtime, the development server of the UI5 Tooling is not required here. But when grabbing projects from SAP Web IDE and running them locally, the development server is mandatory. Compared to the HTML5 runtime, the UI5 Tooling just provides access to the UI5 resources and doesn’t provide a proxy to access backend services. But without using mockdata, such a proxy is needed.

Extensibility

Last year, at the UI5con at SAP, Volker Buzek approached me and asked for a proxy as part of the UI5 Tooling. I asked Volker what kind of proxy he needs: a simple proxy, an AppRouter, a HTML5 runtime router, …? All proxies are somehow specific to their platform, coming with different configurations and IMO the UI5 Tooling team will never satisfy all demands. But I offered Volker to help him to write a proxy and to get started with the extensibility of the UI5 Tooling demonstrating the task and middleware extensibility. This was the kick-start for the UI5 Ecosystem Showcase repository – a repository to demonstrate how easy the UI5 Tooling can be enhanced with own custom tasks and middlewares.

UI5 Ecosystem Showcase

The UI5 Ecosystem Showcase repository contains several ideas to improve the UI5 development experience by leveraging open-source tools. The extensibility concept of the UI5 Tooling allows to integrate those tools easily. So, the repository step by step grow to integrate custom tasks to e.g. transpile ES6 to ES5 code by using Babel or to provide custom middlewares to get a livereload of the browser in case of changes in the project sources as well as a simple HTTP proxy to tunnel backend services. All those features can be combined and used for UI5 development to come to a modern development experience!

A real-life example: Local UI5 development with the UI5 Tooling

Now, let’s start with some hands-on and let’s make our hands dirty. Every UI5 developer should make this experience to feel how good local UI5 development can be already today. Keep in mind, the SAP Web IDE still provides a lot of value and benefits with its wizards, tools and integration into various SAP platforms. But IMO it should be seamlessly possible to either develop a UI5 application in SAP Web IDE and locally in e.g. Visual Studio Code together with the UI5 Tooling.

Prerequisites

Before we start, we need to ensure that our computer is setup properly. Node.js 10+ should be installed and configured properly.

Step 1: Create a UI5 application

In the first step we create a UI5 application based on the SAP Fiori Worklist Application template. This can be done either in SAP Web IDE by using the template wizard or with the Yeoman generator for SAPUI5 templates.

Option A) Using the SAP Web IDE template wizard

Follow these steps to create an SAP Fiori Worklist application:

  1. Open SAP Web IDE
  2. File > New > Project from template
  3. Select environment “Neo” (as this affects the datasource URL relevant for the proxy)
  4. Select category “SAP Fiori Application”
  5. Select template “SAP Fiori Worklist Application”
  6. Enter your project name, title and namespace
  7. In the data connection step (prerequisite: setup a destination to Northwind OData Services first), select the Northwind OData Services as “Service URL”, use the “Relative URL”: /V2/Northwind/Northwind.svc/) and press “Test”.
  8. In the template customization step, select the “Standalone App” application type and Object Collection: Customers, Object Collection ID: CustomerID, Object Title: CompanyName.
  9. Finish

After the UI5 application has been created, select it in the project explorer, export it from SAP Web IDE and unzip it locally in your file system.

Option B) Using the Yeoman generator for SAPUI5 templates

Follow these steps to create an SAP Fiori Worklist application:

  1. Install the Yeoman generator via:
    npm install -g yo @sapui5/generator-sapui5-templates
  2. Create an empty folder and switch to it
  3. Run:
    yo @sapui5/sapui5-templates
  4. Enter module name and module namespace
  5. Select template “SAP Fiori Worklist Application”
  6. Enter title and description
  7. Select “Standalone App”
  8. As Service Base URI enter: https://services.odata.org/V2/Northwind/Northwind.svc/
  9. As Datasource URL enter: /svc/
  10. In the following steps enter Object Collection: Customers, Object Collection ID: CustomerID, Object Title: CompanyName, the rest leave empty.

Now your UI5 application has been created in your local file system.

Step 2: Updating the project dependencies

After following one of the options of the previous step, we should validate whether we need to update the project dependencies of the created UI5 application. To update the project dependencies, we can use the open-source tool npm-check-updates. This tool can be installed via:

npm install -g npm-check-updates

After the installation of the tool, we can run:

ncu -u

to upgrade the project dependencies in the package.json. Once the project dependencies are upgraded run:

npm install

to prepare the project for a first run. The project can be started with the command:

npx ui5 serve -o index.html

Although the development server starts technically, there are a few things missing to make the UI5 application to run properly (e.g. the SAPUI5 resources).

Step 3: Setting up a proxy to access the SAPUI5 resources

To access the SAPUI5 resources in the UI5 application we can simply use the simple proxy middleware from the UI5 Ecosystem Showcase. I can be installed as a dev dependency by running the following command:

npm install ui5-middleware-simpleproxy --save-dev

(if the project has been generated with Yeoman the simple proxy middleware is already installed).

Option A) UI5 application created by SAP Web IDE

For the project created with the SAP Web IDE, we need to add the ui5-middleware-simpleproxy as ui5/dependencies in the package.json:

{
  […]
  "ui5": {
    "dependencies": [
      "ui5-middleware-simpleproxy"
    ]
  },
  […]
}

Afterwards we need to open the ui5.yaml and add the following configuration at the end:

server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    mountPath: /resources/
    afterMiddleware: compression
    configuration:
      baseUri: https://sapui5.hana.ondemand.com/resources/

This configuration will ensure that all requests to /resources/ will be proxied to https://sapui5.hana.ondemand.com/resources/.

Option B) UI5 application created by Yeoman generator

If the project has been created with the Yeoman template, we need to add the following configuration to the server/customMiddleware section in the ui5.yaml (just include the first middleware entry and put it before the already existing ui5-middleware-simpleproxy entry):

server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    mountPath: /resources/
    afterMiddleware: compression
    configuration:
      baseUri: https://sapui5.hana.ondemand.com/resources/
  - name: ui5-middleware-simpleproxy
    mountPath: /proxy/

But be careful with yaml – the indentation is pretty important.

Now the application should start properly and load the SAPUI5 resources via the proxy middleware. But still the UI5 application created with SAP Web IDE will fail to load its data since there is no proxy configured which tunnels the requests to the Northwind OData Service.

Step 4: Setting up a proxy to tunnel the Northwind OData Service

This step is only needed for the project created by SAP Web IDE. The project created with the Yeoman generator already includes the configuration to connect to the Northwind OData Service.

In the project created with SAP Web IDE open the ui5.yaml and add the following configuration (just include the second entry for the OData service into the ui5.yaml):

server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    mountPath: /resources/
    afterMiddleware: compression
    configuration:
      baseUri: https://sapui5.hana.ondemand.com/resources/
  - name: ui5-middleware-simpleproxy
    mountPath: /Northwind/V2/Northwind/Northwind.svc/
    afterMiddleware: compression
    configuration:
      baseUri: https://services.odata.org/V2/Northwind/Northwind.svc/

This configuration ensures to proxy the request to /Northwind/V2/Northwind/Northwind.svc/ to https://services.odata.org/V2/Northwind/Northwind.svc/.

Step 5: Validate that the project runs locally

Now it’s the time to validate that the project starts locally. To ensure that all project dependencies are installed, just run:

npm install

in the UI5 application again. Now you can start the development server by running:

npx ui5 serve -o index.html

Now you should see the application running and the data being loaded from the Northwind OData Service.

Step 6: Add the livereload middleware

The livereload middleware is watching to changes of the sources in the file system. Once a source file has been modified the livereload middleware reloads the browser. Add the livereload middleware with the following command:

npm install ui5-middleware-livereload --save-dev

Afterwards in the package.json ensure to list the ui5-middleware-livereload in the ui5/dependencies (just add the last entry):

{
  […]
  "ui5": {
    "dependencies": [
      "@sap/ui5-builder-webide-extension",
      "ui5-middleware-simpleproxy",
      "ui5-middleware-livereload"
    ]
  },
  […]
}

The first entry @sapui5/ui5-builder-webide-extension is only present when you started to create the project with the SAP Web IDE. Afterwards, in the ui5.yaml just include the livereload middleware:

server:
  customMiddleware:
  […]
  - name: ui5-middleware-livereload
    afterMiddleware: compression
    configuration:
      extraExts: "xml,json,properties"
      path: "webapp"

Now you can start your development server again with the command:

npx ui5 serve -o index.html

When you modify your sources and immediately get an update in your running application (remark: in case you face issues with livereload, maybe your html page was cached before, just ensure to reload the html page properly).

Step 7: Use the UI5 Tooling 2.0 to consume SAPUI5 from NPM

With the availability of SAPUI5 on NPM and the UI5 Tooling 2.0 we finally can consume SAPUI5 as dependencies. Therefore, the UI5 Tooling implemented an own frontend package manager to overcome the versioning issue in the SAPUI5 distribution layer. The details and reasoning behind this decision can be read in the UI5ers Buzz #49: The UI5 Tooling and SAPUI5 – The Next Step.

Let’s experience it live – we now remove the ui5-middleware-simpleproxy and migrate to specVersion: ‘2.0’ in the ui5.yaml:

specVersion: '2.0'
[…]
server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    mountPath: /Northwind/V2/Northwind/Northwind.svc/
    afterMiddleware: compression
    configuration:
      baseUri: https://services.odata.org/V2/Northwind/Northwind.svc/
  - name: ui5-middleware-livereload
    afterMiddleware: compression
    configuration:
      extraExts: "xml,json,properties"
      path: "webapp"

Next we add a framework dependency to SAPUI5 by running the following command:

npx ui5 use sapui5@latest

Now we can include the required libraries with the following command:

npx ui5 add sap.ui.core sap.m sap.f themelib_sap_fiori_3

This will create the following section at the end of the ui5.yaml:

specVersion: '2.0'
[…]
framework:
  name: SAPUI5
  version: "1.76.1"
  libraries:
    - name: sap.f
    - name: sap.m
    - name: sap.ui.core
    - name: themelib_sap_fiori_3

In case of the project has been created with the Yeoman template, open the index.html and change the bootstrap URL from “https://sapui5.hana.ondemand.com/resources/sap-ui-core.js” to “resources/sap-ui-core.js”. After starting the development server with:

npx ui5 serve -o index.html

the UI5 resources are loaded from the local framework dependencies configured in the ui5.yaml.

Step 8: Explore the UI5 Ecosystem Showcase repository and add more middlewares or tasks

Now you can go ahead and take a look into the UI5 Ecosystem Showcase repository to include additional tasks and middlewares into the ui5.yaml of your project. If you want to use modern JavaScript language features, I would recommend you to take a look into the transpile task and the livetranspile middleware. If you have ideas for additional custom tasks or custom middlewares please consider to share them with the UI5 community.

What now

Get familar with the UI5 Tooling 2.0 and the new capabilities to consume SAPUI5 dependencies from NPM. Play around with the available tasks and middlewares and try to combine them for your local UI5 development.

Help us to spread the word and share with other UI5 developers that you can also have a great and modern development experience for UI5 development.

Related links

 

Assigned tags

      41 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Fatih Pense
      Fatih Pense

      Hello Peter,

      I have followed this guide with the Yeoman option and committed the changes when the step is complete. So if anyone finds it useful to check, the Git commits are here:
      https://github.com/fatihpense/ui5-tooling-example/commits/master

      Also, it may be a good idea to include a default .gitignore file in the Yeoman templates.

      I have just watched the video and I think I have an ancient idea for an ui5-task-*
      I want to contribute it to the community repo in the hope that I will get a cut/sip from each donated drink. I will also benefit from your code review!

      I still remember my excitement and increased confidence that SAP can adapt to modern technologies when OpenUI5 was first announced as open-source. These tooling improvements reminded me of those times. I want to thank you for making things more open.

      Regards,
      Fatih

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Fatih,

      thanks for creating the GitHub repository - this is really great for all to follow the steps. I also had in mind to create it but finally I missed it. Big thanks for your work! 🙂

      I will add the .gitignore to the Yeoman templates. This is indeed a good idea for the standalone usage. In case of the usage in SAP Business Application Studio, it takes care. to create the .gitignore for us.

      If you are interested in a contribution to the ui5-ecosystem-showcase, I would be more than happy to share some sips with you... 😉 Just create a PR and assign me as reviewer - and please don't forget to add yourself as one of the listed people in the derived beerware license statement in the README.md of you task...

      Thanks for your nice words - I will make sure that the UI5 developers will receive them! I am more than happy if people enjoy working with UI5 and also benefit from all the things happening around in the JavaScript community.

      Best regards,

      Peter

      Author's profile photo Fatih Pense
      Fatih Pense

      Hi Peter,

      Thank you for your response and additional information about contributing.

      Finally, I have created the pull request: https://github.com/petermuessig/ui5-ecosystem-showcase/pull/183

      I wasn't able to assign you as a reviewer but it is OK. Please be harsh in the review, I want to earn every sip of the drink 🙂

      Best regards,
      Fatih

      Author's profile photo umit duran
      umit duran

      Great!

      Author's profile photo Ludo Noens
      Ludo Noens

      If you initially created the project in SAP Web IDE Full-Stack and followed the tutorial for creating the destination, then the simple proxy middleware configuration to access the data source should reflect the name of the destination you've created. In this case, Peter used a destination with the name 'northwind_odata_services'.

      mountPath: /northwind_odata_services/V2/Northwind/Northwind.svc/

      If you've followed the tutorial, this should be

      mountPath: /Northwind/V2/Northwind/Northwind.svc/

      Cheers,
      Ludo

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Thanks, Ludo for sharing this. 🙂

      Yes, there is indeed a difference for which environment you create the template. I used "Neo" in the tutorial above. I will add a hint to that.

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Ahh - got it - I somehow missed that the tutorial I am referring to for the creation of the Northwind service uses "Northwind" as destination name and not "northwind_odata_services". I fixed this now in the blog post. Thx, Ludo!

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli

      Thanks Peter Muessig !!

      I am following the Yo generator steps from the blog and ended up with this error.  Is there any issue with the simpleproxy?

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Mahesh Kumar Palavalli ,

      thanks for finding the issue - a bug has been introduced in the 0.2.2 release of the middleware. Just fixed it and if you upgrade the simpleproxy to 0.2.3 it should work again.

      BR,

      Peter

      Author's profile photo Mahesh Kumar Palavalli
      Mahesh Kumar Palavalli

      Great!,It's perfect now, thanks for the quick fix.

      Author's profile photo Artyom Vecherov
      Artyom Vecherov

      What if I want start Component.js?

      If I use the below command, I get a list of the project's folders and files

      npx ui5 serve -o index.html
      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Artyom,

      strange, this seems that the -o argument is not recognized. Normally, running this command would open the browser, launching e.g. http://localhost:8080/index.html. The index.html is the starter for the Component. Can you please retry, maybe the the dash was converted into another character what sometimes happens when using copy paste (from some applications)?

      HTH and best regards,

      Peter

      Author's profile photo Tomas Ngoma
      Tomas Ngoma

      Hi Peter,

      new to ui5 tooling. In my case, i've setup a proxy to tunnel the SAP Gateway OData Service:

      https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC. but I am facing authorization error (401). How can I add the credentials details in my code? I am not using a destination from clod platform.
      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Tomas,

      does your OData service support basic authentication? In this case, I would assume you should see a auth popup appearing when using the service. There you need to enter you credentials.

      The proxy just forwards the requests to your service. There is no authentication happening in the backend/proxy layer.

      Just for testing purposes, the ODataModel has parameters for user and password – but this should never be committed to any source code management system and just used for your local development.

      HTH and best regards,

      Peter

      Author's profile photo Venkatesh Naidu
      Venkatesh Naidu

      HI Peter,

      Great UI5 tooling.

      I followed all the steps and all worked well except live reload. I do not find any issue in ui5.yaml file.

      Could you please guide on this?

      my ui5.yaml file:

      specVersion: '2.0'
      metadata:
        name: ZUI5TOOLING
      type: application
      # resources:
      #   configuration:
      #     propertiesFileSourceEncoding: UTF-8
      builder:
        customTasks:
          - name: webide-extension-task-updateManifestJson
            beforeTask: generateManifestBundle
            configuration:
              appFolder: webapp
              destDir: dist
          - name: webide-extension-task-updateNeoApp
            afterTask: generateVersionInfo
            configuration:
              destDir: dist
              appFolder: webapp
              nameSpace: ui5/demo
          - name: webide-extension-task-lint
            afterTask: webide-extension-task-updateNeoApp
            configuration:
              destDir: dist
              appFolder: webapp
              nameSpace: ui5/demo 
          - name: webide-extension-task-resources
            afterTask: webide-extension-task-lint
            configuration:
      nameSpace: ui5/demo
      server:
        customMiddleware:
          # - name: ui5-middleware-simpleproxy
          #   mountPath: /resources/
          #   afterMiddleware: compression
          #   configuration:
          #     baseUri: https://sapui5.hana.ondemand.com/resources/
          - name: ui5-middleware-simpleproxy
            mountPath: /Northwind/V2/Northwind/Northwind.svc/
            afterMiddleware: compression
            configuration:
              baseUri: https://services.odata.org/V2/Northwind/Northwind.svc/   
          - name: ui5-middleware-livereload
            afterMiddleware: compression
            configuration:
              extraExts: "xml,json,properties"
              path: "webapp"
      framework:
        name: SAPUI5
        version: "1.76.0"
        libraries:
          - name: sap.m
          - name: sap.ui.core
          - name: themelib_sap_fiori_3
      
      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Venkatesh,

      sorry for my late reply. I took your yaml and used it in my project. When removing the entry:

      nameSpace: ui5/demo

      Then the application starts and the livereload works.

      Best regards,

      Peter

      Author's profile photo Krisha Engineer
      Krisha Engineer

      Edit:  Thanks a lot for this Peter! I was able to consume my On-Premise OData service following these steps. After 2 long days it finally worked. So glad I stumbled upon this blog.

      I could connect Northwind via a proxy.js file as per the steps of OpenSAP UI52 course, but I am having a hard time connecting to my real SAP Gateway service. Will these steps work for On-Premise OData service? Please help...

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Krisha,

      I am happy to hear that you found the way to consume the on-prem service! Can you please share what you have done? Was it to disable the ssl verification? Sorry for replying that late - just back from vacation...

      BR,

      Peter

      Author's profile photo Krisha Engineer
      Krisha Engineer

      Step 3,4 and 5 you mentioned worked for me as it is! Just changed the Mountpath and BaseUri according to my on-premise service! When I run the app, it prompts for Username Password and works as expected!

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Hi Peter

       

      Thanks again for a detailed blog.

      I have managed to get going with UI5 tools - from setting up, to running locally and to finally deploying to my SAP backend system.

      I am however facing 2 issues that I am not sure how to solve:

      1. I want to be able to run locally using different SAP system clients. Not sure where or how to specify the system client.
      2. The first deployment works fine, however, subsequent deployments are not carrying through the changes to the backend system

      ui5.yaml

      ui5.yaml

       

      ui5-deploy.yaml

      ui5-deploy.yaml

       

      What am I missing?

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Timothy,

      unfortunately, those questions are related to the SAP Fiori tools. The SAP Fiori tools are integrating into the UI5 tooling with custom tasks and custom middlewares and extend them for additional functionality.I  am not aware about the details of the custom tasks and middlewares used inside.

      Sebastian Steinhauer : can you please take a look into the questions above? Is there a possibility to specify the SAP system client in the proxy? Please also take a look into the second question about the deployment. Thanks.

      Best regards,

      Peter

      Author's profile photo Kashif Bashir
      Kashif Bashir

      Hi Timothy,

       

      i had a similar thing when i used on-premise backend system. Realized that it was always reading from default client.

      However a hack into cookies on chrome dev tools worked for me.

       

      chrome%20Dev%20tools

       

       

      BR,

      Author's profile photo Andre Oliveira
      Andre Oliveira

      Hello, nice blog! Thanks for sharing! I have one question which I didn’t find an answer yet. What if I want to get a project already developed in webIDE but it’s not a standalone application, it’s the one for Fiori launchpad. That means there’s no index.html and no webapp folder. Is there an easy way to convert this kind of application to be possible to work with it in vscode with ui5 tooling?

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Andre,

      thanks for your positive feedback.

      Basically, yes. How does the structure of the project look like? Are the resources flat inside the Web IDE project or a different folder? The complexity of the conversion is related to your current project. It could be easy to adopt the tooling on top. In general, it is about adding a package.json and the ui5.yaml to your project, configure the location of the webapp resource which is configurable in the ui5.yaml. Regarding the index.html? Does your project have a test folder with the Fiori launchpad sandbox in which your are testing the application?

      Best regards,

      Peter

      Author's profile photo Andre Oliveira
      Andre Oliveira

      Hi Peter,

       

      Thanks for your quick answer!

      My project structure is this:

      There is a test folder, but I don't use it to run the app on WebIDE, when I clicked run for the first time it asked me to choose between Component-preload.js or Component.js, those were the only options available. So I chose Component.js and it runs it correctly and I can test it on WebIDE before deploying it back to Abap.

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Andre,

      one more question - which option did you choose in the run menu? Run standalone or run in the Fiori launchpad sandbox? Can you also please share the sap.app/id from the manifest.json here? This is needed for the namespace in the UI5 Tooling files. The project is flat (which is not optimal, usually there is a webapp folder underneath containing the resources of the application), but with some manual configuration it should be possible to run it locally - the only thing you need to configure in addition then is the proxy since in the WebIDE environment, the neo-app.json is used to route your requests to a destination. For this you need to configure a proxy. BTW: one more thing - which UI5 version do you use?

      Unfortunately, there is no magic tool yet, which helps you to convert the project - but I wanted to do this little exercise to get an understanding whether this could be done with tooling support or not. Maybe we can create something for those scenarios then - no promise... 🙂

      Thanks and best regards,

      Peter

      Author's profile photo Andre Oliveira
      Andre Oliveira

      Hi Peter,

       

      I could successfully convert my project to run with the UI5 tooling 🙂

      What I did was to generate a new simple ui5 application from WebIDE, using "new project from template". Then I started copying all the controllers and views from the old project into this newly created one. Then I adjusted everything to make it work on WebIDE. When it was ok, I just exported it, copied to my local machine, followed your instructions here from the blog and voila, it worked as a charm!

      Thank you so much for the support!

       

      Best regards,

       

      Andre

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Andre,

      thanks for your feedback and happy to hear that it works. 🙂 Maybe we can implement a migration support for flat projects within the UI5 migration tool in future.

      Best regards,

      Peter

      Author's profile photo Kashif Bashir
      Kashif Bashir

      Thanks Peter,

       

      I am behind a corporate proxy therefore i couldn't run it with NORTHWIND. However i tried to run through an  internally accessible backend (Odata from SAP system on premise) and it worked like a charm.

       

      Thanks alot.

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Kashif,

      Great to read that it runs smoothly for you! Thanks for your feedback. 🙂

      Best regards,

      Peter

      Author's profile photo Muhammad Ilyas
      Muhammad Ilyas

      Hi  Peter Muessig ,

      You been doing excellent in ui5 tooling and responding to questions. I know a busy week ahead. I'm playing with it but corp proxy messed everywhere in Node development and so here too.

      PS C:\Users\m.ilyas\Desktop\ui5-tooling> yarn run start
      yarn run v1.22.10
      warning package.json: No license field
      $ ui5 serve -o index.html
      Server started
      URL: http://localhost:8081
      Error: getaddrinfo EAI_AGAIN services.odata.org
          at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:66:26)

      I have added .env in the root with following but not lucky yet. I created a standalone separate proxy and tested it is working with CPROXY.

      http_proxy = 'http://172.16.0.38:808'
      https_proxy = 'http://172.16.0.38:808'
      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Hi Muhammad,

      when looking into your config above, is it correct that your proxy uses port 808 and not 8080? This looks a bit suspicious.

      Can you also share your ui5.yaml here? Is the configuration for the proxy middleware correct?

      Best regards,

      Peter

      Author's profile photo Muhammad Ilyas
      Muhammad Ilyas

      Thank you Peter for swift reply. 808 is correct and is created myself to shadow user password prompts.

      here is ui5.yaml and errors in browser and console.

      specVersion: "1.0"
      metadata:
        name: ui_tooling
      type: application
      # https://sap.github.io/ui5-tooling/pages/extensibility/CustomServerMiddleware/
      server:
        customMiddleware:
        - name: ui5-middleware-simpleproxy
          mountPath: /svc/
          afterMiddleware: compression
          configuration:
            baseUri: https://services.odata.org/V2/Northwind/Northwind.svc/
      

      browser%20error

      browser error

      console%20error

      console error

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Thanks for the details. The configuration looks good. Do you use a windows, linux or mac machine?

      Instead of using .env, can you try to set/export the environment variables on the command line before starting the server? The .env file isn't used by the server.

       

      Author's profile photo Muhammad Ilyas
      Muhammad Ilyas

      Wow. That's a cool hack. I will try it today. I also started working on cproxy middleware and perhaps its away a few attempts.

      I'm on windows.

      Author's profile photo Muhammad Ilyas
      Muhammad Ilyas

      Here is a quick response to the hack. no luck 🙁

      curl is working fine but  the node process doesn't consider it entirely.

      Windows PowerShell
      Copyright (C) Microsoft Corporation. All rights reserved.
      
      Try the new cross-platform PowerShell https://aka.ms/pscore6
      
      PS C:\Users\m.ilyas\Desktop\ui5-tooling> netsh winhttp show proxy
      
      Current WinHTTP proxy settings:
      
          Proxy Server(s) :  http://172.16.0.38:808
          Bypass List     :  localhost;127.0.0.1
      
      PS C:\Users\m.ilyas\Desktop\ui5-tooling> curl  https://services.odata.org/V2/Northwind/Northwind.svc/
      
      
      StatusDescription : OK
      Content           : <?xml version="1.0" encoding="utf-8" standalone="yes"?>
                          <service 
                          xml:base="https://services.odata.org/V2/Northwind/Northwind.svc/"    
                          xmlns:atom="http://www.w3.org/2005/Atom" 
                          xmlns:app="http://www.w3.or...
      RawContent        : HTTP/1.1 200 OK
                          Vary: *
                          DataServiceVersion: 1.0;
                          Content-Length: 3238
                          Cache-Control: private
                          Content-Type: application/xml;charset=utf-8
                          Date: Wed, 02 Dec 2020 13:40:20 GMT
                          Expires: Wed, 02 Dec...
      Forms             : {}
      Headers           : {[Vary, *], [DataServiceVersion, 1.0;], [Content-Length, 3238],      
                          [Cache-Control, private]...}
      Images            : {}
      InputFields       : {}
      Links             : {}
      ParsedHtml        : mshtml.HTMLDocumentClass
      RawContentLength  : 3238
      
      
      
      PS C:\Users\m.ilyas\Desktop\ui5-tooling> npm run start
      
      > ui_tooling@ start C:\Users\m.ilyas\Desktop\ui5-tooling
      > ui5 serve -o index.html
      
      info server:custommiddleware:proxy Starting proxy for baseUri https://services.odata.org/V2/Northwind/Northwind.svc/
      Server started
      URL: http://localhost:8081
      Error: getaddrinfo EAI_AGAIN services.odata.org
          at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:66:26)
      Author's profile photo Muhammad Ilyas
      Muhammad Ilyas

      Thank you Peter for the hack, it wasn't working for me somehow but I had a workaround of another proxy for it and it is also push to npm for others.

      ui5-middleware-cproxy

      I'm learning node/js and UI5 coming from ABAP world, so requesting others to contribute to make it easy to setup local dev environments.

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Welcome. congrats and thanks, Muhammad. You are a contributor to the UI5 ecosystem now.

      Ok, your middleware proves that it is related to the environment variables or the express proxy which somehow do not consider the proxy configuration. I will also check that a bit more in detail and extend the docu for that.

      Good catch. 🙂

      Best regards,

      Peter

      Author's profile photo Muhammad Ilyas
      Muhammad Ilyas

      Thanks for appreciations. I'm being listening to the development in UI5 and creating a use case for our team to adopt it for projects.

      Author's profile photo Mahesh Parab
      Mahesh Parab

      Thanks Peter, A great blog on the modern UI5 tooling, I am glad that we have reached to a "Gold Standard" in terms of tooling. super efforts!!!

      Author's profile photo Peter Muessig
      Peter Muessig
      Blog Post Author

      Thanks so much for your nice feedback! 🙂