Add a GitHub Actions CI Workflow

Overview

This tutorial shows how to use the JHipster ci-cd sub-generator to quickly create a basic GitHub Actions Workflow for the microservices and micro frontends (MFEs) generated by the Entando Component Generator.

Prerequisites

• An existing project with a GitHub repository. See the Entando Component Generator to create a new one.
• GitHub Actions (opens new window). These are enabled by default without additional configuration. Please note public repositories currently qualify for unlimited usage but private repositories can encounter usage restrictions.
• Use the Entando CLI to verify you have the command line prerequisites in place for this tutorial (e.g. npm, git, JHipster).

Create a Backend Workflow

1. Go to your main project folder in the shell
2. Run the JHipster ci-cd subgenerator

ent jhipster ci-cd

2. Select GitHub Actions
3. Click ENTER to choose no tasks/integrations and generate the default workflow
4. The initial workflow file is available at .github/workflows/github-ci.yml
5. Commit the workflow file and push it to GitHub.

git add .github
git commit -m "Add the backend CI job"
git push

6. Since the workflow runs on push or pull-request, you can immediately check the GitHub Repository → Actions tab to see the status of the corresponding jobs. The standard tests in a Blueprint-generated project can take a few minutes to run.

• You can review the logs for each step to diagnose CI failures.
• If the workflow fails or times out, you should receive an email notification.
• You can choose to skip the CI workflow by including skip ci or ci skip in your commit message. This can be customized in the job definition.
• See the GitHub Actions (opens new window) documentation for more information on alternative trigger options.

Next, let's expand the workflow to also include the micro frontends.

Add a Frontend Job

We'll now add a second job to the workflow definition, specifically for the micro frontends. Optionally, you could also create a completely separate workflow file if you'd prefer.

1. Add a new entry under jobs:, paying attention to the YAML indentation.

    micro-frontends:
     name: micro frontend job
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, '[ci skip]') && !contains(github.event.head_commit.message, '[skip ci]') && !contains(github.event.pull_request.title, '[skip ci]') && !contains(github.event.pull_request.title, '[ci skip]')"
     steps:
       - uses: actions/checkout@v2 
       - uses: actions/setup-node@v2.1.4 
         with:
           node-version: '14.20.0'
       - name: Run tests
         run: |
           cd ui/widgets/conference/detailsWidget
           npm install
           npm test

2. (Optional) If your widget path differs from the standard Blueprint example, you should change the first command in Run tests to match your path.
3. Commit and push the changes to GitHub.

   git add .github
   git commit -m "Add the microfrontend CI job"
   git push

4. Now check the GitHub Repository → Actions tab to see the status of the jobs. When the micro-frontends job is complete, you should see something like this:

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        2.911s
Ran all test suites.

Extend the Frontend Job for Multiple MFEs

You may have multiple micro frontends or widgets in your project. One option is to duplicate the job for each MFE, but you can also use the GitHub Actions matrix feature to avoid duplicating those definitions.

1. Change your job definition to the following. Note the changes:

• The job.name is dynamically set using the MFE matrix name
• The job.strategy has been set to fail-fast:false so all MFEs will be tested, rather than stopping the job on the first failure
• The job.strategy.matrix.mfe provides the list of MFEs in this project. You should update this list to match your project.
• The first command in Run tests is parametrized to use the MFE matrix name

    micro-frontends:
     name: ${{ matrix.mfe }} micro frontend
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, '[ci skip]') && !contains(github.event.head_commit.message, '[skip ci]') && !contains(github.event.pull_request.title, '[skip ci]') && !contains(github.event.pull_request.title, '[ci skip]')"
     strategy:
       fail-fast: false
       matrix:
         mfe:
           - ui/widgets/conference/detailsWidget
           - ui/widgets/conference/formWidget
           - ui/widgets/conference/tableWidget
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2.1.4
         with:
           node-version: '14.15.0'
       - name: Run tests
         run: |
           cd ${{ matrix.mfe }}
           npm install
           npm run test

2. Now check the GitHub Repository → Actions tab to see the status of the jobs. You should see that the tests were run for all configured MFEs with a summary message like this: 3 jobs completed.