https://github.com/aleydon/react-vite
React ViteJs template configured with typescript, eslint, prettier, husky (pre-commit), storybook, jest, testing-library and more...
https://github.com/aleydon/react-vite
eslint eslint-config eslint-config-prettier eslint-plugin-prettier javascript js prettier react react-hooks react-router react-router-dom reactjs storybook ts tsx typescript vite vitejs
Last synced: about 2 months ago
JSON representation
React ViteJs template configured with typescript, eslint, prettier, husky (pre-commit), storybook, jest, testing-library and more...
- Host: GitHub
- URL: https://github.com/aleydon/react-vite
- Owner: Aleydon
- Created: 2024-11-23T04:28:16.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2026-02-06T17:14:30.000Z (4 months ago)
- Last Synced: 2026-02-07T01:19:24.718Z (4 months ago)
- Topics: eslint, eslint-config, eslint-config-prettier, eslint-plugin-prettier, javascript, js, prettier, react, react-hooks, react-router, react-router-dom, reactjs, storybook, ts, tsx, typescript, vite, vitejs
- Language: TypeScript
- Homepage:
- Size: 1.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
:earth_americas: Vite.js Template :earth_americas:
This repository provides a robust and opinionated React template powered by Vite.js, designed to kickstart your web development projects with a focus on modern tooling, testing, and code quality. It comes pre-configured with essential development tools to ensure a smooth and efficient workflow.
## :bookmark_tabs: Table of Contents
- [:pushpin: Requirements](#pushpin-requirements)
- [:arrow_forward: Get Started](#arrow_forward-get-started)
- [:gear: Features & Technologies](#gear-features--technologies)
- [:hammer_and_wrench: Development & Usage](#hammer_and_wrench-development--usage)
- [Running Tests](#running-tests)
- [Storybook Documentation](#storybook-documentation)
- [:handshake: Contributing](#handshake-contributing)
- [:page_facing_up: License](#page_facing_up-license)
---
## :pushpin: Requirements
To get started with this template, you need to have Node.js installed on your system.
- **Node.js**: [https://nodejs.org/en/](https://nodejs.org/en/)
---
## :arrow_forward: Get Started
Follow these steps to set up and run the project locally:
1. **Clone this repository:**
```sh
git clone https://github.com/Aleydon/React-Vite.git
```
2. **Navigate into the project directory:**
```sh
cd React-Vite
```
3. **Install NPM packages:**
```sh
npm install # or yarn install
```
4. **Run the development server:**
```sh
npm run dev # or yarn dev
```
This will start the development server, and you can view the application in your browser, typically at `http://localhost:5173`.
---
## :gear: Features & Technologies
This template is configured with a comprehensive set of tools to enhance your development experience:
- **Jest + Testing Library**: For robust automated testing of your React components.
- :link: [Jest](https://jestjs.io/)
- :link: [Testing Library](https://testing-library.com/)
- **Storybook**: For isolated component development and documentation, making it easy to showcase and test UI components.
- :link: [Storybook](https://storybook.js.org/)
- **ESLint + Prettier**: To maintain consistent code style and catch potential errors early.
- :link: [ESLint](https://eslint.org/)
- :link: [Prettier](https://prettier.io/)
- **TypeScript**: For static typing, improving code quality, readability, and maintainability.
- :link: [TypeScript](https://www.typescriptlang.org/)
- **Tailwind CSS**: A utility-first CSS framework for rapidly building custom designs.
- :link: [Tailwind CSS](https://tailwindcss.com/)
- **Husky**: For Git hooks, automating tasks like linting commit messages, formatting code, and running tests before commits or pushes.
- :link: [Husky](https://typicode.github.io/husky/)
---
## :hammer_and_wrench: Development & Usage
### Running Tests
To execute the automated tests configured with Jest and Testing Library:
```sh
npm run test # or npm run test:watch
```
An example test file (`src/App.spec.tsx`) is included to demonstrate basic testing practices:
```ts
import { render, screen } from '@testing-library/react';
import App from './App';
describe('App Component', () => {
it('should get the text hello world', () => {
render();
const hello = screen.getByText('Hello World');
expect(hello).toBeDefined();
});
it('should get the text hello world in the component s heading', () => {
render();
const heading = screen.getByRole('heading', {
name: 'Hello World'
});
expect(heading).toBeInTheDocument();
});
it('must get the link from the App component', () => {
render();
const link = screen.getByRole('link', { name: 'github.com/Aleydon' });
expect(link).toBeDefined();
expect(link).toHaveAttribute('target', '_blank');
expect(link).toHaveAttribute('aria-label', 'github.com/Aleydon');
});
});
```
### Storybook Documentation
To run Storybook and explore the component documentation:
```sh
npm run storybook # or yarn storybook
```
An example Storybook story (`src/components/Text/text.stories.tsx`) is provided to illustrate how to document your components:
```ts
import type { Meta, StoryObj } from '@storybook/react';
import Text, { type TextProps } from '.';
const text: Meta = {
component: Text,
title: 'Components/Text'
};
export default text;
export const Small: StoryObj = {
args: {
size: 'small',
children: 'Small Text'
}
};
export const Medium: StoryObj = {
args: {
size: 'medium',
children: 'Medium Text'
}
};
export const Large: StoryObj = {
args: {
size: 'large',
children: 'Large Text'
}
};
```
---
## :handshake: Contributing
Contributions are welcome! If you have suggestions for improvements or new features, please feel free to open an issue or submit a pull request.
---
## :page_facing_up: License
This project is licensed under the MIT License - see the [LICENSE](https://github.com/Aleydon/React-Vite/blob/main/LICENSE) file for details.