Skip to Content
Author's profile photo Greg Malewski

SAP UI5 continuous integration with Bitbucket Pipelines

This is a step by step guide to configure SAP UI5 development continuous integration on Bitbucket using Pipelines.

 

General scenario description

You are using you IDE of choice (f.e. Eclipse or WebIDE) configured to push your code to git repository set on Bitbucket. You want to

  1. Clean and minimize your SAP UI5 code
  2. Check against coding practices
  3. Automatically Qunit or OPA5 (One Page Acceptance Tests) test your code
  4. Build, compress and prepare Zip archive that can be later uploaded to SAP Gateway ABAP repository with /UI5/UI5_REPOSITORY_LOAD_HTTP

Prerequisites

You have your:

UI5 project

UI5 tests prepared

Bitbucket repository set with Pipelines function enabled

Configuring package.json

This file is placed in root directory of your project that is used by npm when Docker Container will be run by Pipeline. Contents based on John Patterson’s solution published on Github: https://github.com/jasper07/saptech15 (1).

{
   "name": "masterdetail",
   "version": "1.0.0",
   "description": "Master-Detail",
   "private": true,
   "scripts": {
       "test": "grunt"
   },
   "keywords": [],
   "author": "SAP SE",
   "contributors": [
       "SAP SE <*@sap.com>"
   ],
   "dependencies": {},
   "devDependencies": {
       "bower": "*",
       "grunt": "0.4.0",
       "eslint-plugin-openui5": "0.1.0",
       "grunt-contrib-clean": "^0.6.0",
       "grunt-contrib-connect": "*",
       "grunt-contrib-copy": "^0.7.0",
       "grunt-text-replace": "^0.4.0",
       "grunt-eslint": "^3.0.0",
       "grunt-openui5": "*",
       "grunt-contrib-qunit": "*"
   }
} 

devdependencies section was prepared with the latest versions in the way allowing to run it without errors within Bitbucket Pipelines.

Configuring bower.json

This file is placed in root directory of your project. This file is responsible for loading UI5 resources. Contents based on (1).

{
   "name": "masterdetail",
   "version": "0.0.0",
   "authors": [
       "SAP SE"
   ],
   "description": "masterdetail",
   "main": "webapp/index.html",
   "keywords": [
       "masterdetail"
   ],
   "license": "MIT",
   "private": true,
   "ignore": [
       "**/.*",
       "node_modules",
       "bower_components",
       "test",
       "tests"
   ],
   "dependencies": {
       "openui5-sap.ui.core": "openui5/packaged-sap.ui.core#1.40.16",
       "openui5-sap.m": "openui5/packaged-sap.m#1.40.16",
       "openui5-sap.ui.layout" : "openui5/packaged-sap.ui.layout#1.40.16",
       "openui5-themelib_sap_bluecrystal": "openui5/packaged-themelib_sap_bluecrystal#1.40.16"
   }
}

Configuring Gruntfile.js

You can use the file prepared by John Patterson: Gruntfile.js.

Configuring Bitbucket Pipelines

As all configuration file bitbucket-pipelines.yml.is also placed in root directory of your project.

image: node:latest
pipelines:
   default:
       - step:
           script:
               - npm --version
               - npm install -g grunt-cli bower
               - npm install
               - bower install --allow-root
               - grunt build
               - tar -zcvf dist.tar.gz dist
               - curl -s -X POST https://x-token-auth:$AUTH_TOKEN@api.bitbucket.org/2.0/repositories/USERNAME/REPOSITORY_SLUG/downloads -F files=@dist.tar.gz
   custom: # Pipelines that are triggered manually
       unitTest:
         - step:
             script:
               - npm --version
               - npm install -g grunt-cli bower
               - npm install
               - bower install --allow-root
               - grunt unitTest
       opaTest:
         - step:
             script:
               - npm --version
               - npm install -g grunt-cli bower
               - npm install
               - bower install --allow-root
               - grunt opaTest

 

Assigned tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Timothy Muchena
      Timothy Muchena

      Hi

       

      Thanks for your blog.

      Is it possible to use Bitbucket pipelines to automatically deploy SAPUI5 app to SAP ABAP repository?

       

       

      Author's profile photo Grzegorz Malewski
      Grzegorz Malewski
      Blog Post Author

      Hi Timothy,

      Sure. You can do deploy SAP UI5 app to SAP ABAP repository by using https://www.npmjs.com/package/nwabap-ui5uploader as a step in Gruntfile and adding this step in the pipeline.

      Regards

      Greg