SAPUI5-Deployer Project

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.

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!

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/.