SAP UI5 continuous integration with Bitbucket Pipelines

[GregMalewski]

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