DEV Community

Cover image for React with Vite On Steroids
Ricardo Esteves
Ricardo Esteves

Posted on

React with Vite On Steroids

#webdev #react #typescript #javascript

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
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies:
   yarn
Enter fullscreen mode Exit fullscreen mode

Running the Development Server

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

yarn dev
Enter fullscreen mode Exit fullscreen mode

Building for Production

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

yarn build
Enter fullscreen mode Exit fullscreen mode

Running Tests

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

  • Unit Tests with Vitest:
  yarn test
Enter fullscreen mode Exit fullscreen mode
  • Check Test Coverage:
  yarn coverage
Enter fullscreen mode Exit fullscreen mode

  • 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
Enter fullscreen mode Exit fullscreen mode
  • Fix linting errors:
  yarn lint:fix
Enter fullscreen mode Exit fullscreen mode
  • Format the code:
  yarn format
Enter fullscreen mode Exit fullscreen mode

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:

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

favicon github.com

Top comments (4)

Collapse
 
dgesteves profile image
Diogo Esteves •

Awesome starter template!!

Collapse
 
ricardogesteves profile image
Ricardo Esteves •

💯💯💯

Collapse
 
ricardogesteves profile image
Ricardo Esteves •

Just add and update configs and functionalities.
Happy codding and have fun 😁!

Collapse
 
alex_talmudo_8dd71f6f77d9 profile image
Alex Talmudo • • Edited

For cutting and physique refinement, I highly suggest visiting this page to explore their specialized range of injectable options. They offer clean formulas specifically designed for body recomposition that help maintain muscle mass while keeping metabolic efficiency high. The site is super easy to navigate, checkout is secure, and their products are favored by many athletes for their purity and effectiveness. You will find great options for your goals.