https://github.com/sokilskill/react-chakra-ui-template
https://github.com/sokilskill/react-chakra-ui-template
chakra-ui eslint husky react vite
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/sokilskill/react-chakra-ui-template
- Owner: Sokilskill
- Created: 2024-11-08T06:41:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-09T14:32:11.000Z (over 1 year ago)
- Last Synced: 2025-01-21T20:48:41.560Z (over 1 year ago)
- Topics: chakra-ui, eslint, husky, react, vite
- Language: JavaScript
- Homepage: https://sokilskill.github.io/react-chakra-ui-template/
- Size: 221 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
Awesome Lists containing this project
README
# React + Vite + Husky + ESLint
A template for quickly setting up a React project using Vite, Husky, and ESLint. This is suitable for creating new projects with essential tools for code quality control and commit automation.
## Project Overview
1. **Vite** - A fast development bundler with hot reloading.
2. **React** - Set up for component-based development.
3. **Husky** - Configured with a pre-commit hook to run ESLint before commits to ensure code quality.
4. **ESLint** - Configured with basic rules, which can be modified as needed in `eslint.config.js`.
## Project Setup
1. **Installation and Running**
- To install dependencies, run:
```bash
npm install
```
- To start the project in development mode:
```bash
npm run dev
```
- To build the project:
```bash
npm run build
```
2. **Setting up **
- Replace `"name": "vite-react-template"` in `package.json` with your project’s name.
- Replace `"base: "/vite-react-template/"` in `vite.config.js` with your base url.
3. **Editing `index.html`**
- Update the page `title`.
- Add your favicon (you can use [Real Favicon Generator](https://realfavicongenerator.net/)).
- Add meta tags for SEO and social media.
- Link fonts:
- Add Google Fonts link directly in `index.html`;
- Or download fonts to `/public/fonts` using [Google Webfonts Helper](https://gwfh.mranftl.com/fonts/roboto?subsets=latin) and include them via CSS `@font-face`;
- Or install fonts via npm with [Fontsource](https://fontsource.org/).
4. **Configuring ESLint**
- If needed, add or modify rules in `eslint.config.js`.