GitHub Actions using the Standard Banking Demo: Put Your First Workflow in Action
Tags: devops, github, java, beginners
Published: 2022-01-10 18:01:15

## Initiate the Github Actions Workflow

To understand this article you’ll need to reference the [Standard Banking Demo](https://dev.entando.org/v6.3.2/tutorials/samples/install-standard-demo.html#introduction), which is a sample modular project provided by Entando.

Because this project contains multiple applications, we have to create one workflow per application to separate them into clear pipelines.

In this tutorial, we are going to define a workflow for the [Banking](https://github.com/entando-samples/standard-demo/tree/main/banking-plugin) microservice and the related micro frontends.

After checking out the project, create a file at this location: `.github/workflows/banking-plugin-ci.yml`

Copy the global properties at the top of the file:


``` yaml
name: Banking Plugin CI
on: push
env:
 PROJECT_NAME: banking-plugin
jobs:
```


* `name` is the workflow name
* `on` defines the triggers the workflow is listening to
* `env` defines a list of reusable environmental properties available to the workflow
* `jobs` is the list of jobs the workflow executes


## Add a Backend Job

The first job performs this sequence of steps:



* Checkout the project
* Install Java 11
* Run the backend tests
* Package the application

Each job is a new entry in the job list and runs concurrently with the other jobs.

The job has to declare the runner it uses and the sequence of tasks, or steps, it executes.


``` yaml
jobs:
 backend:
   runs-on: ubuntu-latest
   steps:
```

Please note this “backend” entry matches the job name used in the GitHub Action UI.

To define a step, you can either use existing actions from the [marketplace](https://github.com/marketplace?type=actions), create your own composite actions with `uses`, or run a bash command with `run`.


``` yaml
steps:
 - uses: actions/checkout@v2
 - uses: actions/setup-java@v1
   with:
     java-version: '11.x'
 - name: Run backend test
   run: |
     cd $GITHUB_WORKSPACE/$PROJECT_NAME
     chmod +x mvnw
     ./mvnw -ntp clean verify
 - name: Package application
   run: |
     cd $GITHUB_WORKSPACE/$PROJECT_NAME
     ./mvnw -ntp package -Pprod -DskipTests
```



Please note the commands use environment variable values (<code>$GITHUB_WORKSPACE/$PROJECT_NAME</code>) provided by [GitHub Actions](https://docs.github.com/en/actions/learn-github-actions/environment-variables#default-environment-variables) or defined at the workflow or job level.


## Add a Matrix Job for the Micro Frontends

The matrix feature allows you to run multiple jobs with the same configuration of matrix variable values.

Each matrix variable is usable in the job via a template `${{ matrix.NAME> }}`, for example `${{matrix.widget}}` in the code below.

Learn more about the matrix feature in the [official documentation](https://docs.github.com/en/actions/learn-github-actions/workflow-syntax-for-github-actions#jobsjob_idstrategymatrix).


### Initiate the Matrix Job



* At the same indentation level as the `backend`, add a new entry named `micro-frontends`.
* Use the matrix variable to differentiate each job by name.

    ``` yaml
name: ${{ matrix.widget }} micro frontend
```


* Copy the runner definition from the previous job description.
* Add the list of micro frontend names to the matrix strategy. Setting the fail-fast to `false` allows the jobs to continue if one or more is failing.

    ``` yaml
strategy:
 fail-fast: false
 matrix:
   widget:
     - alert-bar-icon-react
     - dashboard-card-angular
     - dashboard-card-config
     - dashboard-card-react
     - transaction-table
   include:
     - widget: dashboard-card-angular
       test-script-name: test-ci
```


* Add steps to checkout the code, install NodeJS, and run both `npm install` and `npm test.`

``` yaml
steps:
 - uses: actions/checkout@v2
 - uses: actions/setup-node@v2.1.4
   with:
     node-version: '14.15.0'
 - name: Run tests
   run: |
     cd $GITHUB_WORKSPACE/$PROJECT_NAME/ui/widgets/banking-widgets/${{ matrix.widget }}
     npm install
     npm run ${{ matrix.test-script-name || 'test' }}
```



Please note that the `include` option allows you to define specific properties for a given matrix strategy. The `test-script-name` in the Angular widget is unique, so we can leverage the `include` feature to switch to it from the default name.

The final job definition should be as follows:

``` yaml
micro-frontends:
 name: ${{ matrix.widget }} micro frontend
 runs-on: ubuntu-latest
 strategy:
   fail-fast: false
   matrix:
     widget:
       - alert-bar-icon-react
       - dashboard-card-angular
       - dashboard-card-config
       - dashboard-card-react
       - transaction-table
     include:
       - widget: dashboard-card-angular
         test-script-name: test-ci
 steps:
   - uses: actions/checkout@v2
   - uses: actions/setup-node@v2.1.4
     with:
       node-version: '14.15.0'
   - name: Run tests
     run: |
       cd $GITHUB_WORKSPACE/$PROJECT_NAME/ui/widgets/banking-widgets/${{ matrix.widget }}
       npm install
       npm run ${{ matrix.test-script-name || 'test' }}
```

This job configuration generates five jobs in addition to the previous one:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99wsvad2dej4dmcwg4st.png) 



### The Final Workflow Definition


``` yaml
name: Banking Plugin CI
on: push
env:
 PROJECT_NAME: banking-plugin
jobs:
 backend:
   runs-on: ubuntu-latest
   steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-java@v1
       with:
         java-version: '11.x'
     - name: Run backend test
       run: |
         cd $GITHUB_WORKSPACE/$PROJECT_NAME
         chmod +x mvnw
         ./mvnw -ntp clean test
     - name: Package application
       run: |
         cd $GITHUB_WORKSPACE/$PROJECT_NAME
         ./mvnw -ntp package -Pprod -DskipTests
 micro-frontends:
   name: ${{ matrix.widget }} micro frontend
   runs-on: ubuntu-latest
   strategy:
     fail-fast: false
     matrix:
       widget:
         - alert-bar-icon-react
         - dashboard-card-angular
         - dashboard-card-config
         - dashboard-card-react
         - transaction-table
       include:
         - widget: dashboard-card-angular
           test-script-name: test-ci
   steps:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2.1.4
       with:
         node-version: '14.15.0'
     - name: Run tests
       run: |
         cd $GITHUB_WORKSPACE/$PROJECT_NAME/ui/widgets/banking-widgets/${{ matrix.widget }}
         npm install
         npm run ${{ matrix.test-script-name || 'test' }}
```



## Conclusion

After exploring GitHub Actions in the [first article](https://entando.com/page/en/get_started_with_github_actions?contentId=BLG5560&modelId=64), we learned how to build a successful workflow using the real-world example of the Entando Standard Banking Demo.

Depending on your needs, your workflow can be modified to add more steps such as security, quality scanning and/or event UI testing. These automatic gates keep the focus on your high-level priorities while ensuring your applications continue to support the requirements and needs of your enterprise.

Stay tuned for part 3 of this series. I’ll be sharing my **top 3** advanced features - don’t miss this one!