Skip to Content
Technical Articles

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

9 Comments
You must be Logged on to comment or reply to a post.
    • 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.

  • 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

    • 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.

       

      • 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

        • 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.

          • 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.