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

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

Hi all,

At my current client site we are using Webide for our development, but since SAP has announced the launch of application studio and the overall maturity of the ui5-tooling. I thought it would be good to explore how to set up a local development environment and I wanted you guys as part of the journey. These blogs are basically written as I go along. So we see how far we get 🙂

My current challenges will be:

  • Windows Computer without admin rights and behind a corporate proxy
  • Use the right SAPui5 version
  • Use Odata services from SAP Gateway server with authentication
  • Our apps are using components of other apps
  • Some apps are built with the test launchpad as a html file
  • Use the latest plugins from VS Code
  • Deploy to the ABAP NW server

So all in all a few things to tackle.

First up let’s get the development environment ready.

We need nodeJS, vs-code and git on the computer.

As soon as you got that installed open up the terminal or command prompt.

For my testing I want to create a basic app and then slowly expand the functionality in that app to get everything working.

so create a new folder on your computer and use command

npm init

to initialise your package.json file, this file is used by Node to read dependencies and we can add some other cool stuff in there. More on that later. If you have issues running NPM or later the git or UI5 commands. Then you need to add to your path which could be an issue when you are not an admin. However there is a solution

Add the following to the environment variable path

%USERPROFILE%\AppData\Roaming\npm

Then run

git init

to have the git repository intiated.

I’m using Marius Obert easy UI5 generator for an easy start on my app. So run

npm install -g yo generator-easy-ui5

If you are running into issues where it doesn’t install, then you need to set the proxy in NPM. IF you have username and password then the syntax is http://username:password@proxy_server:proxy_port

 

npm config set proxy http://proxy.company.com:8080
npm config set http-proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

 Now we need to initialise the app.

yo easy-ui5

Now i also had an issue here as Yo wouldn’t pick up my proxy. So after looking and reading this issue.

I found that i needed to set yet another variable, bear in mind this variable is only set for your session (at least on windows)

From windows:

SET GLOBAL_AGENT_HTTP_PROXY=http://proxy_server:proxy_port

MAC / Linux

export GLOBAL_AGENT_HTTP_PROXY=http://proxy_server:proxy_port

IF you are finally successful, took me a while also YO for some reason took ages to run. You should now have an application running.

Go to your project and run

npm start

 

My next blog I will tackle the next issue with local SAPUI5 version specific resources and how to setup some additional features in the UI5 Tooling.

 

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

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Florian Wallburg
      Florian Wallburg

      Hi Jakob,

      why don’t you use a Docker Container for this scenario?

      Checkout my images.

      https://cloud.docker.com/u/flow1985/repository/docker/flow1985/ui5-docker

      Best regards,

      Florian

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

      That's a great idea. However the restriction on our computers at the client's is no docker desktop and we don't have a docker network that the developers can access.

      Author's profile photo Mio Yasutake
      Mio Yasutake

      Hi Jakob,

      Thanks for posting these blogs.

      This is what I was looking for!

       

      Regards,

      Mio

      Author's profile photo Graff Christian
      Graff Christian

      Hi Jakob,

      This blog series is AMAZING! Thanks for sharing your knowledge with us. I guess lots of people (myself included) are looking for and trying to find a proper way to setup a local development environment. The requests and restrictions of your company are similar to ours so I'll start working through your blog series right now 🙂

       

      Best regards,

      Christian

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

      Thanks so much for your comment. I'm glad you are enjoying it. I guess there is a lot of devs out there who want to get started locally, but not necessarily want to get deep into node. I'm hoping this guide will basically just act as walk through to get the stuff working and not having to bother too much.

      Let me know if you run into any issues. A suggestion for the environment variables is to use a .env file and dotenv-cli to use the sapui5-runtime.

       

      Author's profile photo Graff Christian
      Graff Christian

      Hi Jakob,

      here a short recap from my perspective: In short - great content that brought us a HUGE step forward. We are even able to load needed FLP-plugins into the local Fiori Launchpad from the remote frontend server.

      I've got one question regarding the environment variables: how do you use them for sapui5-runtime. I didn't find any assginment of process.env.* inside this project...

       

      Best regards,

      Christian

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

      The SAPUI5 Runtime is mostly to be used for single app development, if you use this to test multiple apps. I would download the runtime manually and use the static plugin to serve the resources.

       

      You can set the env variables for example using dotenv-cli package.

      Author's profile photo Graff Christian
      Graff Christian

      Right, that's the way I do it now. I've placed different versions (1.60, 1.71) of the SDK next to my dev folder with all the apps. This way I can serve e.g. the Fiori Launchpad resources from the local SDK in the version I need.

      Author's profile photo Nabheet Madan
      Nabheet Madan

      Great stuff Jakob, thanks for documenting it, much needed. We will try it out soon.

      Author's profile photo Heise Brian Nicholas
      Heise Brian Nicholas

      Hi. Do you have the full source code for this example available for download? I keep trying to follow what you did but I'm getting so many errors and I don't know where they are coming from. I know I'm making a mistake somewhere. It would be helpful if I could see the full source code.