• ⚡️  Vite 4
• ⚛️  React 18 with TypeScript
• 🧪  Vitest + React Testing Library
• 🚀  GitHub Actions with deployment on GitHub Pages

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

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

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

npx degit pchmn/vite-react-ts-ghactions-template app_name

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).

pnpm i

pnpm dev

# normal build
pnpm build

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

See explanation of 404.html file here

# without coverage
pnpm test

# with coverage
pnpm test:ci

pnpm serve

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

Actual workflow is:

Run on any branch

Build and test react app.

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.

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

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.