Skip to Content

One of the real pains when developing SAPUI5 (or OpenUI5) applications is deploying them to your SAP ABAP server.

If you are using Eclipse as your IDE the SAP ABAP Repository Team Provider allows you to retrieve and submit your project to the ABAP server. The SAP program /UI5/UI5_REPOSITORY_LOAD does the same thing.

But these methods are really only suitable for an individual developer working in isolation – they don’t really work in team development situations where changes and deployments need to be coordinated.

Typically web development teams use a distributed version control system to manage their projects – such as GitHub. Then they build a continuous deployment solution that will take the GitHub project, add any required submodules or other prerequisite components, transform these artefacts into runtime ready states (e.g. minify .JS files) and then deploy them to the required runtime environments. To do this they may mix and match tools and technologies such as Grunt, Node.js, Maven, Gulp, Jenkins, etc.

/wp-content/uploads/2015/05/maven_707316.jpeg/wp-content/uploads/2015/05/jenkins_logo_707315.png

While this might sound like a lot of bits and bobs cobbled together the reality is pretty awesome – within a few minutes of a new code version being merged into the master branch it will automatically be deployed and running.

But in our mainly ABAP world this has rarely been required before so this is a new concept. ABAP provides developers with a unified design-time and runtime environment so simply activating your code also deploys it. Web developers tend to use their favourite IDE (or simply a text editor) to build their code locally, then they unit test it with a locally installed web server using a reverse-proxy to access backend web services. In a SAP environment, once this unit testing is complete, we now need to deploy this web application to the ABAP system to be served up via the ICF.

When I have talked to my customers about setting up a system to automate the deployment of my SAPUI5 applications I typically hit problems. Because this is all new to the Basis people they pass in onto the Network team. Because it is a development task the Network team pass it onto the in-house Development team. Because the Development team are ABAPers they throw up their hands and say not my job – or if they are web developers they say “we don’t do ABAP” because in the end we need to deploy to an ABAP system. Frustrating!

/wp-content/uploads/2015/05/problem_707317.jpg

So I have build some ABAP code to perform this deployment task for me. It is available at http://yelcho.github.io/sapui5-deployer/ and includes all installation instructions.

It does the following

  • Download the Github Archive
  • Remove wrapper subdirectory from archive
  • Minify CSS & Javascript files
  • Build Component-preload.js file where required
  • Recursively perform above steps for any required Github submodules
  • Package up all artifacts into a deployment archive
  • Optionally save deployment archive to file system
  • Deploy to SAP Internet Communications Framework
  • Invalidate the UI5 cache buster

Because it is ABAP code I can copy and paste it into my customer’s development system myself – especially as I only need to create local objects in $TMP. Usually the only infrastructure change required is configuration of the ICF to support HTTPS connections to GitHub. This is typically a task that any Basis person can do in 15 minutes and does not require a system restart – just a restart of the ICF.

Once installed you can choose to manually run a program to deploy the SAPUI5 application or automate the entire process. You may choose to write a ICF handler and allow GitHub to call it directly to trigger updates via GitHub Webhooks. This means opening up HTTP access to that ICF endpoint from outside your firewall perhaps via a SAP Web Dispatcher or other reverse-proxy. An alternative is to have an intermediary system receive the GitHub Webhook call and for it to trigger execution of the deployment code on the ABAP system. Or you could write a batch job to regularly check the SHA-1 hash of the project branch and perform a deployment when it changes. Plenty of options for you to choose between.

To give you an idea of how this could work for you I have recorded a short video demonstrating deployment of a simple SAPUI5 application to one of my customer’s development system.

Again the project can be found at http://yelcho.github.io/sapui5-deployer/.

To report this post you need to login first.

22 Comments

