FL7: Configure Build & Deploy

Task: Configure Build & Deploy

Create a secret inside AWS Secrets Manager

Store your secrets (user & password & host) for your SAP NetWeaver ABAP environment:

Choose a unique name SAP_DEPLOY

Node

Add the secret value as follows and fill in your SAP user and connection details matching SICF services.

{
  "USER": "<USER>",
  "PASSWORD": "<PW>",
  "URL": "http://host:port"
}

Node

Return to your IDE/Cloud9.

Create a new file called ‘buildspec.yml‘

This file will be used by AWS CodeBuild to create the build artifacts

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 10
      
  build:
    commands:
       - npm install --global @ui5/cli
       - npm install
       - ui5 build -a
       - npm test

reports: #New
  FioriReports: # CodeBuild will create a report group called "FioriReports".
    files: #Store all of the files
      - '**/*.xml'
    base-directory: 'junit' # Location of the reports
    #file-format: CucumberJson #Type of the report, defaults to JunitXml
    
artifacts:
  files:
    - dist/*
    - appspec.yml
    - appspec_deploy.sh
    - appspec_cleanup.sh
    - Gruntfile.js
    - package.json

Create a new file called ‘appspec.yml‘

This file will be used by the AWS CodeDeploy Agent to orchestrate the deployment steps.

version: 0.0
os: linux
files:
  - source: /
    destination: /codedeploy/sapfioriapp
hooks:
  BeforeInstall:
    - location: appspec_cleanup.sh
  AfterInstall:
    - location: appspec_deploy.sh
      timeout: 180

Create a new file called ‘appspec_cleanup.sh‘

This file will be executed by the AWS CodeDeploy Agent before artifact download

echo "Cleanup"
rm /codedeploy/sapfioriapp -R -f

Create a new file called ‘appspec_deploy.sh‘

This file will be executed by the AWS CodeDeploy Agent after artifact download.

Important: Make sure to adjust the region e.g. us-east-1

echo "Starting Deployment Task"
cd /codedeploy/sapfioriapp
echo "Installing grunt & dependencies"
npm install grunt
npm install grunt-nwabap-ui5uploader
echo "Deploy to"
# AWS CLI SECRETSMANAGER
duser=$(aws secretsmanager get-secret-value --secret-id SAP_DEPLOY --region us-east-1 --query SecretString --output text | grep -oP '(?<="USER":")[^"]*')
dpw=$(aws secretsmanager get-secret-value --secret-id SAP_DEPLOY --region us-east-1 --query SecretString --output text | grep -oP '(?<="PASSWORD":")[^"]*')
durl=$(aws secretsmanager get-secret-value --secret-id SAP_DEPLOY --region us-east-1 --query SecretString --output text | grep -oP '(?<="URL":")[^"]*')
echo $durl
echo "as"
echo $duser
grunt deploy --server=$durl --user=$duser --pwd=$dpw

Create a new file called ‘Gruntfile.js‘

This file will be used to perform the actual deploment to SAP NetWeaver ABAP.
For more details, please check https://www.npmjs.com/package/grunt-nwabap-ui5uploader!
SAP BSP Name, package & transport can be adjusted directly in the file or parameterized respectively, as shown for user/password.

module.exports = function (grunt) {

    //DOC: https://www.npmjs.com/package/grunt-nwabap-ui5uploader

    var sUser = grunt.option('user');
    var sPwd = grunt.option('pwd');
    var sServer = grunt.option('server');

    grunt.initConfig({
        nwabap_ui5uploader: {
            options: {
                conn: {
                    server: sServer,
                    useStrictSSL: false
                },
                auth: {
                    user: sUser,
                    pwd: sPwd
                }
            },
            upload_build: {
                options: {
                    ui5: {
                        package: '$TMP',
                        bspcontainer: 'z_sap_fiori_app',
                        bspcontainer_text: 'test App',
                    },
                    resources: {
                        cwd: 'dist',
                        src: '**/*.*'
                    }
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-nwabap-ui5uploader');

    grunt.registerTask('deploy', ['nwabap_ui5uploader']);

};

The result should look like the following

Node

Furthermore, to leverage the new Test Report feature inside AWS CodeBuild, we can also enable junit outputs as follows.

Go and edit the ‘karma-ci.conf.js’ file:

...
  //NEW
  junitReporter: {
      outputDir: 'junit', // results will be saved as $outputDir/$browserName.xml
      outputFile: undefined, // if included, results will be saved as $outputDir/$browserName/$outputFile
      suite: '', // suite will become the package name attribute in xml testsuite element
      useBrowserName: true, // add browser name to report and classes names
      nameFormatter: undefined, // function (browser, result) to customize the name attribute in xml testcase element
      classNameFormatter: undefined, // function (browser, result) to customize the classname attribute in xml testcase element
      properties: {}, // key value pair of properties to add to the <properties> section of the report
      xmlVersion: null // use '1' if reporting to be per SonarQube 6.2 XML format
  },

  reporters: ["progress", "coverage", "junit"], //NEW
  //reporters: ["progress", "coverage"], OLD
...

To finish this, run

$ npm install karma-junit-reporter

which installs the necessary runtime dependencies.

The result should look as follows:

Node

Finally add the code to your repository. Make sure also to add the .eslintrc file.
In terminal, execute

$ git add *
$ git add .eslintrc
$ git commit -m 'initial setup'
$ git push

Validate the result inside the AWS CodeCommit Repository

Node