React with Vite On Steroids

A powerful and efficient starter template for building React applications with Vite, TypeScript, and a suite of modern tools.

Features

• Vite: Fast and optimized build tool.
• React: A JavaScript library for building user interfaces.
• TypeScript: Typed JavaScript at any scale.
• Tailwind CSS: Utility-first CSS framework.
• ESLint: Pluggable JavaScript linter.
• Prettier: Opinionated code formatter.
• Vitest: A blazing fast unit test framework.
• Testing Library: Simple and complete testing utilities.
• Playwright: End-to-end testing framework.
• Husky: Git hooks, pre-commit hooks, and more.

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (>= 20.x)
• Yarn (or npm or pnpm)

Installation

1. Clone the repository:

   git clone https://github.com/RicardoGEsteves/react-with-vite-on-steroids.git
   cd react-with-vite-on-steroids

2. Install dependencies:

   yarn

Running the Development Server

To start the development server, run:

yarn dev

Building for Production

To build the application for production, run:

yarn build

Running Tests

• To run unit tests with Vitest, use:

yarn test

• To check coverage:

yarn coverage

• To run end-to-end tests with Playwright, use:

Runs the end-to-end tests.

yarn playwright test

Starts the interactive UI mode.

yarn playwright test --ui

Runs the tests only on Desktop Chrome.

yarn playwright test --project=chromium

Runs the tests in a specific file.

yarn playwright test example

Runs the tests in debug mode.

yarn playwright test --debug

Auto generate tests with Codegen.

yarn playwright codegen

Linting and Formatting

• To lint the code with ESLint, run:

yarn lint

• To fix linting errors, run:

yarn lint:fix

• To format the code with Prettier, run:

yarn format

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgements

• Vite
• React
• TypeScript
• Tailwind CSS
• ESLint
• Prettier
• Vitest
• Testing Library
• Playwright
• Husky