Local UI5 development with Gulp and UI5-toolkit
a lot of things have changed, Pleases use the new ui5-tooling with plugins to create a similar setup:
e.g. to proxy https://github.com/petermuessig/ui5-ecosystem-showcase/tree/master/packages/ui5-middleware-simpleproxy
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.
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
Don`t forget to install git-bash as well.
It is selectable during the git installation
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:
Finally, create a GitLab account. GitLab has a great continuous integration (CI) environment. We will use this functionality later.
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.
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:
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.
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. 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
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…
Any specific reason why you used Gulp over Grunt? I want to start using VS code for our developments, but other developers are using Web IDE, which works with Grunt.
thanks for giving some feedback on this post.
To keep the answer short; grunt is outdated => No reason to use it anymore.
WeiDE itself isn’t doing anything with grunt, its limited to a build so far. Therefore you can still use this in the FullStackWebIDE.
This libs are used by a few companies in germany/swiss for development and support building/deploying/testing in a CI. So even if there are WebIDE ppl. it doesn’t matter at all. Testing is a CI job in 2018.
Thanks for this blog.
I was following your instructions, but GitLab repository you were sharing is no longer accessible.
Could you share your code again?