Skip to content

3.2 CI CD Pipeline with Github Pages and Github Actions

Jump to bottom
leonardo1710 edited this page Sep 13, 2023 · 5 revisions

Prerequisites

Create a Github Action Workflow

A first step for building the application CI/CD pipeline is to create a GitHub Action. In your repository, select the Actions tab.

Here you can select preconfigured workflows (e.g. Deploy Node.js to Azure Web App, Deploy to Amazon ECS) or create your own workflow. Please select set up a workflow yourself here:

githubactions_first_page

GitHub Actions now suggests a main.yml file. Take a close look at the file. As you can see, a workflow in GitHub Actions consists of:

  • Workflows are defined in a YAML file located in the .github/workflows directory of your repo
  • One or more events can trigger the workflow (e.g. on: push or on: pull_request)
  • Each workflow has a number of jobs
  • Each job starts on a new instance (e.g. Ubuntu-latest)
  • Each job consists of several steps, in which single actions or bash commands are executed

Since in a first step we want to setup a development workflow, let's rename the main.yml to development.yml. Afterwards, delete all contents of the file and insert the following configuration.

name: Development Workflow

on:
  push: 
    branches: [ development ] # is triggered if push event in release branch occurs

jobs:
  test:
    runs-on: ubuntu-latest # run ubuntu

    steps:
    - name: Checkout Repository
      uses: actions/checkout@v3 # checkout your repo - this is an official action provided by GitHub
    - name: Run a multi-line script
      run: |
        echo test the checkout action,
        ls -a

What this yaml file does is the following: in the event of push on a branch called development do run a job called test that:

  • spawns an ubuntu machine with latest version
  • checkout the repo
  • echos "test the checkout action" on the machine
  • lists all existing files and directories of the machine (it should print the previously fetched repo resources)

To test your workflow, you first need to commit the development.yml file. This can be done via the Github GUI by clicking Commit changes....

start_commit_github_actions

In order to have the new yml file locally in the .github/workflows/ folder, you have to pull the change from the remote:

git pull

Create a Development Branch

Afterwards, since the workflow is triggered on push in a branch called development, you need to create a branch development and publish it on Github.

git branch development
git checkout development
git add .
git commit -m "test the workflow"
git push --set-upstream origin development

Now the workflow will run on each push inside development. You can find your workflow inside your GitHub repository under Actions. If the workflow is currently executing, the status is indexed in yellow, if the workflow has finished executing, the status is green. If there were errors while executing the workflow, the status will be colored red:

If you select the workflow and click on build, you can see the detailed build process. In our case you should find the name of our step called "Run a multi-line script" which prints the echo message and a list of our repository files.

image

Adapt the Workflow to run unit tests

In the next step, we will update the workflow to run our tests in an automate manner on the ubuntu machine. In the case of our application, the first step is to run the npm run test command. In order to run npm commands, Node.js must be installed on the instance. To do this, we use another official GitHub action, setup-node-action. For that delete the echo and ls commands and add the following:

name: Development Workflow

on:
   push:
      branches: [development] # is triggered if push event in development branch occurs

jobs:
   test:
      name: Test Application
      runs-on: ubuntu-latest
      steps:
         - name: Checkout repository
           uses: actions/checkout@v3

         - name: Setup node
           uses: actions/setup-node@v3
           with:
              node-version: '18.x'

         - name: Install dependencies
           run: npm ci

         - name: Run tests
           run: npm run test --if-present

Afterwards commit your changes again and push to the development branch to check if everything is working. This step will take a little bit longer than the previous workflow, since we are installing all dependencies and building the whole application.

Exercise (Frontend Application)

Add another job to your workflow which runs ESLint. Use the same steps from before.

Create a Deployment Workflow

Next, we want to add another workflow that is used for deployment on Github Pages. In your Github Actions add another workflow which is called deployment. The deployment workflow should again test and lint your source code. Furthermore, it should bundle/build your application and deploy the release artifacts to Github Pages. Configure your workflow to be triggered if a push inside main branch occurs and add the needed jobs to it. Github Actions allows you to reuse existing workflows -> it is possible to reuse the development workflow from before. Take a look at Reusing workflows documentation.

The deployment workflow should look like the following (in pseudo yaml):

on: 
   #push into main

jobs:
   test:
     #reuse development workflow
   
   build:
     steps:
       # checkout the repo
       # setup node
       # install dependencies
       # build the project
       # upload build artifact -> use actions/upload-pages-artifact@v2
 
   deployment:
     # should run AFTER test and build (see `needs`) 
     steps:
       # checkout the repo
       # setup github pages -> use actions/configure-pages@v3
       # download the build artifacts -> use actions/download-artifact@v3
       # deploy to github pages -> use actions/deploy-pages@v2

You can find a detailed description for deploying to Github Pages from Github Actions here.

A finished deployment workflow could look like the following: deployment workflow

Activate Github Pages

Now that you configured the workflow successfully you must activate Github Pages. Therefore, navigate under Settings -> Pages and select the Github Actions as a source.

activate_ghpages

The deployment of the page might take a few minutes. When GitHub Pages is done deploying, it should say "Your site is published at https://username.github.io/app-name/". Click on the link to see the result:

image

Nice, the CI/CD pipeline is ready. From now on, the page will be tested, linted and redeployed automatically whenever it is pushed to the main branch.

Clone this wiki locally