Tutorial: How to create GitHub Actions workflow ?

Tutorial: How to create GitHub Actions workflow ?

Beginner’s Tutorial for Crafting a GitHub Actions Workflow

·

5 min read

Continuous Integration (CI)

Continuous Integration (CI) is the practice of automating the process of building and testing code changes before they are merged into the main codebase. By catching issues early, CI ensures that new code does not break existing functionality, helping maintain stability in software projects. GitHub Actions makes it easy to define workflows to automate tasks like building and testing code, providing seamless integration with GitHub repositories.

Continuous Delivery (CD)

Continuous Delivery (CD) takes CI a step further by automating the deployment process, ensuring that your code is always ready to be deployed to staging or production. With GitHub Actions, you can automate the entire delivery pipeline, from testing to deployment, ensuring that code is deployed safely and quickly without manual intervention.

Steps to Create a GitHub Actions Workflow

Creating a GitHub Actions workflow allows you to automate repetitive tasks such as building, testing, and deploying your application. Below are the steps to set up a basic workflow:

  1. Write the Application Code: Develop your application code and push it to a GitHub repository.

  2. Create a YAML Workflow File: Inside your repository, create a .github/workflows directory. In this directory, create a .yml or .yaml file to define your workflow.

  3. Configure the Build Job: Set up a job to automatically build your application whenever a code change is pushed to the repository.

  4. Test Your Workflow: Push changes to your repository to ensure that the workflow executes correctly and that all steps run as expected.

  5. Configure Secrets: If your workflow requires sensitive information (e.g., API keys), store these securely using GitHub Secrets.

  6. Upload to S3: You can add steps to upload built artifacts or assets to cloud storage (e.g., S3) or a similar service.

  7. Define the Deployment Job: Set up a deployment job to automatically deploy your application to production or staging environments.

  8. Deploy to EC2 or Other Platforms: Create deployment steps to push your application to cloud platforms such as AWS EC2, AWS Elastic Beanstalk, or other cloud services.

Creating a Simple GitHub Actions Workflow

Let's walk through creating a simple CI/CD workflow to get started with automating your builds and deployments.

1. Create the Workflow File

  1. Navigate to your GitHub repository.

  2. In the root directory, create a .github/workflows folder if it doesn't already exist.

  3. Inside this folder, create a new YAML file, for example, demo-workflow.yml.

2. Write the Workflow Configuration

Paste the following code into your demo-workflow.yml file:

name: CI/CD Workflow

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    name: Build and Test Application
    runs-on: ubuntu-latest

    steps:
      # Step 1: Checkout code from the repository
      - 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: '19'

      # Step 3: Cache npm dependencies to speed up subsequent builds
      - name: Cache npm dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      # Step 4: Install dependencies
      - name: Install Dependencies
        run: npm install

      # Step 5: Run tests to verify the code
      - name: Run Tests
        run: npm test

      # Step 6: Deploy to AWS EC2 (Optional)
      - name: Deploy to AWS EC2
        run: |
          echo "Deploying to EC2..."
          # Add your deployment commands here

Explanation of the Workflow

  • name: CI/CD Workflow: This is the name of the workflow, displayed in the GitHub Actions UI.

  • on:: Specifies the events that trigger the workflow:

    • push:: The workflow runs when a push is made to the main branch.

    • pull_request:: The workflow also runs when a pull request is made to the main branch.

  • jobs:: Defines the jobs in the workflow. In this case, we have one job named build.

    • runs-on: ubuntu-latest: Specifies that the job will run on the latest version of Ubuntu.
  • steps:: The sequence of tasks to execute in this job:

    • Step 1: Checkout Code: This step checks out your repository’s code, allowing the following steps to access it.

    • Step 2: Set up Node.js: This step sets up a specific version of Node.js (version 19 in this example).

    • Step 3: Cache npm dependencies: This step caches the npm dependencies to speed up future workflows. The cache key is based on the package-lock.json file, ensuring that the cache is updated whenever the dependencies change.

    • Step 4: Install Dependencies: This step runs npm install to install the necessary dependencies.

    • Step 5: Run Tests: This step runs the tests using npm test to ensure that everything works as expected.

    • Step 6: Deploy to AWS EC2: This step is optional and demonstrates how to deploy your app to a cloud service. You can replace this step with your own deployment script.

Key Improvements and Best Practices

  • Caching Dependencies: The actions/cache step speeds up the workflow by storing and reusing previously downloaded npm dependencies.

  • Environment Setup: The actions/setup-node action ensures the correct version of Node.js is available in the runner environment.

  • Testing: Running tests after every push or pull request helps catch issues before merging new changes into the main branch.

  • Deployment: The deployment step can be customized to deploy your application to cloud services, like AWS, Azure, or even a custom server.

  • Triggering on Multiple Events: The workflow triggers both on pushes and pull requests to the main branch, ensuring it works for both direct pushes and merged pull requests.

Next Steps

Once you're comfortable with this basic example, you can expand your workflow by:

  • Adding Unit/Integration Tests: Add steps to run additional tests (unit tests, integration tests) after pushing code.

  • Building the Application: Set up jobs to build or package your application for release (e.g., using Webpack, Babel, etc.).

  • Automating Deployment: Deploy your application to cloud services or custom servers directly from the workflow.

  • Docker Integration: Build and push Docker images to registries like Docker Hub or AWS ECR using GitHub Actions.