DEV Community

Pranav Bakare
Pranav Bakare

Posted on • Edited on

Build your first CI/CD pipeline

Image description

Building a simple CI/CD pipeline is a fundamental DevOps task that automates the process of integrating code changes, running tests, and deploying applications. Below is a guide to building your first CI/CD pipeline using GitHub Actions, which is simple and integrated with GitHub repositories.

Prerequisites:

  • A GitHub account.
  • A simple project with some code (e.g., a Node.js app).
  • Basic understanding of Git.

Step 1: Create or Clone a Repository

  1. Go to GitHub and create a new repository.
  2. Clone the repository locally if needed:
   git clone https://github.com/yourusername/your-repo.git

Enter fullscreen mode Exit fullscreen mode

Step 2: Add a Sample Application

Let’s assume you are using a Node.js project. Create a simple index.js file in your project directory:

// index.js
console.log('Hello, CI/CD pipeline!');
Enter fullscreen mode Exit fullscreen mode

Create a package.json file for your Node.js project:

{
  "name": "simple-cicd-pipeline",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo 'Running tests' && exit 0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Set Up GitHub Actions for CI/CD

  1. In your GitHub repository, navigate to the Actions tab.
  2. Select the option Set up a workflow yourself or click New Workflow.
  3. GitHub will create a .github/workflows/ directory in your repository.

Create a YAML file inside this directory for your CI/CD pipeline. Let’s call it ci-cd-pipeline.yml.

Step 4: Write a Simple GitHub Actions Workflow

Here’s an example of a simple CI/CD pipeline configuration file (.github/workflows/ci-cd-pipeline.yml):

name: CI/CD Pipeline

# Run this workflow on every push or pull request to the main branch
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build-and-test:
    runs-on: ubuntu-latest

    steps:
      # Step 1: Checkout the latest 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: '14'

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

      # Step 4: Run tests (basic example)
      - name: Run tests
        run: npm test

  deploy:
    runs-on: ubuntu-latest
    needs: build-and-test
    steps:
      # Step 5: Deploy (example of deploying to a server or hosting service)
      - name: Dummy Deploy Step
        run: echo "Deploying to the server..."
Enter fullscreen mode Exit fullscreen mode

Explanation of Workflow:

  • on: Defines triggers for the pipeline. In this case, the pipeline will run on every push or pull request to the main branch.

  • jobs:

    • build-and-test: This job checks out the code, sets up a Node.js environment, installs dependencies, and runs the tests.
    • deploy: This is an example deployment step. In a real-world scenario, you would add logic to deploy your app to a server or a cloud platform (e.g., Heroku, AWS, etc.).

Step 5: Push the Changes to GitHub

Add the workflow file and push it to GitHub:

git add .
git commit -m "Add CI/CD pipeline"
git push origin main
Enter fullscreen mode Exit fullscreen mode

Step 6: View the Pipeline in Action

  1. Go to your repository on GitHub.
  2. Click the Actions tab, where you can view the status of your pipeline.
  3. If everything is set up correctly, you should see the pipeline running on your push or pull request.

Step 7: (Optional) Automate Deployment

If you want to automate deployment, you can add a real deploy step instead of the dummy one. For example, you could deploy the app to Heroku, AWS, or Netlify.

For Heroku Deployment:

  1. Add the Heroku CLI to the workflow:
   - name: Deploy to Heroku
     run: |
       echo "Deploying to Heroku..."
       heroku login
       git push heroku main
Enter fullscreen mode Exit fullscreen mode

For Netlify Deployment:

  1. Use the Netlify CLI to deploy static sites or web apps:
   - name: Deploy to Netlify
     run: netlify deploy --prod --dir=build/
Enter fullscreen mode Exit fullscreen mode

Conclusion:

You’ve just built a simple CI/CD pipeline using GitHub Actions. The pipeline automatically checks out your code, installs dependencies, runs tests, and (optionally) deploys the app when code is pushed to the main branch.

This simple pipeline can be extended with more complex workflows, such as running linting, building Docker containers, or deploying to multiple environments (e.g., staging and production).

Top comments (4)

Collapse
 
mr-emerald-wolf profile image
Shivam Sharma

I started using Github Actions for my club projects as well. They work really well for creating a CI/CD pipeline for small scale projects.

Collapse
 
paras594 profile image
Paras πŸ§™β€β™‚οΈ

Good one and concise as well :)

Collapse
 
oleh_nazarovych profile image
Oleh Nazarovych

Do you use gitlab runner like in gitlab ci/cd approach to run jobs on a server? Or what's approach if github actions?

Collapse
 
mrcaption49 profile image
Pranav Bakare

Yes, GitLab CI/CD uses GitLab Runner to execute jobs defined in a .gitlab-ci.yml file. The runner can run on various environments, including your local machine or cloud servers, and can be configured to handle specific workloads, such as running builds, tests, or deployments.