Skip to Content
Technical Articles
Author's profile photo Jakob Marius Kjær

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

Hello again.

Since you are here, i guess you managed to get through my first blog about setting up your local environment.

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

This blog we will start to add some more features to our app and make sure it runs the right SAPui5 version.

I found a NPM package that does exactly what I was looking for.

So let’s try it out.

Run

npm install -D sapui5-runtime

to install it.

Now we need to edit the package.json file to add our specific sap-ui5 runtime. My version is 1.60.18.  So I added an entry in to the file like this

sapui5-runtime{
  version: 1.60.18
}

If you added this like I did after the install, then run to add the version.

npm rebuild

[Update] I’ve deleted a section of this blog, where I couldn’t get the above to work. With the new version 1.4.0 it is now possible to add the proxy configuration via the following environment variables:

export HTTP_PROXY http://hostname:port
export HTTPS_PROXY https://hostname:port
Thanks Sebastian Limbach for your prompt response!

If you chose the content delivery network as part of your yeoman setup, then we need to change the index.html file to use some local resources. So replace the sapui5.ondemand.com with a … So the bootstrap is

<script id="sap-ui-bootstrap"
	src="../resources/sap-ui-core.js"
	data-sap-ui-theme="sap_belize"
	data-sap-ui-resourceroots='{
		"au.com.agilux.test_tooling": "./"
	}'
	data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
	data-sap-ui-compatVersion="edge"
	data-sap-ui-async="true"
	data-sap-ui-frameOptions="trusted">
</script>

Now because we want the app with local resources, Volker Buzek wrote an excellent blog about some of the tooling plugins to use.

Now let’s install the plugin ui5-middleware-servestatic to serve the ui5 resources from our newly downloaded runtime.

run command:

npm install ui5-middleware-servestatic --save-dev

Add the following to the package.json file

"ui5": {
        "dependencies": [
          "ui5-middleware-servestatic"
        ]
      }

And add to your ui5.yaml the following:

server:
  customMiddleware:
  - name: ui5-middleware-servestatic
    afterMiddleware: compression
    mountPath: /resources
    configuration:
      rootPath: "../sapui5-1.60.18/resources"

So I’ve installed my sapui5 runtime up folder back from my root of the project so it can be reused by other apps as well.

Now when I run npm start again. My server doesn’t start. I realized that the UI5 tooling version was too low and needed to be updated. I realised that I had another version of my ui5-tooling sitting globally that needed an update. So maybe I should have listened to myself in the previous blog and ran npm install -g @ui5/cli

And we are now running the app with our own local version of UI5.

 

Now let’s install the livereload module.

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

Now add the dependency as well as the yaml file as according to Volkers blog. Now when you run npm start again, you should have live reload abilities.

Alright, so we got a pretty good basic setup now. Let’s move on to exploring VS code plugins and tackle our OData gateway issue in our next blog

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Volker Buzek
      Volker Buzek

      this is so cool - another great example of using the UI5 tools available and glueing them together to fit a specific development requirement. nice!

      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær
      Blog Post Author

      Thanks Volker. Really appreciate your comment. It's had a lot of impact on my work already and it's been great getting a bit hands on with the tooling and extension.

      Author's profile photo Sebastian Limbach
      Sebastian Limbach

      Hi Jakob,

       

      Pretty interesting blog post! About a year ago I thought about the same thing as you: "How can I achieve a completely working local environment to develop UI5 applications." Because of this I actually wrote the npm package "sapui5-runtime" which you mentioned in this blog post. Unfortunately, I never had the option to test it behind a corporate proxy. Axios is actually quite good with dealing with proxies, as it looks at the "HTTPS_PROXY" & "HTTP_PROXY" environment variables.

      Could you try setting these variables and running npm rebuild again?

      If this doesn't work I might need to adapt the package to get around the proxy issue.

       

      Best regards,

      Sebastian

      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær
      Blog Post Author

      Awesome Sebastian. I'll try that today. I just read somewhere that it wasn't. Too bad it can't pick up the proxy from the npm config as that is already set. I'll try to set an environment variable.

      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær
      Blog Post Author

      Hi Sebastian,

      I've fixed a few issues I had with your npm package and created a pull request. Please review and accept if you are ok with the changes. Once merged I'll update the blog.

      Author's profile photo Sebastian Limbach
      Sebastian Limbach

      Hi Jakob,

      Thank you very much for your Pull Request!

      I just merged the changes into master and published a new version of the package: https://www.npmjs.com/package/sapui5-runtime

      With version 1.4.1 it is now possible to add the proxy configuration via the following environment variables:

      export HTTP_PROXY http://hostname:port
      export HTTPS_PROXY http://hostname:port
      Best regards
      Sebastian