Vite, React and Github Actions

This a React v18 + TypeScript + Vitest and React Testing Library + Github Actions starter template built with Vite.

Demo

Features

Overview

• ⚡️  Vite
• ⚛️  React v18 with TypeScript
• 🧪  Vitest + React Testing Library
• 🚀  Github Actions with deployment on Github Pages

Coding Style

• VSCode settings & extensions recommendations
• EditorConfig
• ESLint & Prettier configured (with eslint-plugin-prettier)

Git Hooks

• Husky
  • commitlint @ commit-msg
  • lint-staged @ precommit

Github Actions

• Build, Test and Coverage Analysis (with Codecov) at each commit
• Deploy to Github Pages on main branch (see deployment of this repo here)

Getting Started

Copy template

npx degit pchmn/kuzpot app_name

Usage

Project was built using pnpm. If you want to use npm or yarn, just don't forget to update Github Actions workflow (.github/workflows/ci.yml).

Install

pnpm i

Dev

pnpm dev

Build

# normal build
pnpm build

# build with 404.html file added for Github Pages included
pnpm build:ci

See explanation of 404.html file here

Test

# without coverage
pnpm test

# with coverage
pnpm test:ci

Serve

pnpm serve

Configuration for Github Actions

If you want to use Github Actions in your repo, you'll need to make little configuration.

Actual workflow is:

Build & Test job

Build and test application on all commits

Create a Github personal access token (with repo and workflow permissions) and add it as a PERSONAL_ACCESS_TOKEN secret in your repo

Coverage job

Run Codecov analysis on all commits

Create a Codecov token for your repo and add it as a CODECOV_TOKEN secret in your repo

Deploy job

Manual deploy to Github Pages (only main branch)

• Replace base config in vite.config.ts to match your repo name
• Create GIT_AUTHOR_NAME and GIT_AUTHOR_EMAIL secrets in your repo (it will be the author of commits to gh-pages branch)
• If you want to keep manual deployments, you need to create a new environment with manual approve in your repo, and then replace environment config in the deploy job in .github/workflows/ci.yml:
  • environment.name = name of the environment created in your repo
  • environment.url = link to your github pages

Github Pages

There are modifications on index.html, and a new 404.html file in the project to make it work well with Github Pages.

See https://github.com/rafgraph/spa-github-pages for more info.