For my latest project I had to develop several SAPUI5 applications as a side-by-side extension to SAP S/4HANA Public Cloud. As our S/4HANA Public Cloud landscape consists out of two tenants (testing and production) we also have two separate SAP Cloud Platform Cloud Foundry sub-accounts.
At the beginning of the project we didn't have any CI/CD in place for our GIT repositories. So for each release (+/- every 2 weeks) we manually deployed our applications to production. As you can imagine this becomes quite a hassle if you need to deploy a lot of applications (each release contains bug fixes to existing applications and/or new applications) and there is quite some chance for human mistakes when doing everything manually.
So I thought to myself, wouldn't it be so much easier to be able to deploy these applications with a push of a button (or even automatically)?! Let's try out CI/CD!
For the sake of the walk-through I created a demo GIT repository and mimicked the SAP Cloud Platform landscape on a trial account.
I'm not going into detail on how to setup the SAP Cloud Platform landscape since this is not the purpose of this blog. (and there are a lot of guides describing how to set this up)
Basically my setup looks like this (sub-accounts):
Sub-account trial-dev:
Subaccount trial-prd:
Well, for this walk-through we'll deploy a very simple application generated with easy-ui5 (created by mariusobert ). I won't go in to detail on how to generate such an application, a good guide can be found here.
When you generate the application, the only important thing to watch out for is to choose "Cloud Foundry HTML5 Application Repository" when asked the question "On which platform would you like to host the application?".
To make the karma-ci tests work in the docker image, one small adaption (browser and customLauncher section) to the file karma-ci.conf.js needs to be done so it reflects like following:
Empty template looks like:
My repository consists out of 2 stable branches develop and master. These are protected against direct commits, so changes to these branches can only be made using merge requests. Merge requests are protected so they can only be created if the pipeline of the branch succeeded. This means that for each new change we create so-called feature branches.
In the actual project we're using a gitflow-like setup, but for this walk-through that's a little over-complicated. For now we'll work with following setup:
To facilitate the CI/CD process in GitLab, I created a docker image (can be found here) containing the necessary tools. Basically the tools are:
To activated CI/CD on the repository in GitLab, the only thing that needs to be done is create a .gitlab-ci.yml file inside the root of your project. For our project we'll have 3 stages:
Our .gitlab-ci.yml file will look like this:
To get this script working you'll need to define following variables in your CI/CD settings of you GitLab repository:
Now we're all set! If we push changes to our my-super-cool-feature1 branch this will result in following pipeline:
After merging our feature branch into the development branch:
After merging our development branch into the master branch:
Well that's basically all it takes for setting up a continuous integration / continuous delivery pipeline with continuous deployment to your SAP Cloud Platform Cloud Foundry environments. I hope this saves you a lot of time and figuring things out! Feel free to try it out and leave your comments / remarks!
At the beginning of the project we didn't have any CI/CD in place for our GIT repositories. So for each release (+/- every 2 weeks) we manually deployed our applications to production. As you can imagine this becomes quite a hassle if you need to deploy a lot of applications (each release contains bug fixes to existing applications and/or new applications) and there is quite some chance for human mistakes when doing everything manually.
So I thought to myself, wouldn't it be so much easier to be able to deploy these applications with a push of a button (or even automatically)?! Let's try out CI/CD!
For the sake of the walk-through I created a demo GIT repository and mimicked the SAP Cloud Platform landscape on a trial account.
SAP Cloud Platform Landscape
I'm not going into detail on how to setup the SAP Cloud Platform landscape since this is not the purpose of this blog. (and there are a lot of guides describing how to set this up)
Basically my setup looks like this (sub-accounts):
Sub-account trial-dev:
Subaccount trial-prd:
The SAPUI5 application
Well, for this walk-through we'll deploy a very simple application generated with easy-ui5 (created by mariusobert ). I won't go in to detail on how to generate such an application, a good guide can be found here.
When you generate the application, the only important thing to watch out for is to choose "Cloud Foundry HTML5 Application Repository" when asked the question "On which platform would you like to host the application?".
To make the karma-ci tests work in the docker image, one small adaption (browser and customLauncher section) to the file karma-ci.conf.js needs to be done so it reflects like following:
module.exports = function(config) {
require("./karma.conf")(config);
config.set({
// test results reporter to use
// possible values: 'dots', 'progress', 'coverage'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: [
'--no-sandbox', // required to run without privileges in docker
'--user-data-dir=/tmp/chrome-test-profile',
'--disable-web-security'
]
}
},
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
});
};Empty template looks like:
GitLab repository configuration
My repository consists out of 2 stable branches develop and master. These are protected against direct commits, so changes to these branches can only be made using merge requests. Merge requests are protected so they can only be created if the pipeline of the branch succeeded. This means that for each new change we create so-called feature branches.
In the actual project we're using a gitflow-like setup, but for this walk-through that's a little over-complicated. For now we'll work with following setup:
| Branch | Continuous Integration | Continuous Delivery (+ deployment) |
| Master | Yes (ESLint + Karma-ci) | Yes (to prd space) |
| Develop | Yes (ESLint + Karma-ci) | Yes (to dev space) |
| my-super-cool-feature1 | Yes (ESLint + Karma-ci) | No |
To facilitate the CI/CD process in GitLab, I created a docker image (can be found here) containing the necessary tools. Basically the tools are:
- Node.js
- npm
- CF CLI
- CF Multiapps plugin
- Chrome browser
To activated CI/CD on the repository in GitLab, the only thing that needs to be done is create a .gitlab-ci.yml file inside the root of your project. For our project we'll have 3 stages:
- test (runs ESLint and Karma-ci)
- build (creates an MTA package)
- deploy (deploys MTA package to SAP Cloud Foundry)
Our .gitlab-ci.yml file will look like this:
image: geertjanklaps/node-cf-cli:latest
cache:
paths:
- node_modules/
stages:
- test
- build
- deploy
ESLint:
stage: test
before_script:
- npm install
script:
- npm run test
MTA:
stage: build
before_script:
- npm install
script:
- npm run build:mta
only:
- develop
- master
deploy_dev:
stage: deploy
before_script:
- npm install
- cf login -a $API_ENDPOINT -u $USER -p $PASSWORD -o $ORGANIZATION_DEV -s $SPACE_DEV
script:
- npm run deploy
after_script:
- cf logout
only:
- develop
deploy_prd:
stage: deploy
before_script:
- npm install
- cf login -a $API_ENDPOINT -u $USER -p $PASSWORD -o $ORGANIZATION_PRD -s $SPACE_PRD
script:
- npm run deploy
after_script:
- cf logout
only:
- masterTo get this script working you'll need to define following variables in your CI/CD settings of you GitLab repository:
| Variable | Value | Masked |
| API_ENDPOINT | API url for your environment | No |
| USER | e-mail address | No |
| PASSWORD | password | Yes! |
| ORGANIZATION_DEV | organization name dev space | No |
| ORGANIZATION_PRD | organization name prd space | No |
| SPACE_DEV | space name within dev organization | No |
| SPACE_PRD | space name within prd organization | No |
Now we're all set! If we push changes to our my-super-cool-feature1 branch this will result in following pipeline:
After merging our feature branch into the development branch:
After merging our development branch into the master branch:
Well that's basically all it takes for setting up a continuous integration / continuous delivery pipeline with continuous deployment to your SAP Cloud Platform Cloud Foundry environments. I hope this saves you a lot of time and figuring things out! Feel free to try it out and leave your comments / remarks!
- SAP Managed Tags:
8 Comments
