https://github.com/ariym/base-vite-react
Typescript/Vite/React project with tanstack-query, react-router, and tailwind.
https://github.com/ariym/base-vite-react
react react-query tailwindcss tanstack-query typescript vite
Last synced: 2 months ago
JSON representation
Typescript/Vite/React project with tanstack-query, react-router, and tailwind.
- Host: GitHub
- URL: https://github.com/ariym/base-vite-react
- Owner: ariym
- Created: 2023-02-04T21:02:40.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-01-06T04:28:14.000Z (over 1 year ago)
- Last Synced: 2025-02-22T02:18:38.960Z (over 1 year ago)
- Topics: react, react-query, tailwindcss, tanstack-query, typescript, vite
- Language: JavaScript
- Homepage:
- Size: 58.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# base-vite-react
## Getting Started Steps
```bash
git clone https://github.com/ariym/base-vite-react project-name
cd project-name
git remote remove origin
npm i
```
## Usage
### Import Path Shortcut for `/src`
`import from '@/dir_or_filename'` makes is easy to import universal components inside nested directories
### Downloading new UI components
1. Find a component on [ui.shadcn.com/docs/components](https://ui.shadcn.com/docs/components)
1. `npx shadcn-ui@latest add component-name`
### Environment Variables
1. Inside of project root run:
- ```cp env.template .env.development.local```
- ```cp env.template .env.production.local```
1. Prefix every variable with ```VITE_``` (```VITE_SOMETHING=xxx```)
1. Import with ```import.meta.env.VITE_SOMETHING```
[Vite Documentation](https://vitejs.dev/guide/env-and-mode.html#env-files) on env files.
#### Enviroment MODE
Instead of ```NODE_ENV```, use ```import.meta.env.MODE``` by passing ```vite --mode MODE``` at startup.
**Note to *AVOID*** passing ```NODE_ENV=``` at startup which can get confusing as [documented here](https://vitejs.dev/guide/env-and-mode#node-env-and-modes).
## Libraries Included
- **data fetching** – [react query](https://tanstack.com/query/v5/docs/framework/react/overview)
- state management for updated data
- loading screen
- **navigation** – [react router](https://reactrouter.com/home)
- adding a route
- url parameters
- **ui components** – shadcn
- **icons** – radix-ui/react-icons
- **build sytstem** – vite