Set Up GitHub Actions

Get started with GitHub Actions with a web interface.

Requirements

Before you set up GitHub Actions or write the workflow configuration, it’s a good idea to define the requirements of what we want to achieve in this lesson:

  1. Deploy only when a pull request is merged into the master branch.
  2. Use the deploy script in services/web/package.json.

Setting up GitHub Actions

There are two ways to get started with GitHub Actions with a web interface:

  1. Click the “Actions” tab on your repository page. It allows you to visually select existing workflows. This is an easy way to get started if you want to experiment.

  2. Define the workflow in the source code at .github/workflows/. In our case, we will follow this.

Now, connect to the terminal given below and follow these steps:

  1. Let’s start with creating a new branch:
git switch -c add-deployment-github-action
  1. The demo.yml workflow file is a placeholder we inherited from the monorepo-template we started with. The workflow itself doesn’t do anything other than printing a few sentences to the console. It is meant as a starting point and high-level reference. This demo.yml file can be deleted, using the following command, as it otherwise uses the unnecessary time to execute that workflow.
rm -f .github/workflows/demo.yml

-f flag in rm command takes a filename as an argument to delete it.

  1. With the requirements in mind, it’s time to write the GitHub Actions workflow. Execute the following commands to create and open a new workflow file at .github/workflows/services-web-deploy.yml. We may add additional workflows later. It’s good practice to use a meaningful naming convention for the workflow file name. We will use the folder hierarchy (services-web), plus the NPM script name (deploy). With that, looking at the filename makes it instantly clear what the workflow is about.
touch .github/workflows/services-web-deploy.yml

nano $_

Nano editor instructions:

  • Ctrl+o and then press Enter to save.
  • Ctrl+x to exit.

touch: This is a standard command used to create, change and modify timestamps of a given file in any UNIX/Linux OS.

  1. Add “name: Deploy the web service”. This defines the display name of the workflow and is visible in the Actions tab on GitHub.

  2. Add the following “on” configuration, which instructs GitHub to run this workflow for commits to the master branch, such as when a pull request is merged into the master branch.

on: # start of an 'on' event configuration
  push: # start of 'push' event configuration
    branches: # definition of the branches that must be monitored for 'push' event
      - master
  1. Add the “jobs” configuration, which starts with a predefined action to check out the source code, installs all dependencies, bootstraps the services in ./services/*, and lastly, runs the web service’s deploy script using GitHub’s secretsGitHubSecret for Firebase.
jobs: # start of 'jobs' configuration
  deploy: # start of 'deploy' job configuration
    runs-on: ubuntu-latest # definition of the OS on which these commands will execute.
    steps: # definition of steps to follow in this job
      - uses: actions/checkout@v2 # it checks-out your repository so that this workflow could access it
      - name: Install dependencies
        run: npm install
      - name: Bootstrap all services
        run: npm run bootstrap
      - name: Deploy the web service
        run: npm run deploy --prefix services/web
        env: # definition of environment variables that this workflow needs to run
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }} 
## GitHub's secret token for Firebase to authenticate to Firebase for continuous deployment.

This is all there is to the workflow configuration.

Get hands-on with 1400+ tech skills courses.