Building a CI/CD Pipeline for Revolver: Checkout, Build, and Upload an Artifact

Hey there! Today, I'm going to walk you through creating a Continuous Integration/Continuous Deployment (CI/CD) pipeline for the awesome tool Revolver. This pipeline will automate the process of checking out the code, building it, and uploading an artifact. If you're looking to streamline your development workflow, this guide is for you!

Why CI/CD?

Before we dive in, let's quickly recap why CI/CD pipelines are essential:

1. Automation: Automating repetitive tasks saves time and reduces errors.

2. Consistency: Ensures that every build is done the same way, leading to consistent results.

3. Speed: Speeds up the release process by automating steps from code commit to deployment.

4. Feedback: Provides immediate feedback on code changes, helping you catch issues early.

Choosing Your CI/CD Tool

There are several CI/CD tools out there, like Jenkins, GitHub Actions, Harness, and CircleCI. For this guide, we'll use GitHub Actions because it's integrated with GitHub and easy to set up.

Setting Up the Pipeline

Let's get started with setting up a CI/CD pipeline for Revolver.

Step 1: Create a GitHub Repository

If you haven't already, create a GitHub repository for your Revolver project (this is likely to be a fork or copy of the Open Source project at https://github.com/Innablr/revolver). If you have an existing repository, you're good to go.

Step 2: Create a GitHub Actions Workflow

In your repository, create a directory named `.github/workflows`. Inside this directory, create a file named `ci.yml`. This file will define your CI/CD pipeline.

name: CI/CD Pipeline
on:
  workflow_dispatch:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4 # https://github.com/actions/checkout
      - name: Set up Node.js
        uses: actions/setup-node@v4 # https://github.com/actions/setup-node
        with:
          node-version: '20'
      - name: Install dependencies
        run: npm install
      - name: Compile Typescript into Javascript
        run: npm run build
      - name: Run tests
        run: npm test
      - name: Build artifact
        run: npm run bundle
      - name: Upload artifact
        uses: actions/upload-artifact@v4 # https://github.com/actions/upload-artifact
        with:
          name: revolver-${{ github.sha }}.zip
          path: dist
          overwrite: true

Breakdown of the Workflow

1. Trigger Events: The pipeline runs on pushes and pull requests to the `main` branch, or when manually executed. In a more complete example, you might choose to run this when a new GitHub Release is created (and use the release tag in the output filename below).

2. Job Setup:

   1. Checkout Code: Uses the `actions/checkout` action to checkout your repository's code.

   2. Set Up Node.js: Uses the `actions/setup-node` action to set up Node.js 20.

   3. Install Dependencies: Runs `npm install` to install the project's dependencies.

   4. Compile Typescript into Javascript: Because Revolver is written in Typescript https://www.typescriptlang.org/ it needs to be compiled into Javascript before it can be run.

   5. Run Tests: Runs `npm test` to execute your test suite. This ensures that you are not building an artifact from broken code.

   6. Build Artifact: Runs `npm run bundle` to create the production build of your project.

   7. Upload Artifact: Uses the `actions/upload-artifact` action to upload the built artifact for later use. This example names the uploaded file based on the latest commit-hash in the repository, and uploads the artifact to github where it is attached to the workflow. See https://docs.github.com/en/actions/using-workflows/storing-workflow-data-as-artifacts

NOTE: this is probably not an enterprise-ready solution - in that case you would probably want to upload the artifact somewhere more persistent - perhaps Artifactory https://jfrog.com/artifactory/ or an S3 bucket.

NOTE: upload-artifact@v4+ is not currently supported on GHES yet. If you are on GHES, you must use v3.

Step 3: Commit and Push

Commit your changes and push them to your GitHub repository. This will trigger the GitHub Actions workflow you just created.

git add .
git commit -m "Add CI/CD pipeline for Revolver"
git push origin main

Step 4: Check the Results

Navigate to the "Actions" tab in your GitHub repository. You should see your workflow running. If everything is set up correctly, you’ll see each step of the pipeline being executed. Once the pipeline completes, your built artifact will be available for download.

See:

If you click on the “build” with the green check icon, you can see the individual steps:

Need a Helping Hand?

If you run into any issues or need further assistance, Innablr is here to help. They offer professional services to assist with setting up and managing your CI/CD pipelines and other cloud infrastructure needs. Whether you need help with the initial setup or ongoing management, Innablr has got your back.

Conclusion

Setting up a CI/CD pipeline for your Revolver project is a great way to automate and streamline your development workflow. With GitHub Actions, you can easily create a pipeline that checks out your code, builds it, and uploads the artifact for you. This not only saves you time but also ensures a consistent and reliable build process.

Happy coding and automating with Revolver and GitHub Actions!