This content originally appeared on DEV Community and was authored by Ricardo Esteves
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)
RicardoGEsteves (Ricardo Esteves) · GitHub
Full-Stack Developer | Passionate about creating intuitive and impactful user experiences | Based in Lisbon, Portugal 🇵🇹 - RicardoGEsteves
github.com
This content originally appeared on DEV Community and was authored by Ricardo Esteves
Ricardo Esteves | Sciencx (2024-08-13T18:42:18+00:00) React with Vite On Steroids. Retrieved from https://www.scien.cx/2024/08/13/react-with-vite-on-steroids/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.