Features

• React
• Vite
• Tailwind
• React Router
• Eslint
• Prettier
• Husky
• lint-staged
• editorconfig
• Cypress with code coverage

Setup

⚠️ We recommend using Visual Studio Code as well as the extensions for Prettier, Eslint and EditorConfig for VS Code for development.

⚠️ We recommend using Node version 16.x. Check nvm.

1. npm ci to install dependencies.
2. Copy contents of .env.dist into a .env file and populate it. Ensure that environment variables have the prefix VITE_.

For example:

If your application requires a API_BASE_URL, name the enviroment variable "VITE_API_BASE_URL" in the '.env' file.

How to run

npm run build # Create a production build
npm run start:prod # Run app in production
npm run start:dev # Run app in development

Testing

npm run test:ui # Run UI tests in headless mode
npm run test:ui:dev # Run UI in browser mode

Useful commands

npm run lint # Run linter
npm run format # Run formatter

Issues

Files that are not tested are displayed in the final cypress report as having "empty" coverage. They should display 0% coverage.

• cypress-io/code-coverage#539
• cypress-io/code-coverage#552

References

• React docs
• Vite docs
• Vite + Tailwind setup
• React Router docs
• eslint + prettier + editorconfig setup
• Husky docs
• lint-staged docs
• Vite path aliasing
• Cypress docs
• Vite + React + Cypress + coverage
• @cypress/code-coverage docs
• nyc docs