pchmn/vite-react-ts-ghactions-template

Vite + React v18 + TypeScript + Github Actions Template

Vite, React and GitHub Actions

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

Demo

Features

Overview

• ⚡️  Vite 4
• ⚛️  React 18 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/vite-react-ts-ghactions-template 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
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

Run on any branch

Build and test react app.

Coverage Analysis

Run on any branch

Run Codecov analysis.

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

Deploy

Run only on main branch (manual approve)

Deploy react app to GitHub Pages.

Configuration:

• Replace base config in vite.config.ts to match your repo name
• Manual approve
  • If you want to keep it, you need to create a new environment with manual approve in your repo, and then replace environment config of deploy job in .github/workflows/ci.yml:
    • environment.name = name of the environment created in your repo
    • environment.url = link to your github pages
  • If your want to remove it, just delete environment config of deploy job in .github/workflows/ci.yml

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.