Vite, React and Github Actions
This a React v18 + TypeScript + Vitest and React Testing Library + Github Actions starter template built with Vite.
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/prevezic app_name
Usage
Project was built using
pnpm
. If you want to usenpm
oryarn
, 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 invite.config.ts
to match your repo name - Create
GIT_AUTHOR_NAME
andGIT_AUTHOR_EMAIL
secrets in your repo (it will be the author of commits togh-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 thedeploy
job in.github/workflows/ci.yml
:environment.name
= name of the environment created in your repoenvironment.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.