You must be Logged on to comment or reply to a post.

  1. L. van Hengel

    Hi Graham,

    This is really cool and useful. Really like all the functionality you build into this tool.

    Thanks for sharing the code 🙂

    Cheers,

    Leo

    (0) 
  2. Custodio de Oliveira

    Great stuff Robbo,

    I think I’ll create an ABAP 740 version. Can’t stand these ancient ABAP statements (yeah, yeah… backward compatibility… I know… 😉 )

    Usually the only infrastructure change required is configuration of the ICF to support HTTPS connections to GitHub.

    Still some pain for many people, but much more manageble.

    Cheers,

    Custodio

    (0) 
    1. Graham Robinson Post author

      Thanks mate – of course this code runs on the customer system so it sort of needs to cover the lowest common denominator when it comes to ABAP syntax.

      Cheers

      G

      (0) 
    1. Graham Robinson Post author

      Hi Raja,

      nice to hear from you mate.

      The IDE subject is an interesting one. Certainly SAP have clearly shown their intentions with the SAP Web IDE. I am still sitting on the fence on this. There is no doubt a WYSIWYG style editor for composing the SAPUI5 views quickly makes a lot of sense. And having some good starting templates built into the IDE is great too.

      The issue for me is that I spend most of my time coding the controller so all I need is a good text editor to do that.

      I see how the Web IDE makes a lot of sense for a software factory like SAP where they have many thousands of developers and they want to standardise the tools all these developers use. But in the non-SAP world web developers often make very personal decisions about what tools they want to use – so it is not uncommon to see three developers who are all working on the same project using three different IDE’s. And equally common to hear them debating why the tools they have chosen are better than those their colleagues. 😏

      It will be interesting to see how this develops over the next few years.

      Cheers

      Graham Robbo

      (0) 
      1. Jeremy Good

        Web IDE does make the deploy to ABAP quite painless (or HCP for that matter, not to mention registering a tile into FLP) 🙂

        WebIDE_Deploy.jpg

        (0) 
        1. Graham Robinson Post author

          Hi Jeremy,

          Thanks for your comment – sorry I only just noticed it.

          You are correct that you can deploy to an ABAP server directly from the Web IDE in the same way as you can from Eclipse. But IMO direct deployment is really only suitable for an individual developer working in isolation. In team environments I think you are likely to want to use something like GitHub to manage branches, commits, pull request, merges, etc. where changes and deployments need to be coordinated.

          Cheers

          Graham Robbo

          (0) 
          1. Fabio Pagoti

            Is the any alternative for that? I wouldn’t like to abandon Web IDE but it is a real pain to avoid many developers working for the same app.

            Maybe it’s possible to have many HCP accounts deploying to the same Git repository but deploying a project to an ABAP repository is actually a full export + overwrite.

            Has anyone a solution for that?

            Thanks

            (0) 
            1. Graham Robinson Post author

              Hi Fabio,

              Well I don’t use WebIDE at all. Having said that I am not often deploying to HCP – usually to on-premise ABAP systems or intermediate web servers.

              My development environment can be summarized as follows..

              • GitHub project for each SAPUI5 app.
              • Develop & test locally using a reverse proxy (Apache or nginx) to redirect calls to backend oData services
              • Use my favourite text editor (Sublime Text) for SAPUI5 development
              • Use GitHub Flow – master branch is always deployable
              • Use SAPUI5-Deployer to automatically deploy master branch updates to ABAP dev system

              I also use the CDN for SAPUI5 libraries as it is impossible to keep ABAP libraries up to date. (I try and use OpenUI5 libraries in preference to SAPUI5 libraries where possible)

              Cheers

              Graham Robbo

              (0) 
  3. Tomasz Mackowski

    Great project.

    I was doing similar thing but pulling application zip file from Continuous Integration server (bamboo). Git sync, unit testing,  Minify, build component-preload, creating zip is done on bamboo using Grunt and final output is deployed to ABAP repo.

    One thing I could suggest is to avoid modifying /UI5/UI5_REPOSITORY_LOAD_HTTP as it might be a challenge in some companies. How I worked around it is to download the zip in my program, putting it to ICM cache using cl_http_server=>server_cache_upload and then passing local url to standard FM.



    I could contribute to the project on github if you’re willing to accept this option.

    (0) 

Leave a Reply