React with Vite On Steroids

A Powerful Starter Template for Modern Web Development

Building React applications made easy with React with Vite On Steroids – A starter template for creating high-performance React applications with ease.

What's Inside?

This template is packed with features designed to streamline your development process:

• Vite: The lightning-fast build tool that ensures rapid development and optimized production builds.
• React: The popular JavaScript library for building user interfaces.
• TypeScript: Add type safety and enhanced tooling to your JavaScript.
• Tailwind CSS: A utility-first CSS framework for creating stunning designs without writing custom CSS.
• ESLint: Keep your codebase clean and consistent with pluggable linting rules.
• Prettier: An opinionated code formatter that enforces consistent styling across your project.
• Vitest: A blazing-fast unit testing framework with a Vite-native approach.
• Testing Library: Simple and complete testing utilities that encourage good testing practices.
• Playwright: A versatile end-to-end testing framework that supports multiple browsers.
• Husky: Automate your Git hooks, such as pre-commit hooks, to ensure quality code before it hits the repository.

Getting Started

Prerequisites

Before diving in, make sure you have the following installed:

• Node.js (version 20.x or higher)
• Yarn (or npm or pnpm)

Installation

Kickstart your project with these simple steps:

1. Clone the repository:

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

1. Install dependencies:

   yarn

Running the Development Server

Ready to start coding? Spin up the development server with:

yarn dev

Building for Production

When you're ready to deploy, create a production build with:

yarn build

Running Tests

This template comes with built-in testing utilities to ensure your code works as expected.

• Unit Tests with Vitest:

  yarn test

• Check Test Coverage:

  yarn coverage

• End-to-End Tests with Playwright:

  • Run all tests:

  yarn playwright test
  

  • Interactive UI mode:

  yarn playwright test --ui
  

  • Run tests only on Desktop Chrome:

  yarn playwright test --project=chromium
  

  • Run tests in a specific file:

  yarn playwright test example
  

  • Debug mode:

  yarn playwright test --debug
  

  • Auto-generate tests with Codegen:

  yarn playwright codegen
  

Linting and Formatting

Maintain code quality and consistency with these commands:

• Lint the code:

  yarn lint

• Fix linting errors:

  yarn lint:fix

• Format the code:

  yarn format

License

This project is licensed under the MIT License. For more details, see the LICENSE file.

Acknowledgements

A huge thanks to the developers and communities behind these amazing tools:

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

Check out the template @RicardoGEsteves

Have a lot on my website at https://www.ricardogesteves.com

Follow me @ricardogesteves
X(twitter)

RicardoGEsteves (Ricardo Esteves) · GitHub

Full-Stack Developer | Passionate about creating intuitive and impactful user experiences | Based in Lisbon, Portugal 🇵🇹 - RicardoGEsteves

github.com