riipandi/vite-react-template

Project Logo

Introduction

A starter project for React with Vite, Tailwind CSS, and Typescript. This starter kit is already pre-configured with absolute import, React Router, and other goodies. This starter also provides basic authentication implementation, you can use any authentication provider or your own.

The Complete Stack

[x] Vite - Next Generation Frontend Tooling.
[x] React - A JavaScript library for building user interfaces.
[x] Tailwind CSS - A utility-first CSS framework for rapidly building custom designs.
[x] Lucide Icons - Beautiful & consistent icons made by the community.
[x] Typescript - Strongly typed programming language.
[x] React Router DOM - Declarative routing for React.
[x] React Hook Form - Performant, flexible and extensible forms with easy-to-use validation.
[x] React Testing Library - Light-weight solution for testing React components.
[x] Vitest - Blazing Fast Unit Test Framework.
[x] ESLint - Find and fix problems in your JavaScript code.
[x] Prettier - An opinionated code formatter.

Quick Start

Installation

npx degit 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.

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 deployments so that pushing to master will deploy to production! 🚀

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 for more information.

For the preview branch:

VITE_PUBLIC_SITE_URL=${CF_PAGES_URL}

Development

This project uses TypeScript for type checking, ESLint for linting which is configured in .eslintrc.js, and Prettier for auto-formatting in this project. It's recommended to get TypeScript set up for your editor and install an editor plugin (like the VSCode Prettier plugin) 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 or MIT license 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 and LICENSE-MIT files for more information.

_{🤫 Psst! If you like my work you can support me via GitHub sponsors.}