├── src
├── vite-env.d.ts
├── main.tsx
├── App.css
├── App.tsx
├── index.css
└── assets
│ └── react.svg
├── vite.config.ts
├── tsconfig.node.json
├── .gitignore
├── Dockerfile
├── eslint.config.js
├── index.html
├── .eslintrc.cjs
├── .prettierrc
├── tsconfig.json
├── package.json
├── README.md
├── public
└── vite.svg
└── .github
└── workflows
└── cd.yml
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | });
8 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App.tsx";
4 | import "./index.css";
5 |
6 | ReactDOM.createRoot(document.getElementById("root")!).render(
7 |
8 |
9 | ,
10 | );
11 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true,
8 | "strict": true
9 | },
10 | "include": ["vite.config.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | # 1. For build React app
2 | FROM node:16 AS development
3 |
4 | # Set working directory
5 | WORKDIR /app
6 |
7 | #
8 | COPY package.json .
9 | COPY package-lock.json .
10 |
11 | # Same as npm install
12 | RUN npm ci
13 |
14 | COPY . .
15 | RUN npm run build
16 | # ENV CI = true
17 | # ENV PORT=3333
18 | EXPOSE 5173
19 |
20 | # CMD [ "npm", "run", "dev" ]
21 |
--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import globals from "globals";
2 | import pluginJs from "@eslint/js";
3 | import tseslint from "typescript-eslint";
4 | import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
5 |
6 |
7 | export default [
8 | {languageOptions: { globals: globals.browser }},
9 | pluginJs.configs.recommended,
10 | ...tseslint.configs.recommended,
11 | pluginReactConfig,
12 | ];
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | "eslint:recommended",
6 | "plugin:@typescript-eslint/recommended",
7 | "plugin:react-hooks/recommended",
8 | ],
9 | ignorePatterns: ["dist", ".eslintrc.cjs"],
10 | parser: "@typescript-eslint/parser",
11 | plugins: ["react-refresh"],
12 | rules: {
13 | "react-refresh/only-export-components": [
14 | "warn",
15 | { allowConstantExport: true },
16 | ],
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "es5",
3 | "tabWidth":4,
4 | "semi": true,
5 | "singleQuote": true,
6 | "endOfLine": "lf",
7 | "printWidth": 150,
8 | "bracketSpacing": true,
9 | "arrowParens": "always",
10 | "jsxBracketSameLine": false,
11 | "proseWrap": "preserve",
12 | "htmlWhitespaceSensitivity": "ignore",
13 | "overrides": [
14 | {
15 | "files": "*.tsx",
16 | "options": {
17 | "tabWidth": 2,
18 | "useTabs": true
19 | }
20 | },
21 | {
22 | "files": "*.md",
23 | "options": {
24 | "proseWrap": "always"
25 | }
26 | }
27 | ]
28 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src"],
24 | "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import reactLogo from "./assets/react.svg";
3 | import viteLogo from "/vite.svg";
4 | import "./App.css";
5 |
6 | function App() {
7 | const [count, setCount] = useState(0);
8 |
9 | return (
10 | <>
11 |
19 | This is it.
20 |
21 |
24 |
25 | Edit src/App.tsx and save to test HMR
26 |
27 |
29 | Click on the Vite and React logos to learn more
30 |
31 |
32 | );
33 | }
34 |
35 | export default App;
36 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test-app",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview",
11 | "precommit":"lint-staged",
12 | "prepare": "husky install"
13 | },
14 | "lint-staged":{
15 | "src/**/*.{js,jsx,ts,tsx}":[
16 | "eslint --fix"
17 | ]
18 | },
19 | "husky":{
20 | "hooks":{
21 | "pre-commit": "yarn precommit"
22 | }
23 | },
24 | "dependencies": {
25 | "react": "^18.2.0",
26 | "react-dom": "^18.2.0"
27 | },
28 | "devDependencies": {
29 | "@eslint/js": "^9.13.0",
30 | "@types/react": "^18.2.66",
31 | "@types/react-dom": "^18.2.22",
32 | "@typescript-eslint/eslint-plugin": "^7.2.0",
33 | "@typescript-eslint/parser": "^7.2.0",
34 | "@vitejs/plugin-react": "^4.2.1",
35 | "eslint": "^8.57.1",
36 | "eslint-plugin-react": "^7.37.2",
37 | "eslint-plugin-react-hooks": "^4.6.0",
38 | "eslint-plugin-react-refresh": "^0.4.6",
39 | "globals": "^15.11.0",
40 | "husky": "^9.1.6",
41 | "lint-staged": "^15.2.10",
42 | "typescript": "^5.2.2",
43 | "typescript-eslint": "^8.11.0",
44 | "vite": "^5.2.0"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + TypeScript + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## Expanding the ESLint configuration
11 |
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 |
14 | - Configure the top-level `parserOptions` property like this:
15 |
16 | ```js
17 | export default {
18 | // other rules...
19 | parserOptions: {
20 | ecmaVersion: "latest",
21 | sourceType: "module",
22 | project: ["./tsconfig.json", "./tsconfig.node.json"],
23 | tsconfigRootDir: __dirname,
24 | },
25 | };
26 | ```
27 |
28 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
29 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
31 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | a {
17 | font-weight: 500;
18 | color: #646cff;
19 | text-decoration: inherit;
20 | }
21 | a:hover {
22 | color: #535bf2;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | display: flex;
28 | place-items: center;
29 | min-width: 320px;
30 | min-height: 100vh;
31 | }
32 |
33 | h1 {
34 | font-size: 3.2em;
35 | line-height: 1.1;
36 | }
37 |
38 | button {
39 | border-radius: 8px;
40 | border: 1px solid transparent;
41 | padding: 0.6em 1.2em;
42 | font-size: 1em;
43 | font-weight: 500;
44 | font-family: inherit;
45 | background-color: #1a1a1a;
46 | cursor: pointer;
47 | transition: border-color 0.25s;
48 | }
49 | button:hover {
50 | border-color: #646cff;
51 | }
52 | button:focus,
53 | button:focus-visible {
54 | outline: 4px auto -webkit-focus-ring-color;
55 | }
56 |
57 | @media (prefers-color-scheme: light) {
58 | :root {
59 | color: #213547;
60 | background-color: #ffffff;
61 | }
62 | a:hover {
63 | color: #747bff;
64 | }
65 | button {
66 | background-color: #f9f9f9;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/.github/workflows/cd.yml:
--------------------------------------------------------------------------------
1 | name: Docker Image Sandbox
2 |
3 | on:
4 | push:
5 | branches:
6 | - xxxxx
7 |
8 | jobs:
9 | dev-build:
10 | runs-on: ubuntu-latest
11 | permissions:
12 | contents: read
13 | packages: write
14 | attestations: write
15 |
16 | steps:
17 | - name: Checkout code
18 | uses: actions/checkout@v3
19 |
20 | - name: Set up Docker Buildx
21 | uses: docker/setup-buildx-action@v2
22 |
23 | - name: Login to GitHub Container Registry
24 | uses: docker/login-action@v3
25 | with:
26 | registry: ghcr.io
27 | username: ${{ github.actor }}
28 | password: ${{ secrets.GITHUB_TOKEN }}
29 |
30 | - name: Push Docker image to GHCR
31 | uses: docker/build-push-action@v4
32 | with:
33 | context: .
34 | push: true
35 | tags: ghcr.io/${{ github.repository }}-v2:latest
36 | dev-deploy:
37 | needs: [dev-build]
38 | runs-on: ubuntu-latest
39 | steps:
40 | # Deploy on Remote Server
41 | - name: Deploy to Remote Server
42 | uses: appleboy/ssh-action@master
43 | with:
44 | host: ${{ secrets.SSH_HOST }}
45 | username: ${{ secrets.SSH_USERNAME }}
46 | password: ${{ secrets.SSH_PASSWORD }}
47 | script: |
48 | echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.actor }} --password-stdin
49 | docker rm $(docker stop $(docker ps -a -q --filter ancestor=ghcr.io/${{ github.repository }}-v2))
50 | docker rmi ghcr.io/${{ github.repository }}-v2
51 | docker pull ghcr.io/${{ github.repository }}-v2:latest
52 | docker run -p 5000:5173 --network=host ghcr.io/${{ github.repository }}-v2:latest
53 |
54 |
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------