Vite React Ts

Overview:

This article discusses a drop-in replacement for Create React App (CRA) that is powered by Vite. It highlights various features and additions that come with this replacement, such as the ability to import SVGs directly as React components, unit testing with Jest and React Testing Library, ESLint rules and Prettier configuration, and support for TailwindCSS. It also mentions the usage of degit for easy setup and provides an overview of the tech stack used in this replacement.

Features:

• Import SVG’s directly as React Component via SVGR
• Unit Testing via Jest & React Testing Library
• ESLint Rules & Prettier
• TailwindCSS support
• Absolute imports within the src directory
• Conventional Commits using Commitlint
• Pre-commit hooks for running lint checks, TypeScript checks, formatting, and unit tests
• Easy setup with degit

Installation:

To install and use this drop-in replacement, follow these steps:

1. Install degit globally:

npm install -g degit

2. Use degit to clone the repository:

degit username/repo

3. Navigate to the cloned repository:

cd repo

4. Install the dependencies:

npm install

5. Start the development server:

npm run dev

6. Build the project for production:

npm run build

7. Serve the built project:

npm run serve

Summary:

This article showcases a drop-in replacement for Create React App that is powered by Vite. It provides several key features and additions, including the ability to import SVGs as React components, unit testing with Jest and React Testing Library, ESLint rules and Prettier configuration, support for TailwindCSS, and more. The installation process is straightforward and the article also provides an overview of the tech stack used in this replacement.