Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/riipandi/vite-react-template
Starter template React with Vite, React, Tailwind CSS, React Router, React Hook Form, Vitest, and Testing Library.
https://github.com/riipandi/vite-react-template
react react-aria react-router react-router-dom starter-template tailwindcss testing-library vite vitest
Last synced: 5 days ago
JSON representation
Starter template React with Vite, React, Tailwind CSS, React Router, React Hook Form, Vitest, and Testing Library.
- Host: GitHub
- URL: https://github.com/riipandi/vite-react-template
- Owner: riipandi
- License: apache-2.0
- Created: 2022-12-03T20:43:57.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-19T21:20:09.000Z (25 days ago)
- Last Synced: 2024-11-02T06:43:50.588Z (12 days ago)
- Topics: react, react-aria, react-router, react-router-dom, starter-template, tailwindcss, testing-library, vite, vitest
- Language: TypeScript
- Homepage: https://reactivite.netlify.app
- Size: 537 KB
- Stars: 21
- Watchers: 1
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE-APACHE
Awesome Lists containing this project
README
## Introduction
A starter project for [React](https://reactjs.org/) with [Vite](https://vitejs.dev/), [Tailwind CSS](https://tailwindcss.com),
and [Typescript](https://www.typescriptlang.org/). This starter kit is already pre-configured
with [absolute import](https://jsdev.org/env/nodejs/absolute-path-imports/), [React Router](https://reactrouter.com/),
and [other goodies](./package.json). This starter also provides basic authentication implementation, you can use
any authentication provider or your own.
## The Complete Stack
- [x] [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling.
- [x] [React](https://reactjs.org/) - A JavaScript library for building user interfaces.
- [x] [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.
- [x] [Lucide Icons](https://lucide.dev/) - Beautiful & consistent icons made by the community.
- [x] [Typescript](https://www.typescriptlang.org/) - Strongly typed programming language.
- [x] [React Router DOM](https://reactrouter.com/) - Declarative routing for React.
- [x] [React Hook Form](https://react-hook-form.com/) - Performant, flexible and extensible forms with easy-to-use validation.
- [x] [React Testing Library](https://testing-library.com/) - Light-weight solution for testing React components.
- [x] [Vitest](https://vitest.dev/) - Blazing Fast Unit Test Framework.
- [x] [Biome](https://biomejs.dev/) - Format, lint, and more in a fraction of a second.
- [x] [Storybook](https://storybook.js.org/) - UI component explorer for frontend developers.
## Quick Start
### Installation
```bash
npx tiged riipandi/vite-react-template myapp-name
```
> Don't forget to change `myapp-name` with your real application name.
### Up and Running
| NPM | Yarn | PNPM | Description |
| ----------------- | -------------- | -------------- | ------------------------ |
| `npm install` | `yarn` | `pnpm install` | install the dependencies |
| `npm run dev` | `yarn dev` | `pnpm dev` | serve with hot reload |
| `npm run build` | `yarn build` | `pnpm build` | build for production |
| `npm run preview` | `yarn preview` | `pnpm preview` | launch generated build |
Application will run at `http://localhost:3000`
For detailed explanation on how things work, check out [Vite documentation](https://vitejs.dev/guide).
## Deploy your own
You'll want to fork this repository and deploy your own Next.js website. Once you have an
image generator that sparks joy, you can setup [automatic GitHub](https://vercel.com/github)
deployments so that pushing to master will deploy to production! 🚀
[](https://vercel.com/new/clone?repository-url=https://github.com/riipandi/vite-react-template&project-name=vite-react-template&repo-name=my-vite-react-app&env=VITE_PUBLIC_SITE_URL)
[](https://app.netlify.com/start/deploy?repository=https://github.com/riipandi/vite-react-template)
#### Cloudflare Deployment
You need to add `NODE_VERSION` with value `18.17.1` or `20.9.0` on the environment variables setting.
Visit [Cloudflare pages docs](https://developers.cloudflare.com/pages/platform/build-configuration/)
for more information.
For the preview branch:
```env
VITE_PUBLIC_SITE_URL=${CF_PAGES_URL}
```
## Development
This project uses TypeScript for type checking, [Biome][biome] for code formatting
and linting which is configured in [`biome.json`](./biome.json). It's recommended
to get TypeScript set up for your editor and install an editor plugin (like the
[VSCode Biome plugin][vscode-biome]) to get auto-formatting on saving and get a
really great in-editor experience with type checking and auto-complete.
## Thanks to...
In general, I'd like to thank every single one who open-sources their
source code for their effort to contribute something to the open-source
community. Your work means the world! 🌍 ❤️
## License
Licensed under either of [Apache License 2.0][license-apache] or [MIT license][license-mit] at your option.
> Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in this project by you,
> as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.
Copyrights in this project are retained by their contributors.
See the [LICENSE-APACHE](./LICENSE-APACHE) and [LICENSE-MIT](./LICENSE-MIT) files for more information.
---
🤫 Psst! If you like my work you can support me via [GitHub sponsors](https://github.com/sponsors/riipandi).
[biome]: https://biomejs.dev
[license-mit]: https://choosealicense.com/licenses/mit/
[license-apache]: https://choosealicense.com/licenses/apache-2.0/