Local UI5 development with Gulp and UI5-toolkit

[Benedikt3]

Update Q1/2020

a lot of things have changed, Pleases use the new ui5-tooling with plugins to create a similar setup:

Tooling:

https://sap.github.io/ui5-tooling/

Plugins

https://github.com/petermuessig/ui5-ecosystem-showcase#readme

e.g. to proxy https://github.com/petermuessig/ui5-ecosystem-showcase/tree/master/packages/ui5-middleware-simplepro...

__________

Original Post

 

UI5-Toolkit is an NPM plugin that just works. Toolkit supports live-reload, testing, testing with Karma and includes a CI environment configuration. The toolkit is open source, you can use it right away for free.

This is the first tutorial and will cover: perquisites setup, basic tasks and deploying manually to nwbc system.

We had to remove all external links, even if we point only to open-source software (VSCode, Node, Gulp) to not violate the Rule of Engagement by SCN. You must go to google and find them by yourself. But it should not be too complicated to find the correct page.

1. Perquisites

We will use Windows 10 and the git-bash, it works similar on other systems.

1.1 Visual Studio Code

This is our IDE, download and install it.



Add in VSCode the ESLint plugin

1.2 GIT

Don`t forget to install git-bash as well.
It is  selectable during the git installation

1.3 Node

This is the JavaScript server environment.

1.4 VSCode Settings & NPM Global

We should change the default terminal and install gulp cli global.

Press in VSCode Shift-Ctrl-p this opens the command Palette. Type Select Default Shell and select Git Bash.



Open the integrated terminal:



Type npm I gulp-cli -g, this will install Gulp-Cli global:

1.5 GitLab

Finally, create a GitLab account. GitLab has a great continuous integration (CI) environment. We will use this functionality later.

2. Project-Setup

2.1 Create a new Repository at GitLab

For UI5, we recommend to encoding your company domain and the target module in the namespace. Keep the namespace identical to the repository name. Therefore we call this project “io.smartshore.ess.request”, assuming it’s a self-service (ess) application.



 



Clone the new git repository to your computer; call Git Clone command over the command palette Ctrl+Shift+P.



You will be asked for the URL of the remote repository, which can be found on your repository page:



and the parent to store the project on your local pc.

2.2 UI5-toolkit-gulp.example

Download UI5-toolkit-gulp-example and unzip the content into your local git project folder.



In our case the folder is called “io.smartshore.ess.request” and is in our user directory.

Switch in VSCode to the Git-Panel and Commit everything with an "init" message.

           

Done – you are ready to develop. Crosscheck your GitLab repository webpage. “The repository for this project is empty” message should now be replaced with the project content and look similar to the UI5-toolkit-gulp-example repository – compare it with the screenshot above.

2.3 Install project

Every node project comes with dependencies. You must install them once.



Right-click in VSCode on one of the files (e.g.  project.json).  Press open terminal. This will open a bash terminal pointing to the root of your project directory. Simply type npm i:

2.4 Developing

The default task is for developer. Type “gulp” and press “strg” and click on http://localhost:8000. You should see now the application in your browser



Change the view or a controller save "strg + s". Observer how the browser is refreshing automatically.

2.5 ESLint

ESLint will help you to write clean code. This is done in the IDE while typing but can also be triggered by hand as shown below “gulp lint”. And of course, is done automatically by toolkit before building or deploying; local and in the CI.

3. Deployment

3. Setup SAP NetWeaver Business Client

UI5-Toolkit can proxy oData request to the backend and can deploy apps there. You must fill out the settings in “config/build.json”:



 

Once you added a sap.nwbc.server; UI5-toolkit will proxy UI5 ”resources” from the BSP itself. Therefore, you get the correct UI5 version.

"_" are example entries. They are ignored. Remove the leading "_" to activate it.

4. Deploy to SAP NetWeaver Business Client

Finally, type “gulp deploy”. UI5-toolkit will

• testing your app


• creating a compressed version with preload files under dist


• asking you for username + password and ship everything to the ERP-System

 

Coming soon

In the next tutorials, we will cover karma, GitLab-integration and test-driven development & automatic sap cloud platform deployment.

If you can´t wait, give gulp tdd or gulp build && gulp test:ci a try and check out the GitLab ci pipeline…