{"id":17006302,"url":"https://github.com/rookie-luochao/create-vite-react-app","last_synced_at":"2026-02-11T13:31:47.337Z","repository":{"id":98739422,"uuid":"563279050","full_name":"rookie-luochao/create-vite-react-app","owner":"rookie-luochao","description":"build  webapp by react + ts + react-query + zustand  + openapi-ts-request + docker, this is a sub-template of create-vite-app-cli","archived":false,"fork":false,"pushed_at":"2025-08-26T21:40:12.000Z","size":1225,"stargazers_count":13,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-28T05:29:10.086Z","etag":null,"topics":["docker","openapi-ts","react-ts-vite","react-typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rookie-luochao.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-11-08T09:31:03.000Z","updated_at":"2025-04-07T15:18:40.000Z","dependencies_parsed_at":"2024-09-08T15:57:35.476Z","dependency_job_id":"2c905f44-d642-4852-9360-83c3fec3172b","html_url":"https://github.com/rookie-luochao/create-vite-react-app","commit_stats":{"total_commits":137,"total_committers":2,"mean_commits":68.5,"dds":0.3722627737226277,"last_synced_commit":"f02de7e67378b20e260ef5ad8472aaf370357948"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/rookie-luochao/create-vite-react-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rookie-luochao%2Fcreate-vite-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rookie-luochao%2Fcreate-vite-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rookie-luochao%2Fcreate-vite-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rookie-luochao%2Fcreate-vite-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rookie-luochao","download_url":"https://codeload.github.com/rookie-luochao/create-vite-react-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rookie-luochao%2Fcreate-vite-react-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29333492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T12:42:24.625Z","status":"ssl_error","status_checked_at":"2026-02-11T12:41:23.344Z","response_time":97,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","openapi-ts","react-ts-vite","react-typescript"],"created_at":"2024-10-14T05:05:29.961Z","updated_at":"2026-02-11T13:31:47.320Z","avatar_url":"https://github.com/rookie-luochao.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + TypeScript + Vite + Pnpm + Zustand + React-Query + OpenAPI-TS-Request + Docker\n\n该模板可以帮助您在 Vite 中使用 React 和 TypeScript 进行开发web应用.\n\n#### 概览\n\n- 搭建一个web应用开发脚手架，最大限度使用社区优秀开源方案\n- 支持自动根据 openapi 生成ts、request client、mock服务等等, [openapi格式参考](https://swagger.io/blog/news/whats-new-in-openapi-3-0/)\n- 支持前端工程化\n- 支持前端容器化(需要安装 docker 环境)\n- 同步接口请求状态，实现自动loading\n- 支持接口联动，方便跨任意组件刷新相关联的接口，而无需依赖 store 共享状态，无需垮多级组件传入回调函数\n- 支持容器化变量注入，无需前端配置文件写死，方便通过 k8s 动态注入\n- 后续支持更好用的modal，更好用的form\n\n#### 核心技术\n\n- 打包编译 - [vite](https://github.com/vitejs/vite)\n- 包管理 - [pnpm](https://github.com/pnpm/pnpm)\n- 编程语言 - [typescript](https://github.com/microsoft/TypeScript)\n- 前端框架 - [react](https://github.com/facebook/react)\n- 路由 - [react-router](https://github.com/remix-run/react-router)\n- UI组件库 - [antd](https://github.com/ant-design/ant-design)\n- css - [less](https://lesscss.org)\n- 全局数据共享 - [zustand](https://github.com/pmndrs/zustand)\n- 自动生成api - [openapi-ts-request](https://github.com/openapi-ui/openapi-ts-request)\n- 网络请求 - [axios](https://github.com/axios/axios)\n- 数据请求利器 - [react-query](https://github.com/TanStack/query)\n- 错误边界 - [react-error-boundary](https://github.com/bvaughn/react-error-boundary)\n- 前端日志(暂未集成) - [sentry-javascript](https://github.com/getsentry/sentry-javascript)\n- hack - [babel](https://github.com/babel/babel)\n- 代码检查 - [eslint](https://github.com/eslint/eslint)\n- ts代码检查插件 - [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint)\n- 代码美化 - [prettier](https://github.com/prettier/prettier)\n- git钩子 - [husky](https://github.com/typicode/husky)\n- commit格式化 -[commitlint](https://github.com/conventional-changelog/commitlint)\n\n#### 技术说明\n\n- 自动生成接口请求相关 ts 代码(openapi-ts-request): 后端接入 apifox 后，前端可以根据 openapi 文件自动生成请求客户端，支持 axios、uniapp.request等等客户端，接口相关联的 ts 类型，[文档地址](https://github.com/openapi-ui/openapi-ts-request)\n- 数据共享使用zustand，各个数据都支持建立单一仓库，开发和性能体验更好，[文档地址](https://zustand-demo.pmnd.rs)\n- 接口调用使用 react-query 进行增强，主要用于接口调用状态同步，多接口跨组件联动，[文档地址](https://tanstack.com/query/latest)\n- 路由(react-router-dom): 自身默认支持错误边界功能，我觉得 react-error-boundary 更好用点，所以用hack绕过了 react-router-dom 的错误边界(ps: react-router-dom 暂时不支持参数禁用它自带的错误边界)，[文档地址](https://reactrouter.com/en/main)\n- 组件库使用 antd 组件库，[文档地址](https://ant.design/components/overview-cn)\n\n#### 快速开始\n\n```bash\n// 下载包\npnpm install\n# or make install\n\n// 启动\nnpm run dev\n# or make dev\n```\n\n#### 其他常用命令\n\n```bash\n// 打包\nnpm run build\n# or make build\n\n// 拉取openapi=\u003e自动生成api request\nnpm run openapi\n# or make openapi\n\n// 制作docker镜像\nmake docker-build\n\n// 运行docker镜像\nmake docker-run\n\n// 制作docker镜像 and 运行docker镜像\nmake docker-build-run\n```\n\n#### 注意事项\n\n- 如果遇到git commit无法触发husky的情况，则需要手动执行一遍`npm run prepare`\n\n#### 基于openapi自动获取api请求函数，配置如下\n\n```js\n// openapi-ts-request.config.ts\n\n// 示例代码\nimport type { GenerateServiceProps } from \"openapi-ts-request\";\n\nexport default [\n  {\n    schemaPath: \"https://petstore3.swagger.io/api/v3/openapi.json\",\n    serversPath: \"./src/apis\",\n  },\n] as GenerateServiceProps[];\n```\n\n#### 应用配置\n\n```ts\n// src/config.ts\n\n// 一级path, 例如：openapi\nexport const urlPath = '';\n\n// 项目基本变量配置\nconst appConfig: IConfig = {\n  // 应用名称, 例如：react-app\n  appName: '',\n  // 网络请求的域名，例如：https://host\n  baseURL: '',\n  // 发布版本，例如：0000000-0.0.1\n  version: '',\n  // 代码环境，例如：demo, staging, online\n  env: '',\n};\n```\n\n#### 环境变量\n\n- 项目 dev 环境变量配置在`src/config.ts`\n- 项目 prod 环境变量配置在`.env.production`，详情参考：[vite环境变量](https://cn.vitejs.dev/guide/env-and-mode.html)\n- 项目 prod 环境变量也可以使用容器变量 ARG，我们会读取容器变量并注入到前端meta标签的content里面，目前html文件提供了两个mate标签(env、app_config)接收变量，格式详情参考：`index.html` 和 `src/core/http/config.ts`\n\n#### 调用接口(react-query), 支持自动loading和接口请求联动\n\n```js\n// HelloGet是一个基于axios的promise请求\nexport async function HelloGet(\n  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)\n  params: Api.HelloGetParams,\n  options?: { [key: string]: any },\n) {\n  return request\u003cApi.HelloResp\u003e('/gin-demo-server/api/v1/hello', {\n    method: 'GET',\n    params: {\n      ...params,\n    },\n    ...(options || {}),\n  });\n}\n\n// 自动调用接口获取数据\nconst { data, isLoading } = useQuery({\n  queryKey: [\"hello\", name],\n  queryFn: () =\u003e {\n    return HelloGet({ name: name });\n  },\n});\n\nexport async function HelloPost(body: Api.HelloPostParam, options?: { [key: string]: any }) {\n  return request\u003cApi.HelloResp\u003e('/gin-demo-server/api/v1/hello', {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n    },\n    data: body,\n    ...(options || {}),\n  });\n}\n\n// 提交编辑数据\nconst { mutate, isLoading } = useMutation({\n  mutationFn: HelloPost,\n  onSuccess(data) {\n    setName(data?.data || \"\");\n  },\n  onError() {\n    // 清除queryKey为hello的接口数据缓存，自动重新获取接口数据\n    queryClient.invalidateQueries({ queryKey: ['hello'] });\n  }\n})\n\nmutate({ name: \"lisi\" });\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frookie-luochao%2Fcreate-vite-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frookie-luochao%2Fcreate-vite-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frookie-luochao%2Fcreate-vite-react-app/lists"}