Skip to content

castromaciel/template-vite-react-ts

Repository files navigation

Template: Vite + Vitest + React + TypeScript

Vite 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

Recommended

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

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.