CI/CD with Vite, Vitest GitHub Actions and GitHub Pages

This is an example of a CI/CD pipeline using Vite, Vitest, GitHub Actions and GitHub Pages. The example is a simple React application that uses Vite as a build tool and Vitest as a testing framework. The application is deployed to GitHub Pages using GitHub Actions.

Prerequisites

• Node.js
• npm
• GitHub account

Getting Started

1. Fork the repository
2. Clone the repository
3. Checkout the main branch
4. Install the dependencies

npm install

If at any point you get stuck, you can check out the solution branch for each lesson. Checkout the different branches to see the solution for each lesson. List all branches with:

git branch -a

Lesson 0: Protect the main branch (00-start branch)

1. Go to the repository Settings tab.
2. Under General, scroll down to Change repository visibility, and make sure the repository is public.
3. Go to the Rules -> Rulesets tab.
4. Select New branch ruleset.
5. Enter the following:
   • Ruleset name: main
   • Enforcement status: Active
   • Add target -> Include by pattern: main
   • Check Require a pull request before merging

Lesson 1: Add Hello World GitHub Action (Solution 01-hello-world branch)

1. Create directory .github/workflows.
2. Create file .github/workflows/build.yml.
3. Create a workflow that echoes Hello World when a pull request receives a push event.

Lesson 2: Check out the repository, set up Node.js and install dependencies (Solution 02-setup branch)

1. Add the following steps to the workflow:
   • Check out the repository using actions/checkout@v4.
   • Set up Node.js using actions/setup-node@v4.
   • Install dependencies using npm ci.

Lesson 3: Lint, build and test the application (Solution 03-lint-build-test branch)

1. Add the following steps to the workflow:
   • Lint the application using npm run lint.
   • Build the application using npm run build.
   • Run tests using npm run test.

Lesson 4: Deploy to GitHub Pages (Solution 04-deploy branch)

1. Follow the instructions on the Vite documentation to deploy to GitHub Pages.

• Set base in vite.config.js to '/<REPO>/'.

Congratulations!

You have successfully set up a CI/CD pipeline using Vite, Vitest, GitHub Actions and GitHub Pages!

Keep in mind that these are exercises are meant as a starting point. Feel free to build on this example or explore other tools.

Tools	Alternatives
npm	pnpm, yarn
Vite	NextJS
Vitest	Jest
GitHub Actions	Jenkins, GitLab CI/CD, Circle CI
GitHub Pages	Netlify, Vercel

Further Exercises

• Add a step to the workflow to run npm run test:coverage and upload the coverage report to the workflow artifacts.
• Add a step to the workflow to integrate with a security scanner or dependency manager like Snyk or Dependabot.
• Add a new workflow to monitor the deployment status of the application and notify via email if the deployment is down.

References

• Vite Documentation
• Vitest Documentation
• GitHub Actions Documentation
• GitHub Pages Documentation