Vite, React, Redux and GitHub Actions

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

Demo

Based on pchmn/vite-react-ts-ghactions-template

Features

Designed as a nifty React/Vite starter template with the following furnishings:

• Single page application with hash routing
  • Compatible with hosting via Github Pages
• Compiles TypeScript yet also allows Javascript
  • Allows transitioning existing .js(x) files
• Linting for both TypeScript & Javascript
• Automatic precommit linting and git message validation
• Deployment to Github Pages on commit/PR merge to primary branch
  • Workflow includes Codecov integration for coverage analysis
  • Automatically writes date & time of deployment to HTML
• Demo playground of example apps, with 100% unit-test coverage
  • Simple counter app using React state
  • Advanced counter app using Redux Toolkit
    • Includes Async Thunks to emulate API calls
  • To-do CRUD app using Redux Toolkit

Overview

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

Coding Style

• VSCode settings & extensions recommendations
• EditorConfig
• ESLint configured

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 dcpesses/vite-react-ts-gh app_name

Usage

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

Install

npm i

Dev

npm start

Build

# normal build
npm run build

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

See explanation of 404.html file here

Test

# without coverage
npm run test

# with coverage
npm run test:ci

# watch for changes
npm run test:watch

Serve

npm run serve

Configuration for GitHub Actions

In order to use GitHub Actions in your repo, you'll need to first make a few configuration updates.

The actual workflow can be found under .github/workflows/ci.yml.

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 under Secrets and variables > Actions > Repository secrets.

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 the environment config section of the deploy job in .github/workflows/ci.yml

Don't forget to setup your repo to deploy from your GitHub Pages branch. (Defaults to gh-pages unless publish_branch is specified in the peaceiris/actions-gh-pages config.)

GitHub Pages

There are additional 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.