This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
- Node.js 20+ (recommend using nvm)
- Yarn (Classic) or npm/pnpm
Using Yarn:
yarn install
Using npm:
npm install
Using pnpm:
pnpm install
yarn dev # or: npm run dev # or: pnpm dev
App will be available at http://localhost:5173 (default Vite port).
yarn build
yarn preview
# or: npm run build && npm run previewyarn lint
# or: npm run lint- No API keys required. The app uses the public Dog CEO API (
https://dog.ceo/api) via SWR. - Tailwind CSS v4 is configured via
src/index.css. - Global state is persisted with Zustand (localStorage).
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
export default tseslint.config([ globalIgnores(["dist"]), { files: ["**/*.{ts,tsx}"], extends: [ // Other configs... // Remove tseslint.configs.recommended and replace with this ...tseslint.configs.recommendedTypeChecked, // Alternatively, use this for stricter rules ...tseslint.configs.strictTypeChecked, // Optionally, add this for stylistic rules ...tseslint.configs.stylisticTypeChecked, // Other configs... ], languageOptions: { parserOptions: { project: ["./tsconfig.node.json", "./tsconfig.app.json"], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ]);
You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:
// eslint.config.js import reactX from "eslint-plugin-react-x"; import reactDom from "eslint-plugin-react-dom"; export default tseslint.config([ globalIgnores(["dist"]), { files: ["**/*.{ts,tsx}"], extends: [ // Other configs... // Enable lint rules for React reactX.configs["recommended-typescript"], // Enable lint rules for React DOM reactDom.configs.recommended, ], languageOptions: { parserOptions: { project: ["./tsconfig.node.json", "./tsconfig.app.json"], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, ]);