Everything you need to start with your next Vite + React web app! Delighful developer experience with batteries included.
react-vite-boilerplate.webm
Built with type safety, scalability, and developer experience in mind. A batteries included Vite + React template.
A more detailed list of the included packages can be found in the Installed Packages section.
Getting started is a simple as cloning the repository
git clone https://github.com/singhAmandeep007/react-vite-boilerplate.git
Changing into the new directory
cd react-vite-boilerplate
Removing the .git folder (and any additional files, folders or dependencies you may not need)
rm -rf .git
Installing dependencies
npm install
And running the setup script (initializes git repository and husky)
npm run prepare
Congrats! You're ready to starting working on that new project!
Note: This project comes with two git hooks added by husky. A pre-commit hook that runs lint-staged and a commit-msg hook that runs commitlint + devmoji. You can simply run npm run commit after staging your changes to create automagical ✨ emojified conventional commit message.
If you wish to remove any hooks, simply delete the corresponding file in the .husky directory.
If you want to ignore husky hooks for a specific commit, you can use the --no-verify flag. Eg. git commit -m "your message" --no-verify
- This boilerplate project includes a recommended folder structure for organizing your application code in logical and opinionated way.
The folder structure is as follows:
├── .storybook
├── cypress
│ ├── downloads
│ ├── fixtures
│ ├── specs
│ ├── support
| └── tsconfig.json
├── env
├── public
├── src
│ ├── __mocks__
│ ├── app
│ ├── api
│ ├── assets
│ ├── components
│ │ ├── forms
│ │ ├── hooks
│ │ ├── layout
│ │ ├── ui
│ │ └── developmentTools.tsx
│ ├── config
│ ├── mocker
│ ├── modules
│ │ └── i18n
│ ├── pages
│ │ ├── app
│ │ ├── home
│ │ └── auth
│ ├── routes
│ ├── store
│ │ └── auth
│ ├── tests
│ ├── types
│ ├── utils
│ └── index.css
│ └── main.tsx
├── index.html
├── .editorconfig
├── eslint.config.js
├── prettier.config.js
├── cypress.config.js
├── tailwind.config.js
├── .gitignore
├── tsconfig.json
├── vite.config.ts
└── package.json
- There are README files which contain simple descriptions about how the different directories in the accompanying folder structure may be used. As an example check out the recommended component organizational structure.
Unit testing is handled by React Testing Library and Vitest.
If you'd like to run Unit tests, execute the following command:
npm run test:unit
# or with coverage
npm run test:unit:coverage
# or in watch mode
npm run test:unit:watch
# or in ui mode
npm run test:unit:uiTesting types is also supported with vitest and this application is set up to run tests for types using it. By default all tests inside *.test-d.ts files are considered type tests.
End-to-End (E2E) Testing is conducted by Cypress.
If you'd like to run E2E tests, execute the following command:
npm run test:e2e
# or in headless mode
npm run test:e2e:headlessGithub Actions has been set up to run tests on every push to the repository. The configuration can be found in the .github/workflows directory.
Workflow for cypress tests is located in .github/workflows/cypress.yml.
This project includes a set of Devtools. Some are additional package dependencies whereas others come built-in to the packages themselves.
- @tanstack/react-query-devtools - Dedicated dev tools to help visualize the inner workings of React Query
- @tanstack/router-devtools - Dedicated dev tools to help visualize the inner workings of TanStack Router
- @hookform/DevTools - React Hook Form Devtools to help debug forms with validation
A set of utility components are provided in developmentTools.tsx. These wrapper components check whether the application is running in development or production mode and render the component or null respectively. In other words, you can confidently use them during development without having to worry about them showing up for end users in production.
TanStack Query Devtools are ready to go out of the box. The development vs. production rendering mechanism is built into the devtools. If you do wish to render the devtools in production you can freely do so by following the TanStack Query Devtools documentation. The devtools component can be found in App.tsx.
When running the application in development mode you can find the TanStack Query Devtools icon in the bottom left corner of the page sporting the React Query Logo.
TanStack Router Devtools, however, utilizes its respective utility component in this project. The initial setup has been taken care of but if you wish to modify or remove the component, have a look in src/routes__root.tsx.
The TanStack Router Devtools icon can be found in the bottom left corner of the page denoted by "Tanstack Router" logo.
React Hook Form DevTools icon can be recognized in the top left corner of the page by the pink React Hook Form clipboard logo. A prop must be passed from a specific hook to enable it. In this case, it is the control prop from the useForm() hook. Use of React Hook Form DevTools requires the component be added to each unique form. More information can be found in the React Hook Form DevTools documentation.
To reiterate, if you wish to restrict the Devtools to development builds use the provided components found at src/components/utils/developmentTools instead of the built-in components from their respective modules.
- TypeScript - Typed superset of JavaScript
- Vite - Feature rich and highly optimized frontend tooling with TypeScript support out of the box
- React - A modern front-end JavaScript library for building user interfaces based on components
- TanStack Router - Fully typesafe, modern and scalable routing solution for react applications.
- TanStack React Query - Powerful asynchronous state management, server state caching, and data fetching library
- Zustand - A small, fast and scaleable bearbones state-management solution using flux principles.
- Provides a built-in devtools middleware
- Radash - A powerful utility library with functions having strong types and zero dependencies
- date-fns - Modern JavaScript date utility library
- ky - A tiny and elegant HTTP client which provides cool benefits over plain fetch
- i18next-browser-languageDetector
- i18next
- react-i18next - A powerful internationalization framework for React/React Native based on i18next
- Tailwind CSS - A utility-first CSS framework packed with classes to build any web design imaginable
- Shadcn UI - A set of beautiful and accessible React components
- Lucide
- Storybook - A frontend workshop for building UI components and pages in isolation
- React Hook Form - Performant, flexible and extensible forms with easy-to-use validation
- Zod - TypeScript-first schema validation with static type inference
- Vitest - Vitest is a fast testing framework for modern web applications with first-class support for TypeScript and Vite
- React Testing Library - A very light-weight, best practice first, solution for testing React components
- Cypress - A powerful end-to-end testing framework that simplifies and accelerates web application testing
- MSW - Industry standard API mocking for JavaScript designed to work across any frameworks, tools, and environments
- Husky - Automatically lint your commit messages, code, and run tests upon committing or pushing.
- Commitizen - Conventional commit messages CLI
- lint-staged - Run linters against staged git files and don't let 💩 slip into your code base!
- Devmoji - A CLI tool to help you write conventional commit messages with emojis
- Faker - Generate massive amounts of fake (but realistic) data for testing and development