https://github.com/pchmn/kuzpot
https://github.com/pchmn/kuzpot
Last synced: 13 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/pchmn/kuzpot
- Owner: pchmn
- License: mit
- Created: 2023-01-02T11:01:19.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-05T10:12:49.000Z (almost 3 years ago)
- Last Synced: 2025-10-25T05:49:51.785Z (9 months ago)
- Language: TypeScript
- Size: 2.19 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
[](https://github.com/pchmn/kuzpot/blob/main/license)
[](https://github.com/pchmn/kuzpot/actions)
[](https://codecov.io/gh/pchmn/kuzpot?branch=master)
# Vite, React and Github Actions
This a React v18 + TypeScript + Vitest and React Testing Library + Github Actions starter template built with Vite.
[Demo](https://pchmn.github.io/kuzpot/)
## Features
### Overview
- ⚡️ [Vite](https://vitejs.dev/)
- ⚛️ [React v18](https://beta.reactjs.org/) with [TypeScript](https://www.typescriptlang.org/)
- 🧪 [Vitest](https://vitest.dev/) + [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
- 🚀 [Github Actions](https://docs.github.com/en/actions) with deployment on [Github Pages](https://pages.github.com/)
### Coding Style
- VSCode settings & extensions recommendations
- [EditorConfig](https://editorconfig.org/)
- [ESLint](https://eslint.org/) & [Prettier](https://prettier.io/) configured (with [`eslint-plugin-prettier`](https://github.com/prettier/eslint-plugin-prettier))
### Git Hooks
- [Husky](https://typicode.github.io/husky/#/)
- [`commitlint`](https://commitlint.js.org/) @ `commit-msg`
- [`lint-staged`](https://github.com/okonet/lint-staged) @ `precommit`
### Github Actions
- **Build**, **Test** and **Coverage Analysis** (with [Codecov](https://about.codecov.io/)) at each commit
- **Deploy** to [Github Pages](https://pages.github.com/) on main branch (see deployment of this repo [here](https://pchmn.github.io/kuzpot/))
## Getting Started
### Copy template
```
npx degit pchmn/kuzpot app_name
```
### Usage
> Project was built using [`pnpm`](https://pnpm.io/installation#using-npm). If you want to use `npm` or `yarn`, just don't forget to update Github Actions workflow (`.github/workflows/ci.yml`).
#### Install
```sh
pnpm i
```
#### Dev
```sh
pnpm dev
```
#### Build
```sh
# normal build
pnpm build
# build with 404.html file added for Github Pages included
pnpm build:ci
```
> See explanation of `404.html` file [here](#github-pages)
#### Test
```sh
# without coverage
pnpm test
# with coverage
pnpm test:ci
```
#### Serve
```sh
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](https://github.com/pchmn/kuzpot/blob/main/.github/workflows/ci.yml) is:
### Build & Test job
> Build and test application on all commits
Create a [Github personal access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-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](https://about.codecov.io/) 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](https://devblogs.microsoft.com/devops/i-need-manual-approvers-for-github-actions-and-i-got-them-now/) 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.