Automating UI5 app deployments using GitHub Actions

[sonalika_porwal]

Developers are sometimes overwhelmed by the sheer number of tools available to them and prefer the ones that work best for them. If you are like our team, you might have a preference for VSCode above WebIDE (it just works better for cross-language developments). Additionally, you may want to stick to GitHub for your UI5 developments as well, just like how you use it for ReactJS/NodeJS/other frameworks.

So, what do you do about deployments in such cases? How do you build, deploy & test your UI5 (OpenUI5/SAPUI5) applications easily without the built-in WebIDE features?

This blog extends the learnings from our UI5Con2021 session on “Automate UI5 App Deployments with GitHub” and provides a step-by-step process on how you can set up & leverage an efficient CI-CD pipeline using GitHub actions for your UI5 apps.

TLDR: We use a custom GitHub action ui5-deploy to simplify and accelerate our setup for automatically building and deploying code to the SAP BTP Neo environment. Official reference document can be obtained at https://github.com/marketplace/actions/ui5-deploy

UI5Con Session:

‘Build’ and ‘Deploy’ for UI5 apps

For an application deployment to continue, the build is necessary. The build is the process of compiling and packaging software into a form ideal for deployment, installation, or release. Let us try to understand more about build and deployment.

Application build

Build is one of the very essential steps while working on any productive application development. In UI5 applications usually, webapp folder will be used while developing an application and dist folder will be used while loading it in the browser for productive usage. The process which creates this dist folder from webapp folder is known as build.

Build process can involve multiple steps such as,

• Minimizing code for better performance (component-preload.js)


• Transpiling modern JS to Vanilla JS


• Creating CSS files using LESS & SASS files


• Bundling resource files and many other things

Application deployment

Once we have a productive dist folder from the build process, the next step is to deploy those changes in the cloud. So that end users can access your application with the help of a URL.

These concepts might sound very basic for a person who is coming from a background of different JS frameworks. But for someone who is working only on UI5 for a long time, may find it confusing and non-essential. The reason being developers do not need to worry about things in practice. More often these are one-time setups done by senior developers or architects. Also, SAP provides an easier way to do it with the help of WebIDE and a business studio.

The need for automated deployments?

As we have already covered SAP provides multiple GUI-based solutions to deploy UI5 applications. If so, what's the point of automating deployment? How does it help with productivity? Here are some advantages from our experience:

1. Centralized deployment

Deployment is one of the final steps before an application becomes available for end-users. Having a centralized deployment not only helps with better tracking of all deployments but also reduces the chances of an incorrect build getting deployed by a developer.

2. Periodic deployments

An automated setup with no deployment overhead for new builds encourages frequent deployments by the development team, especially the DEV environment. This feature-specific / git-commit-based deployment helps early identification of issues if any by other team members and keeps everyone updated.

3. Automated quality checks | Integrated static code check

Static code checks such as ESLint help avoid the application from breaking due to usual JS errors. By ensuring these checks run automatically prior to every build, combined with other useful Github actions, we can be extra sure that the code passed through our quality gate mandatorily before every deploy.

4. Using GitHub secrets for centralized access

As the deployments are carried out centrally through our CI/CD pipeline, we don't run into deployment bottlenecks due to SAP BTP permissions or credential sharing requirements with certain developers. GitHub secrets allow a secure configuration of a central user that can be configured once and used automatically for all deployment runs.

How to automate deployment from GitHub?

We will make use of GitHub actions here to simplify our setup. GitHub Actions enables you to create custom software development lifecycle workflows directly in your GitHub repository. These workflows are made out of different tasks so-called actions that can be run automatically on certain events. You can learn more about them in official GitHub documentation here.

These are some nice addition to GitHub’s extensive feature set.

1. GitHub will be used as a code repository for the UI5 application.


2. SAP BTP sub-account will be connected for deployment.


3. The connection will be established using our custom GitHub action.

 

Step-by-step guide:

One of the assumptions for the next steps is that you are already aware of how to do application deployment to SAP BTP Neo. It is essential to know which steps we are trying to automate here. If not, please refer to here↗️

All GitHub action-related content will be placed inside the .github/workflows folder of the project. If your project is not having one, do create these folders.

Inside the folder, we need to have a .yaml file that will consist of all configurations. This filename can be as per your needs. Here we will go with deployment.yaml for simplicity. In the end, your folder structure should look something like the below screenshot.

deployment.yaml

name: SAP BTP Deployment



on:

  # deployment will take place on GitHub PUSH action, whenever there is a push to the 'master' branch (we can change it to any action, Ex: COMMIT)

  push:

    branches:

      - master

  # for manual deployement

  workflow_dispatch:

    inputs:

      logLevel:

        description: 'Log level'

        required: true

        default: 'warning'



jobs:

  deploy:

    name: Deployment

    runs-on: ubuntu-latest

    # the jobs which will run on this event

    steps:

      - name: Checkout to repository

        uses: actions/checkout@v1

      - name: Use Node.js ${{ matrix.node-version }}

        uses: actions/setup-node@v1

        with:

          node-version: ${{ matrix.node-version }}

      - name: Load NPM dependencies

        run: yarn

      - name: Build UI5 Project

        run: yarn build-all

      - name: Deploying Project

        uses: integrtr/ui5-deploy@master

        with:

          type: 'neo'

          user: ${{ secrets.NEO_USER }}

          password: ${{ secrets.NEO_PASSWORD }}

          host: ${{ secrets.NEO_HOST }}

          sub-account-id: ${{ secrets.NEO_ACCOUNT }}

Since we are using multiple GitHub secrets which are essential to connect to SAP BTP, we can maintain them at GitHub secrets section GitHub repository → Go to settings tab → Secrets

Note: You will need administrator/owner access in the GitHub repository to maintain secrets.

SAP BTP requires an application to have some primary details which are necessary. Those can be maintained in mta.yaml at the root of your project.

root

|__ mta.yaml

mta.yaml

_schema-version: '2.0.0'

ID: 'ui5boilerplate'

version: 1.0.0



parameters:

  hcp-deployer-version: '1.0.0'



modules:

  - name: 'ui5boilerplate'

    type: com.sap.fiori.app

    path: ./dist

    parameters:

      html5-app-name: 'ui5boilerplate'

      html5-app-display-name: 'ui5boilerplate'

      minimum-sapui5-version: 1.44.10

      html5-app-version: 1.0.0-${timestamp}

We have configured our project to use GitHub action and deploy our application to BTP on a new commit to the master branch, This is the default behavior that you will be having now and can be completely customized by tweaking yaml files with the help of GitHub reference documents. Now you can go ahead with pushing your new changes to GitHub and you would be able to notice ‘GitHub action’ in the Actions tab as soon as your code is merged with the master branch. After completion of your deployment, you would be able to see updated code in your BTP sub-account.

Sample repository with GitHub action setup: https://github.com/integrtr/ui5-boilerplate/tree/basic-deployment-setup

So, now that you have the basic setup for your deployments configured and automated, go ahead and experiment to make things more efficient. Some of them that you can try out are:

• Deploying a single application to multiple sub-accounts


• Maintaining dev, quality, and production environment with ease


• Combined automated deployment and manual deployment to production for better control


• Using additional GitHub actions from the marketplace for code quality checks, automated tests (like ESLint)


• Multi-system deployments. Use the ui5-deploy action to configure deployments for your ABAP environments

Happy automating your development workflows!