Home > Web Front-end > JS Tutorial > React with Vite On Steroids

React with Vite On Steroids

PHPz
Release: 2024-08-14 10:33:54
Original
708 people have browsed it

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
Copy after login
  1. Install dependencies:
   yarn
Copy after login

Running the Development Server

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

yarn dev
Copy after login

Building for Production

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

yarn build
Copy after login

Running Tests

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

  • Unit Tests with Vitest:
  yarn test
Copy after login
  • Check Test Coverage:
  yarn coverage
Copy after login
  • End-to-End Tests with Playwright:

    • Run all tests:
    yarn playwright test
    
    Copy after login
    • Interactive UI mode:
    yarn playwright test --ui
    
    Copy after login
    • Run tests only on Desktop Chrome:
    yarn playwright test --project=chromium
    
    Copy after login
    • Run tests in a specific file:
    yarn playwright test example
    
    Copy after login
    • Debug mode:
    yarn playwright test --debug
    
    Copy after login
    • Auto-generate tests with Codegen:
    yarn playwright codegen
    
    Copy after login

Linting and Formatting

Maintain code quality and consistency with these commands:

  • Lint the code:
  yarn lint
Copy after login
  • Fix linting errors:
  yarn lint:fix
Copy after login
  • Format the code:
  yarn format
Copy after login

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)

React with Vite On Steroids

RicardoGEsteves (Ricardo Esteves) · GitHub

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

React with Vite On Steroids github.com

The above is the detailed content of React with Vite On Steroids. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template