react-template-vite
react-template-vite copied to clipboard
A Minimal ⚛️ React Starter Template with Vite, TailwindCSS, and Typescript pre-configured with ESLint, Prettier and Husky.
React Starter Template w/ Vite
A Minimal React Starter Template with Vite, TailwindCSS, and TypeScript pre-configured with ESLint, Prettier and Husky.
Features
- ⚡ Vite - Lightning fast frontend tooling
- ⚛️ React 18 - A JavaScript library for building user interfaces
- 🎨 TailwindCSS - A utility-first CSS framework for rapidly building custom designs
- 📦 TypeScript - A typed superset of JavaScript that compiles to plain JavaScript
- 📦 TanStack Router - A fully type-safe React router with built-in data fetching, stale-while revalidate caching and first-class search-param APIs.
- 📦 react-router - Declarative routing for React
- 📦 lucide-react - Beautiful & consistent icons
- 📝 ESLint - The pluggable linting utility for JavaScript and JSX
- ✨ Prettier - An opinionated code formatter
- 🐶 Husky - Git hooks made easy
- 🚫 lint-staged - Run linters against staged git files
- 📄 commitlint - Lint commit messages
- 📦 bun - A JavaScript runtime w/ Fast, disk space efficient package manager
Getting Started
Install degit globally:
bun i -g degit || pnpm i -g degit || yarn global add degit || npm i -g degit
Scaffold the project:
# basic template w/ react-router-dom
degit rajput-hemant/react-template-vite <project-name>
cd <project-name>
# basic template w/ tanstack-router
degit rajput-hemant/react-template-vite#tanstack-router <project-name>
cd <project-name>
# barebone template
degit rajput-hemant/react-template-vite#barebone <project-name>
cd <project-name>
Install dependencies:
bun i || pnpm i || yarn || npm i
Initialize a new git repository (Optional):
git init
git add .
git commit --no-verify -m "init"
Available Scripts
In the project directory, you can run:
| Script | Description |
|---|---|
dev |
Runs the app in the development mode. |
build |
Builds the app for production to the dist folder. |
serve |
Serves the production build from the dist folder. |
preview |
Bundles and serves the production build from the dist folder. |
type-check |
Runs TypeScript type-checking. |
lint |
Runs ESLint with Prettier. |
fmt |
Formats the code with Prettier. |
fmt:check |
Checks if the code is formatted with Prettier. |
prepare |
Installs husky git hooks. |
After Installation Checklist
- [ ] Update
package.jsonwith your project details. - [ ] Update
README.mdwith your project details. - [ ] Update
LICENSEwith your name and year. - [ ] Update
index.htmlto your liking.
Switching Package Manager
This template uses bun as the default package manager. If you want to use pnpm, npm or yarn, you need to remove the bun.lockb file and run pnpm i, npm i or yarn to generate the lock file for the respective package manager.
Deployments
License
This project is licensed under the MIT License - see the LICENSE file for details.
Contributors:
Note: It may take up to 24h for the contrib.rocks plugin to update because it's refreshed once a day.