├── .github └── workflows │ └── ci.yml ├── .gitignore ├── LICENSE ├── README.md ├── degit.json ├── eslint.config.js ├── index.html ├── package.json ├── src ├── App.tsx ├── index.css ├── main.tsx └── vite-env.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | pull_request: 7 | branches: [master] 8 | 9 | # permissions: 10 | # contents: read 11 | # pages: write 12 | # id-token: write 13 | 14 | jobs: 15 | build: 16 | runs-on: ubuntu-latest 17 | steps: 18 | - uses: actions/checkout@v4 19 | - uses: actions/setup-node@v4 20 | with: 21 | node-version: "22.x" 22 | cache: yarn 23 | - run: yarn 24 | - run: yarn lint 25 | # - run: yarn build --base=/CHANGE_THIS/ 26 | # - name: Upload artifact 27 | # uses: actions/upload-pages-artifact@v3 28 | # with: 29 | # path: dist 30 | # 31 | #deploy: 32 | # environment: 33 | # name: github-pages 34 | # url: ${{ steps.deployment.outputs.page_url }} 35 | # needs: build 36 | # runs-on: ubuntu-latest 37 | # name: Deploy 38 | # steps: 39 | # - name: Deploy to GitHub Pages 40 | # id: deployment 41 | # uses: actions/deploy-pages@v4 42 | # if: ${{ github.event_name == 'push' }} 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.local 2 | *.log* 3 | *.njsproj 4 | *.ntvs* 5 | *.sln 6 | *.suo 7 | *.sw? 8 | .DS_Store 9 | .idea 10 | /dist* 11 | logs 12 | node_modules 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 2 | Version 2, December 2004 3 | 4 | Copyright (C) 2021-2023 various contributors 5 | 6 | Everyone is permitted to copy and distribute verbatim or modified 7 | copies of this license document, and changing it is allowed as long 8 | as the name is changed. 9 | 10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 12 | 13 | 0. You just DO WHAT THE FUCK YOU WANT TO. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vite-react-ts-template 2 | 3 | This repository contains a very minimal template for quickly setting up a 4 | React + TypeScript project that's built with Vite and optionally deployed 5 | to GitHub Pages. 6 | 7 | ## Usage 8 | 9 | ### Starting a new project 10 | 11 | The easiest way to use this repository is to [`degit`](https://github.com/Rich-Harris/degit) it: 12 | 13 | ``` 14 | npx degit akx/vite-react-ts-template my-project 15 | ``` 16 | 17 | You can also of course clone the repo yourself, remove the `.git` directory 18 | and any extraneous files (such as this one, `degit.json` and the WTFPL `LICENSE` file) 19 | yourself. 20 | 21 | ### And then what? 22 | 23 | After you've set up your project: 24 | 25 | - Use the `dev` script for the Vite live server. 26 | - Use `build` to type-check and build the project. 27 | - Use `lint` to run ESlint. 28 | - Use `prettify` to have Prettier reformat your files. 29 | 30 | ## License 31 | 32 | To the extent of applicable law, no copyright is claimed for the contents of 33 | this template repository, with the intent that it be used as a starting point 34 | for other projects without encumbering them with any particular license. 35 | 36 | The template is provided "as is", without warranty of any kind, express or 37 | implied, including but not limited to the warranties of merchantability, 38 | fitness for a particular purpose and noninfringement. 39 | 40 | For formal purposes, the contents of this repository are licensed under the 41 | [WTFPL](https://choosealicense.com/licenses/wtfpl/). 42 | -------------------------------------------------------------------------------- /degit.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "action": "remove", 4 | "files": ["LICENSE", "README.md"] 5 | } 6 | ] 7 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from "@eslint/js"; 2 | import globals from "globals"; 3 | import reactHooks from "eslint-plugin-react-hooks"; 4 | import reactRefresh from "eslint-plugin-react-refresh"; 5 | import tseslint from "typescript-eslint"; 6 | import prettierConfig from "eslint-config-prettier"; 7 | 8 | export default tseslint.config( 9 | { ignores: ["dist"] }, 10 | { 11 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 12 | files: ["**/*.{ts,tsx}"], 13 | languageOptions: { 14 | ecmaVersion: 2020, 15 | globals: globals.browser, 16 | }, 17 | plugins: { 18 | "react-hooks": reactHooks, 19 | "react-refresh": reactRefresh, 20 | }, 21 | rules: { 22 | ...reactHooks.configs.recommended.rules, 23 | "react-refresh/only-export-components": [ 24 | "warn", 25 | { allowConstantExport: true }, 26 | ], 27 | }, 28 | }, 29 | prettierConfig, 30 | ); 31 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "version": "0.0.0", 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "tsc -b && vite build", 8 | "serve": "vite preview", 9 | "lint": "eslint . --report-unused-disable-directives", 10 | "prettify": "prettier --write ." 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.15.0", 18 | "@types/react": "^18.3.12", 19 | "@types/react-dom": "^18.3.1", 20 | "@vitejs/plugin-react-swc": "^3.7.2", 21 | "eslint": "^9.15.0", 22 | "eslint-config-prettier": "^9.1.0", 23 | "eslint-plugin-react-hooks": "^5.0.0", 24 | "eslint-plugin-react-refresh": "^0.4.14", 25 | "globals": "^15.12.0", 26 | "prettier": "^3.4.1", 27 | "typescript": "~5.7.2", 28 | "typescript-eslint": "^8.16.0", 29 | "vite": "^6.0.1" 30 | }, 31 | "prettier": { 32 | "trailingComma": "all" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function App() { 4 | return
Hello
; 5 | } 6 | 7 | export default App; 8 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | } 7 | 8 | code { 9 | font-family: Menlo, Monaco, Consolas, "Courier New", monospace; 10 | } 11 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | const root = createRoot(rootElement!); 8 | 9 | root.render( 10 | 11 | 12 | , 13 | ); 14 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowImportingTsExtensions": true, 4 | "exactOptionalPropertyTypes": true, 5 | "forceConsistentCasingInFileNames": true, 6 | "isolatedModules": true, 7 | "jsx": "react-jsx", 8 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 9 | "module": "ESNext", 10 | "moduleDetection": "force", 11 | "moduleResolution": "Bundler", 12 | "noEmit": true, 13 | "noFallthroughCasesInSwitch": true, 14 | "noImplicitOverride": true, 15 | "noImplicitReturns": true, 16 | "noUncheckedIndexedAccess": true, 17 | "noUncheckedSideEffectImports": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "skipLibCheck": true, 21 | "strict": true, 22 | "target": "ES2020", 23 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 24 | "useDefineForClassFields": true 25 | }, 26 | "include": ["src"] 27 | } 28 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowImportingTsExtensions": true, 4 | "exactOptionalPropertyTypes": true, 5 | "forceConsistentCasingInFileNames": true, 6 | "isolatedModules": true, 7 | "lib": ["ES2023"], 8 | "module": "ESNext", 9 | "moduleDetection": "force", 10 | "moduleResolution": "Bundler", 11 | "noEmit": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "noImplicitOverride": true, 14 | "noImplicitReturns": true, 15 | "noUncheckedIndexedAccess": true, 16 | "noUncheckedSideEffectImports": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "skipLibCheck": true, 20 | "strict": true, 21 | "target": "ES2022", 22 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo" 23 | }, 24 | "include": [ 25 | "vite.config.ts" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react-swc"; 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | --------------------------------------------------------------------------------