Implement CI/CD Features with GitHub Actions

[rhughes42]

Description:

We need to set up Continuous Integration (CI) and Continuous Deployment (CD) for our project to automate the build, test, and deployment processes. This will ensure our codebase remains stable and that new changes are deployed seamlessly. The CI/CD pipeline should be implemented using GitHub Actions.

Objectives:

1. Set up Continuous Integration (CI) Pipeline

   • Configure GitHub Actions to run on every push and pull request to the main branch.
   • Define steps to:
     • Install dependencies.
     • Run linting checks.
     • Execute unit tests.
     • Build the application.

2. Set up Continuous Deployment (CD) Pipeline

   • Configure GitHub Actions to deploy the application when changes are merged into the main branch.
   • Define deployment steps for staging and production environments.
   • Ensure deployment only occurs if CI checks pass.

3. Add Notifications

   • Configure notifications for CI/CD status (success/failure) to be sent to a Slack channel or via email.

Acceptance Criteria:

• CI pipeline runs automatically on every push and pull request to the main branch.
• CI pipeline includes steps for dependency installation, linting, testing, and building.
• CD pipeline deploys changes to the staging environment upon successful merge to the main branch.
• Deployment to production occurs only after manual approval.
• Notifications are sent for CI/CD status updates.

Tasks:

1. CI Pipeline Configuration

   • Create a GitHub Actions workflow file for CI.
   • Add steps for dependency installation (e.g., npm install).
   • Add steps for linting (e.g., npm run lint).
   • Add steps for running unit tests (e.g., npm test).
   • Add steps for building the application (e.g., npm run build).

2. CD Pipeline Configuration

   • Create a GitHub Actions workflow file for CD.
   • Add steps for deploying to the staging environment.
   • Add manual approval step for deploying to production.
   • Add steps for deploying to the production environment.

3. Notifications Configuration

   • Set up GitHub Actions to send CI/CD status notifications to a specified Slack channel or email.

Additional Context:

• Refer to the GitHub Actions documentation for detailed setup instructions.
• Ensure environment variables and secrets required for deployment are securely stored in GitHub Secrets.

[n0rdlicht]

@rhughes42 many thanks for the well structured outline. I very much agree with the objectives and goals. To refine the initial tasks I'll add a bit of color to the current setup and context so we can focus on the gaps:

• adding a GitHub action for running lint on every push as well as ensuring the results are visible on PRs for reviewers
• adding a GitHub action for running unittests on every push as well as ensuring the results are visible on PRs for reviewers

Potential areas to investigate

• creating/adapting a custom discord chat bot to notify and receive/execute simple commands
• expanding and showing unit test coverage of component library

Let me know what you think and if the below is useful or needs clarification/follow-up. That being said, the GitHub repo itself currently is very basic in setup and we should certainly leverage more of the platform features (e.g. codeowners etc.) to make assigning reviewers etc. easier.

Current setup

CI

next app

• npm run lint: currently runs eslint, no github action and/or pre-push hook setup
• unit testing - npm run test: currently runs vitest --run, no github action and/or pre-push hook setup, test are located in /components/__tests__
• npm run build: partially covered and automatically reported by Vercel build process running on every commit (see below)

components storybook

• visual testing -.github/workflows/chromatic.yaml: builds and uploads storybook to chromatic

Current list of checks

CD

summary: Vercel integration/hosting + basic main branch protection on GitHub

next app

• "deploy to staging": Vercel public preview deployment per branch/PR
  
• approval: gh repo settings require web team review/approval before merging a PR
  
• "deploy to prod": Automatic Vercel deployment from main

components storybook

• deployment - .github/workflows/deploy-storybook-gh-pages.yaml: deploy storybook on any push to main via GitHub pages to https://design.opensource.construction -> creates a check shown in PR and allows workflow to review and approve changes

Notifications

Good point. I started looking into Discord bots, mainly for form submissions etc. Would be cool to have a custom os.c bot delivering notifications over there but also having a couple of commands for ChatOps. Regarding deployments I think the combination of review requirements, CI results and Vercel comments on PRs are good enough for now.

[rhughes42]

@n0rdlicht thanks for all the feedback. Do you mind adding me to the Vercel team? I just requested it this morning.