Skip to Content
Technical Articles
Author's profile photo Florian Pfeffer

Grunt plugin to upload UI5 sources to NetWeaver ABAP


At the moment of writing this post in the UI5 projects I am involved there is always the discussion which IDE should be used. SAP Web IDE would be of course the best choice in most cases, but many customers are still somehow reserved regarding web based tools in the Cloud and storing the sources not on own servers. There are solutions for such problems, but they are still some kind of a workaround. Another gap of SAP Web IDE are the missing Continuous Integration and Continuous Delivery options at the moment (this gap will be closed in the next few month according to SAP). Beside SAP Web IDE the next choice we have for UI5 development is Eclipse with the UI development toolkit for HTML5. But hopefully everyone agrees, Eclipse is not really an IDE for JavaScript development (not fast, code completion slow and buggy, …). The advantages of Eclipse are the SAPUI5 ABAP Repository Team provider which comes with the UI5 plugin and to work with an on-premise Git repository. Due to the described reservations of customers and behaviors of the IDEs (especially Eclipse) in many cases the projects decide to use another JavaScript IDE (for instance WebStorm or Visual Studio Code) to implement their openUI5 and SAPUI5 apps. But there is still a gap in the process. The chosen IDE does not support the deployment of the UI5 sources to the NetWeaver ABAP system if the apps should be executed on such a system. Neither directly from the IDE nor from a CI server. To close that gap, the closest solution was to create a Grunt plugin which does the job. Nearly each project uses Grunt (or Gulp which can also call Grunt tasks via a special plugin), so that the integration of the additional task is very easy (either directly in the IDE or in a project of a CI server).

Grunt Plugin “grunt-nwabap-ui5uploader”

The Grunt plugin which does the upload job is called “grunt-nwabap-ui5uploader”. The plugin does following things:

  • Create BSP container if not already available.
  • Synchronize folders between local project and the BSP container (create new folders, delete removed folders).
  • Synchronize files between local project and the BSP container (create new files, delete removed files, update changed files).

