CI/CD Concepts

Practical Activity: Setting Up a Basic CI/CD Pipeline

Let's apply what we've learned by setting up a basic CI/CD pipeline for a simple web application using GitHub Actions.

Prerequisites

• A GitHub account
• A simple web application repository (we'll use a React app for this example)

Step 1: Create a Simple React Application

1. Create a new React application using Create React App:

   npx create-react-app my-cicd-demo
   cd my-cicd-demo

2. Initialize a Git repository and push to GitHub:

   git init
   git add .
   git commit -m "Initial commit"
   # Create a repository on GitHub and push to it
   git remote add origin https://github.com/yourusername/my-cicd-demo.git
   git push -u origin main

Step 2: Create a GitHub Actions Workflow

1. Create a directory for GitHub Actions workflows:

   mkdir -p .github/workflows

2. Create a workflow file for CI:

   touch .github/workflows/ci.yml

3. Add the following content to the workflow file:

   
   name: CI
   
   on:
     push:
       branches: [ main ]
     pull_request:
       branches: [ main ]
   
   jobs:
     build-and-test:
       runs-on: ubuntu-latest
       
       steps:
       - uses: actions/checkout@v3
       
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: '18'
           cache: 'npm'
       
       - name: Install dependencies
         run: npm ci
       
       - name: Run tests
         run: npm test -- --watchAll=false
       
       - name: Build
         run: npm run build
       
       - name: Upload build artifacts
         uses: actions/upload-artifact@v3
         with:
           name: build-artifacts
           path: build/
                       

4. Commit and push the workflow file:

   git add .github/workflows/ci.yml
   git commit -m "Add CI workflow"
   git push

Step 3: Add Deployment to GitHub Pages

1. Create a CD workflow file:

   touch .github/workflows/deploy.yml

2. Add the following content to deploy to GitHub Pages:

   
   name: Deploy to GitHub Pages
   
   on:
     push:
       branches: [ main ]
   
   jobs:
     build-and-deploy:
       runs-on: ubuntu-latest
       
       steps:
       - uses: actions/checkout@v3
       
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: '18'
           cache: 'npm'
       
       - name: Install dependencies
         run: npm ci
       
       - name: Build
         run: npm run build
       
       - name: Deploy to GitHub Pages
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           folder: build
                       

3. Commit and push the workflow file:

   git add .github/workflows/deploy.yml
   git commit -m "Add deployment workflow"
   git push

Step 4: Monitor Workflow Execution

1. Go to your GitHub repository
2. Click on the "Actions" tab to view your workflow runs
3. Observe the execution of your CI/CD pipelines

Step 5: Make Changes and See CI/CD in Action

1. Make a change to your application code
2. Commit and push the changes
3. Observe how the CI/CD pipeline automatically builds, tests, and deploys your changes