Vitamin

Warning

Project in maintenance mode.

Opinionated Vite starter template.

Features

• Vite with React, TypeScript and absolute imports.
• Tailwind CSS v3 with a basic reset for form styles and a Prettier plugin that automatically sorts classes.
• Use ESLint, stylelint and Prettier on VSCode and before you commit with Husky and lint-staged.
• PWA with 17/17 Lighthouse score.
• Write unit and integration tests with Vitest and Testing Library.
• Write e2e tests with Cypress.
• GitHub Actions for automatic dependency updates, CodeQL Analysis, running tests and code coverage with Codecov.
• Deploy to vercel.com with pre-configured SPA fallback.

Getting started

Use this repository as a GitHub template or use degit to clone to your machine with an empty git history:

npx degit wtchnm/Vitamin#main my-app

Then, install the dependencies:

pnpm install

Before you start coding

• If you don't plan to use GitHub Actions, delete the .github directory.
• Clean up the cypress/e2e/index.spec.ts file.
• Change the favicon.png, apple-touch-icon.png, android-chrome-192x192.png and android-chrome-512x512.png. favicon.io is a cool tool for generating these assets.
• In the src folder, remove the __tests__, api and components folder and the types.ts file.
• If you don't plan to use react-query, remove the query client logic in the main.tsx file.
• Change the title, description and theme color in the index.html and vite.config.ts. The Inter font is included, so remove it if you want.
• Modify or delete the LICENSE file.
• Change the name field in package.json.

Scripts

• pnpm dev - start a development server with hot reload.
• pnpm build - build for production. The generated files will be on the dist folder.
• pnpm preview - locally preview the production build.
• pnpm test - run unit and integration tests related to changed files based on git.
• pnpm test:ci - run all unit and integration tests in CI mode.
• pnpm test:e2e - run all e2e tests with the Cypress Test Runner.
• pnpm test:e2e:headless - run all e2e tests headlessly.
• pnpm format - format all files with Prettier.
• pnpm lint - runs TypeScript, ESLint and Stylelint.
• pnpm validate - runs lint, test:ci and test:e2e:ci.