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:
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.
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,
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.
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.
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.
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:
ui5-deploy
action to configure deployments for your ABAP environmentsHappy automating your development workflows!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
10 | |
9 | |
7 | |
6 | |
6 | |
6 | |
6 | |
5 | |
5 | |
4 |