nzambello / vite-react-template

Template for a React project with Vite, TS, Vitest, Playwright, Storybook, ESLint, StyleLint and Husky

vite-react-template

This is a React + TypeScript boilerplate built with Vite.

What's inside?

• ReactJS
• Vite
• TypeScript

Linting and formatting

• Prettier
• ESLint
• StyleLint
• Husky
• Commitlint

Testing

• Vitest
• Testing Library
• Playwright

Misc

• Storybook
• Release-it
• GitHub Actions

Make it yours

In the package.json file, check release-it, eslint, stylelint and prettier configurations and change the values to match your project and your preferences.

Getting started

1. Create the project.

   npx degit nzambello/vite-react-template my-app

2. Access the project directory.

   cd my-app

3. Initialize a git repository.

   git init

4. Install dependencies.

   yarn

5. Start dev server with hot reload at http://localhost:3000.

   yarn dev

Other commands

Lint commands

yarn lint
# or separately
yarn lint:js
yarn lint:css

Type check

yarn typecheck

Format with prettier

yarn format

Build commands

yarn build

Run the app in production mode at http://localhost:3000.

yarn preview

Component stories

yarn storybook

Test commands

• Run unit tests and watch

  yarn test

• Run unit tests with coverage

  yarn coverage

• Run e2e tests

  yarn test:e2e

• Run e2e tests in debug mode

  yarn test:e2e:debug

• Show e2e tests results

  yarn playwright show-report

License

This project is licensed under the MIT License.

Credits

This project was heavily inspired by react-ts-vite-template.