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
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})This project is preconfigured to deploy with GitHub Pages using GitHub Actions.
Steps:
- Push the repo to GitHub (make sure your default branch is
mainormaster). - In GitHub, go to Settings → Pages, and set Source to "GitHub Actions".
- Push a commit to trigger the
Deploy Vite site to GitHub Pagesworkflow. - Your site will be available at:
- https://.github.io/ for a repo named
<USERNAME>.github.io, or - https://.github.io// for a normal project repo.
- https://.github.io/ for a repo named
Notes:
-
The Vite
baseis set dynamically invite.config.tsto work for both root pages and project pages. -
The workflow files are under
.github/workflows/deploy.ymland publish thedistfolder. -
No
homepagefield is required inpackage.jsonfor this setup. -
Replace
tseslint.configs.recommendedtotseslint.configs.recommendedTypeCheckedortseslint.configs.strictTypeChecked -
Optionally add
...tseslint.configs.stylisticTypeChecked -
Install eslint-plugin-react and update the config:
// eslint.config.js
import react from 'eslint-plugin-react'
export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})