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
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
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,
Thanks for posting these blogs.
This is what I was looking for!
Regards,
Mio
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.
Great stuff Jakob, thanks for documenting it, much needed. We will try it out soon.
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.