Template: Vite + Vitest + React + TypeScript

Usage

Use Template button

Click the Use this template button above the file list, then use the Owner drop-down menu, and select the account you want to own the repository. Creating a repository from a template has the following advantages:

A repository created from a template starts with a single commit. Commits to a repository created from a template do appear in your contribution graph. Creating a repository from a template starts a new project quickly.

Development

Prerequisites

• Node js

Recommended

• pnpm
• Node js - v16.x.x

Make it your own

To get a local copy, clone it using:

git clone https://github.com/castromaciel/template-vite-react-ts.git

Or get it downloading

rm -rf .git && git init
git add .
git commit -m "Initial commit"

Install dependencies:

To install dependencies use one of the following commands:

npm install

yarn install

pnpm install

Available Scripts

In this project, you can run the following scripts:

Script	Description
npm run build	Builds the app for production to the dist folder.
npm run coverage	Runs tests with code coverage
npm run dev	Runs the app in the development mode.
npm run preview	Start a local web server that serves the built solution from ./dist for previewing
npm run prepare	Install husky githooks
npm run test	Runs tests with vitest.

Base Dependencies

• axios for networking.
• sass for stylesheets.
• vitest for testing.

Folder Structure

template-vite-react-ts
├── .github
    ├── workflows
├── .husky
    ├── pre-commit
    ├── pre-push
├── node_modules
├── public
│   └── vite.svg
└── src
    ├── __tests__
        ├── App.test.tsx
    ├── assets
        ├── react.svg
    ├── components
    ├── constants
        ├── index.ts
    ├── App.scss
    ├── App.tsx
    ├── index.scss
    ├── main.tsx
    └── vite-env.d.ts
├── .env.development
├── .eslintignore
├── .eslintrc.json
├── .gitattributes
├── .gitignore
├── .lintstagedrc
├── .npmrc
├── index.html
├── LICENSE
├── package.json
├── pnpm-lock.yaml
├── README.md
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.js
├── vitest.config.js

husky config

To create husky githooks, you need to run npm prepare or pnpm prepare, and then configure your githooks with

npx husky add .husky/<pre-hookname> "command you want to configure"

For example, the initial config has been created with:

npx husky add .husky/pre-commit "npx lint-staged"

npx husky add .husky/pre-push "pnpm test"

You are free to modify the configuration.

Styleguide

For coding styling, I decided to use eslint and the eslint-airbnb configuration, with some personal modifications.

Credits

Vite Template React with TypeScript is built and maintained by Castro Maciel

License

This project is licensed under the terms of the MIT license.