A Beginner’s Guide to GitHub Actions | by Obafemi | Oct, 2024

GitHub Actions is an automation tool integrated with GitHub that allows you to automate tasks like building, testing, and deploying your code. Whether you’re automating simple tasks or complex workflows, GitHub Actions provides a flexible and scalable platform to help developers optimize their development processes.

We’ll cover:
– Key concepts (Workflows, Jobs, Steps, Events, Runners)
– Writing your first GitHub Action workflow with a sample project
– Running tests with GitHub Actions
– Deploying applications using GitHub Actions

Before we dive into using GitHub Actions, ensure you have the following:

– A GitHub account.
– Basic understanding of Git, repositories, and how to push code to a repository.
– (Optional) A sample project or any simple repository to follow along. For this guide, we’ll use a simple Node.js application to demonstrate the concepts.

Key Concepts of GitHub Actions

To effectively use GitHub Actions, you need to understand its key building blocks:

Workflows
A workflow is an automated process made up of multiple jobs, defined in a YAML file. It can run one or more jobs in sequence or parallel. These workflows are stored in the `.github/workflows` directory of your repository.

Jobs
Jobs are sets of steps executed on the same runner. Each job can perform tasks like running tests, building code, or deploying applications.

Steps
Steps are individual commands or actions within a job. These can be scripts (like `npm install`) or reusable actions defined by the GitHub community.

Events
An event is what triggers the workflow, such as pushing code, creating a pull request, or scheduling an automated job.

Runners
A runner is a server that runs the jobs in your workflow. GitHub provides hosted runners, but you can also configure self-hosted runners for more control.

Writing Your First GitHub Action Workflow

Let’s create a basic workflow to understand how GitHub Actions work. We’ll automate a simple task where every time code is pushed to the repository, our workflow will check out the code and run npm install.

1. Go to GitHub and create a new repository. Let’s name it ‘github-actions-sample’.
2. Clone the repository locally:

git clone https://github.com//github-actions-sample.git
cd github-actions-sample

Set up a Sample Node.js Project
Initialize a basic Node.js project inside your repository:

npm init -y

You should now have a package.json file.

Inside your repository, create a directory called ‘.github/workflows’. Inside that directory, create a YAML file called ‘ci.yml’.

mkdir -p .github/workflows
touch .github/workflows/ci.yml

This YAML file will define our GitHub Actions workflow. Let’s fill in the ‘ci.yml’ file with the following content:

name: CI Pipeline

# Trigger the workflow on every push or pull request
on:
push:
branches:
- main
pull_request:
branches:
- main

# Define the jobs that will run
jobs:
build:
runs-on: ubuntu-latest

steps:
# Step 1: Check out the repository's code
- name: Checkout code
uses: actions/checkout@v2

# Step 2: Set up Node.js environment
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '16'

# Step 3: Install dependencies
- name: Install dependencies
run: npm install

# Step 4: Run tests
- name: Run tests
run: npm test

Let’s break it down:

1. name: The name of the workflow, which will appear in the GitHub Actions tab.
2. on: Specifies the event that triggers the workflow. In this case, the workflow runs when code is pushed or a pull request is created on the main branch.
3. jobs: This defines the tasks that will run. In this example, we have one job called build, which runs on an Ubuntu machine (ubuntu-latest).
4. steps: These are the individual commands or GitHub Actions that will run as part of the job.

– actions/checkout@v2 checks out your code.
– actions/setup-node@v2 sets up a Node.js environment.
– We then run npm install to install dependencies.
– Lastly, we run npm test to run tests (we’ll define the tests later).

Once the YAML file is created, commit and push the changes to the repository:

git add .
git commit -m "Add GitHub Actions workflow"
git push origin main

Once you push the code, GitHub Actions will automatically run the workflow.

Go to your repository on GitHub, click on the “Actions” tab, and you should see your workflow running. If there are any errors in the workflow (like missing tests), you can see the logs to troubleshoot.

Running Tests with GitHub Actions

Now, let’s add some simple tests to our Node.js project. We’ll use Jest as our testing framework.

Install Jest
Install Jest as a development dependency:

npm install --save-dev jest

Add a Sample Test
Create a file called sum.js with the following code:

function sum(a, b) {
return a + b;
}
module.exports = sum;

Next, create a test file called sum.test.js:

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});

Update the package.json file to include a test script:

"scripts": {
"test": "jest"
}

Now, commit and push these changes:

git add .
git commit -m "Add sample test"
git push origin main

Once the code is pushed, GitHub Actions will automatically run the workflow, including your tests. You can view the results in the “Actions” tab.

No monthly fees, lifetime deal for one of the best VPNs.

Deploying to Render with GitHub Actions

Now that we’ve added automated testing, let’s move on to deployment. GitHub Actions can easily deploy applications to platforms like Heroku, AWS, Render or any server.

We’ll demonstrate using GitHub Actions to automatically deploy our app to Render:

1. Create or sign in to your Render account at render.com.

2. Create a new web service by connecting your GitHub repository to Render. Choose the repository you created for this project.

3. Set the build command to npm install and the start command to npm start.

4. Once configured, Render will give you a unique service name and API key.

To deploy your application securely, you’ll store your Render API key as a GitHub secret:
1. Go to your GitHub repository.
2. Click on “Settings” > “Secrets and variables” > “Actions”.
3. Add a new secret called RENDER_API_KEY and paste your Render API key.

Update the ci.yml file to include a step for deploying to Render after the tests pass:

      # Step 5: Deploy to Render
- name: Deploy to Render
env:
RENDER_API_KEY: ${{ secrets.RENDER_API_KEY }}
run: |
curl -X POST
-H "Authorization: Bearer $RENDER_API_KEY"
https://api.render.com/v1/services//deploys

Replace with your Render service’s unique ID, which can be found in the Render dashboard.

Now, commit and push these changes:

git add .
git commit -m "Add Render deployment step"
git push origin main

GitHub Actions will now automatically deploy your app to Render after running the tests successfully.

No monthly fees, lifetime supply for one of the best VPNs.

And that’s it! We’ve walked through the basics of GitHub Actions, learned how to set up a CI pipeline or workflow, ran automated tests, and finally deployed a Node.js application to Render.

GitHub Actions is a powerful tool that can automate many parts of your development workflow, making it easier to manage and scale projects.

You can explore more advanced workflows and integrations, such as building Docker images, deploying to Kubernetes, or setting up continuous delivery pipelines.

Note: There are affiliate links in the article and if you buy something, I’ll get a commission at no extra cost to you.

This content is free, and by using these links, You’ll be supporting my work & that means a whole lot to me.