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

[UxKjaer]

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 mariusobert 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

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

• 
  

  End-To-End setup of local development environment with UI5 Tooling – Part 3 VS Code

  
  


• 
  

  End-To-End setup of local development environment with UI5 Tooling – Part 4 Component reuse

  
  


• End-To-End setup of local development environment with UI5 Tooling – Part 5 Deployment

• End-To-End setup of local development environment with UI5 Tooling - Part 6 Code Coverage