https://github.com/mst-mkt/vite-react-template
React Template with Vite, @tanstack/resct-router, TailwindCSS
https://github.com/mst-mkt/vite-react-template
react tanstack-router vite
Last synced: 3 months ago
JSON representation
React Template with Vite, @tanstack/resct-router, TailwindCSS
- Host: GitHub
- URL: https://github.com/mst-mkt/vite-react-template
- Owner: mst-mkt
- License: mit
- Created: 2024-01-07T09:04:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-21T11:30:18.000Z (9 months ago)
- Last Synced: 2024-10-25T10:47:41.590Z (9 months ago)
- Topics: react, tanstack-router, vite
- Language: TypeScript
- Homepage:
- Size: 628 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vite and React template
Template for Vite and React projects.
> [!NOTE]
> This Template is basically for my personal use, but you can use it if you want. \
> If you have any suggestions or improvements, feel free to open an issue or a pull request.
## Tech Stack
| Name | Purpose |
| ---------------------- | ------------------------- |
| Vite | Build tool |
| React | UI library |
| Tailwind CSS | CSS framework |
| @tanstack/react-router | Routing library |
| valibot | Schema validation library |
| react-helmet-async | Dynamic meta tags |
| @tabler/icons-react | Icon component library |
### For development
| Name | Purpose |
| -------- | -------------------- |
| pnpm | Package manager |
| biome | Formatter and linter |
| lefthook | Git hooks |
## Development
### Install dependencies
```sh
pnpm i
```
### Run development server
```sh
pnpm dev
```
### Build
```sh
pnpm build
```
### Lint and format
```sh
pnpm check
```
with applying fixes:
```sh
pnpm fix
```
## Deployment
1. Create cloudflare pages project
```bash
pnpm wrangler pages project create
```
> [!NOTE]
> When deploying with GitHub Actions, the repository name and project name must be the same. \
> If you want to change it, edit the workflow yml.
2. Set secrets about cloudflare
Set some secrets in the repository secrets ([https://github.com/\[username\]/\[your-repo\]/settings/secrets/actions](https://github.com/username/your-repo/settings/secrets/actions)). \
Or you can use the gh cli.
```bash
gh secret set CLOUDFLARE_ACCOUNT_ID --body ""
gh secret set CLOUDFLARE_API_TOKEN --body ""
```
3. Deploy
Run the workflow manually or push to the main branch.