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:
Installation
Kickstart your project with these simple steps:
- Clone the repository:
git clone https://github.com/RicardoGEsteves/react-with-vite-on-steroids.git
cd react-with-vite-on-steroids
- 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:
Check out the template @RicardoGEsteves
Have a lot on my website at https://www.ricardogesteves.com
Follow me @ricardogesteves
X(twitter)
Top comments (3)
Awesome starter template!!
๐ฏ๐ฏ๐ฏ
Just add and update configs and functionalities.
Happy codding and have fun ๐!