The sources and documentation are available at As usual for a grunt plugin it is available as NPM package for easy installation and usage (

The pre-conditions for the usage are:

  • Node.js must be installed (>= 8.5).
  • Grunt’s command line interface must be installed globally (npm install -g grunt-cli).
  • Grunt must be installed for the project (npm install grunt –save-dev).
  • On the NetWeaver ABAP system the ABAP Development Tool services must be activated (transaction SICF, path /sap/bc/adt) and the user must have the necessary rights to use the tools and to create/modify BSP containers which acts as UI5 repositories.The plugin was tested with NW 7.40 and NW 7.5x systems.

To install the plugin just follow the steps described on Github. When the plugin is installed the configuration and registration of the upload task can be implemented in the “Gruntfile.js” of your project.

Here is a little sample project containing a UI5 app (based on UI5 1.28, so no manifest.json) to illustrate the setup. All UI5 app relevant objects are contained in folder “webapp”.


In the following Grunt file there is just a task “nwabap_ui5uploader” defined which describes that all files in the “webapp” folder should be uploaded to a BSP container “ZZ_UI5_DEMO_AP1” in package “ZZ_UI5_UP_DEMO”. For simplicity reasons in that example the whole content of the “webapp” folder is uploaded. In real life projects several “build steps” would create an optimized version of the coding stored in a separate folder, for instance “build”. In that case of course the optimized coding has to be uploaded.

Because the changes are tracked, a transport number is also defined. It is also possible to upload the sources as “local objects” into the “$TMP” package without transport number. To avoid that the user name and password for the NetWeaver server are stored in the file, they are passed as command line arguments which are fetched using grunt.option().

This is a very simplified Grunt file to set the focus only on that specific plugin, but in real life scenarios there are of course some additional tasks for linting, UI5 preload component creation, test and many more. For a detailed list of all options available for the upload plugin (e.g. strictSSL, object language, …), please have a look to the documentation on GitHub.


Usage scenarios

After the upload task in the Grunt file is defined it is ready to use. Following two sample scenarios shows how it can be used.

Direct upload to NW ABAP

This first example is for developers who do “single man” projects or who wanna test their implementation directly on the NetWeaver server in for instance a BSP container assigned to the “$TMP” package.

In a console for the project folder the developer just have to run the following command.

grunt –user=myuser –pwd=mypassword

Before the execution the target package is empty.


The console display which actions are done for which folders and files. In that example only “create” operations are done, but if you later change or delete files or folders the corresponding actions are displayed also in the log.


Afterwards the BSP container and the UI5 sources are available in the package.


Testing the app via calling “index.html” file shows that the upload worked.


Integration into Continuous Integration/Continuous Delivery environment

The scenario to integrate the upload/deployment step for an UI5 app in a CI/CD environment is the most interesting for me. In a CI/CD project there are several build steps defined (e.g. static code checks, execution of tests). If all steps are processed successfully the sources should be uploaded to the NetWeaver ABAP server by calling the defined Grunt task.

For demo purposes I created for the above described UI5 project a Jenkins project pointing to the Git repository of the UI5 project. The configuration executes an “npm update” step to install/update the Node.js plugins necessary for the node related steps. Afterwards the grunt nwabap_ui5uploader step is executed which triggers the deployment of the sources to the NetWeaver ABAP server. To avoid to directly enter the password in the console step I used the “Masked Passwords” plugin. With that plugin a variable NWABAP_PWD is defined with the masked password. This variable is then addressed with “%NWABAP_PWD%” to provide the password for the grunt task execution.


If the build is successful, in the Jenkins build log also the action steps of the upload task can be found. To see a difference to the example before I deleted the folder “test” containing file “test.txt” in the “controller” folder. The started build was successful and in the console output of the Jenkins build the following information can be found.


And of course the BSP container is updated, that means the file and the folder removed from the Git repository were deleted on the NetWeaver ABAP server too.



With that plugin it is a lot easier for me to setup my development environment for UI5 projects regarding the choice of the IDE and the integration into a Continuous Integration and Continuous Delivery infrastructure. There are so many other Grunt plugins which can be combined in such an environment to help to improve the quality of the source code and to the improve the efficiency of a developer. In case you try out the plugin and find some bugs, please report it via GitHub.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Daniel Ruiz
      Daniel Ruiz

      Great stuff!

      Author's profile photo Vladimirs Semikins
      Vladimirs Semikins

      Thanks for sharing! I shared this url within our UI5 slack channel members, fyi -

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      This is absolutely stunning! The only reason I keep Eclipse in my workflow is to use the ABAP Team provider plugin -- I have yet to test in on an ABAP environment, but it seems I now can kiss Eclipse goodbye for eternity ūüôā

      Author's profile photo Amit Agrawal
      Amit Agrawal

      Great. A very useful plugin

      Author's profile photo Helmut Tammen
      Helmut Tammen

      Great stuff, thank you. I will use it next and dismiss Eclipse.

      Author's profile photo Lalith Manokar S
      Lalith Manokar S



      Florian Pfeffer

      i have tried the exact same process but i am failing.

      i am facing an issue.

      No "nwabap_ui5uploader" targets found.

      warning Task "nwabap_ui5uploader" failed.

      can you help me



      Lalith. S

      Author's profile photo Ales Erban
      Ales Erban

      Hi Lalith Manokar S,

      I am getting the same error, did you manage to resolve it?




      Author's profile photo Michael Schwingenschlögl
      Michael Schwingenschlögl


      I also got the same problem and it took a few hours to figure out the Problem.


      Short answer:

      The ‚Äúgrunt.loadNpmTasks('grunt-nwabap-ui5uploader');‚ÄĚ seems to initializes the configuration. If the configuration is already defined. (As on our example) The configuration will be overwritten. By changing the order all will work fine.


      This will not work:

      //Define configuration
      var config = {
         nwabap_ui5uploader: { ... }
      //Set configuration
      //Load Module


      This will work:

      //Define configuration
      var config = {
         nwabap_ui5uploader: { ... }
      //Load Module
      //Set configuration


      I hope this will help others to save a few hours.

      Author's profile photo Vinay Kumar Kumawat
      Vinay Kumar Kumawat

      how to find out port for conn server, is it same as ADT service in SICF.

      Author's profile photo Florian Pfeffer
      Florian Pfeffer
      Blog Post Author


      But you can find it out via transaction SMICM. In the menu Goto -> Services check the port for either the HTTP or the HTTPS service.