Nginx. proxy_pass to dev vite's server

[yogrr]

I got a question posted on stackoverflow

Please read it and see question.

I also provide vite.config.ts

import { UserConfig, defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
  const env = loadEnv(mode, process.cwd(), '')

  const host: UserConfig['server']['host'] = (() => {
    if (!('NODE_ENV' in env)) {
      return undefined
    }
    if (['production', 'development'].includes(env.NODE_ENV)) {
      return '0.0.0.0'
    }
    return undefined
  })()

  const vitePort: UserConfig['server']['port'] = (() => {
    if (!('VITE_PORT' in env)) {
      return undefined
    }

    const port = Number(env.VITE_PORT)
    if (Number.isNaN(port)) {
      return undefined
    }

    return port
  })()

  return {
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
    plugins: [
      react(),
      tsconfigPaths({
        root: './../',
      }),
    ],
    server: {
      host: host,
      port: vitePort,
    },
  }
})

package.json

{
  "name": "serverless",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "build": "tsc && vite build --config ./.configs/vite.config.ts",
    "cmpnt": "generate-react c",
    "dev": "vite --config ./.configs/vite.config.ts",
    "lintfix": "run-s lintfix:*",
    "lintfix:eslint": "eslint . -c ./.configs/.eslintrc.cjs --fix",
    "lintfix:stylelint": "stylelint -c ./.configs/.stylelintrc.json --fix src/**/*.css **/*.scss",
    "lint": "run-s lint:*",
    "lint:eslint": "eslint . --config ./.configs/.eslintrc.cjs --report-unused-disable-directives --max-warnings 0",
    "lint:cspell": "cspell --no-progress --no-summary -c ./.configs/.cspell.json .",
    "lint:stylelint": "stylelint -c ./.configs/.stylelintrc.json --ignore-path ./.configs/.stylelintignore **/*.css **/*.scss",
    "preview": "vite preview --config ./.configs/vite.config.ts"
  },
  "dependencies": {
    "@codemirror/commands": "^6.3.0",
    "@codemirror/lang-javascript": "^6.2.1",
    "@codemirror/lang-markdown": "^6.2.2",
    "@codemirror/language": "^6.9.2",
    "@codemirror/language-data": "^6.3.1",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@lezer/highlight": "^1.1.6",
    "@mui/icons-material": "^5.14.16",
    "@mui/material": "^5.14.13",
    "@types/node": "^20.9.1",
    "@types/validator": "^13.11.5",
    "@uidotdev/usehooks": "^2.4.1",
    "@uiw/codemirror-themes": "^4.21.20",
    "@uiw/react-codemirror": "^4.21.20",
    "axios": "^1.6.0",
    "classnames": "^2.3.2",
    "codemirror": "^6.0.1",
    "compose-function": "^3.0.3",
    "immer": "^10.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.48.2",
    "react-router-dom": "^6.16.0",
    "swr": "^2.2.4",
    "usehooks-ts": "^2.9.1",
    "validator": "^13.11.0",
    "zustand": "^4.4.6"
  },
  "devDependencies": {
    "@cspell/dict-ru_ru": "^2.1.1",
    "@types/compose-function": "^0.0.31",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@types/react-router-dom": "^5.3.3",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
    "cspell": "^7.3.6",
    "eslint": "^8.45.0",
    "eslint-define-config": "^1.23.0",
    "eslint-plugin-import-newlines": "^1.3.4",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "generate-react-cli": "^8.3.0",
    "node-sass": "^9.0.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.31",
    "react-refresh": "^0.14.0",
    "stylelint": "^15.10.3",
    "stylelint-config-recess-order": "^4.3.0",
    "stylelint-config-recommended": "^13.0.0",
    "stylelint-config-standard": "^34.0.0",
    "stylelint-config-standard-scss": "^11.1.0",
    "stylelint-stylistic": "^0.4.3",
    "typescript": "^5.0.2",
    "typescript-plugin-css-modules": "^5.0.1",
    "vite": "^4.4.5",
    "vite-tsconfig-paths": "^4.2.1"
  }
}

tsconfigs

root:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~/*": [
        "./*"
      ],
    },
    "typeRoots": [
      "./node_modules/@types",
      "./src/shared/types"
    ],
  },
  "extends": "./.configs/tsconfig.json",
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx",
    "./component_templates/**/*.ts",
    "./component_templates/**/*.tsx"
  ],
}

at ./.configs/

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~/*": [
        "./*"
      ],
    },
    "typeRoots": [
      "./node_modules/@types",
      "./src/shared/types"
    ],
  },
  "extends": "./.configs/tsconfig.json",
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx",
    "./component_templates/**/*.ts",
    "./component_templates/**/*.tsx"
  ],
}

tsconfig.node.json at ./.configs/

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "skipLibCheck": true
  },
  "include": [
    "vite.config.ts"
  ]
}

How I can proxy_pass to vite's dev server with nginx?