Loco 前端开发指南基于 Rsbuild 的 SaaS 前端开发、构建与集成【免费下载链接】loco The one-person framework for Rust for side-projects and startups项目地址: https://gitcode.com/GitHub_Trending/lo/locoLocoloco-rs是一个面向副业项目与初创公司的 Rust 全栈框架。其脚手架loco-new会生成一套开箱即用的 SaaS 前端模板该模板以 React TypeScript 为核心采用 Rust 生态工具链Rsbuild 构建、Biome 格式化与检查并最终将构建产物交由 Loco 后端直接托管。本文以 loco-new/base_template/frontend/README.md 为主干结合模板源码与配置文件完整讲解前端工程的依赖安装、开发调试、生产构建以及如何与 Loco 后端无缝集成。模板概述Batteries included前端模板位于loco-new/base_template/frontend/是一个独立的现代前端工程主要技术栈如下TypeScriptJavaScript 的类型化超集为前端代码提供静态类型检查能力Rsbuild基于 Rust 的 Web 构建工具底层复用 Rspack负责开发服务器、打包与产物优化Biome同样基于 Rust 实现的前端格式化工具与代码检查器linter性能出色React用于构建用户界面的 JavaScript 库模板默认以 React 作为 UI 层。需要特别说明的是模板对 UI 框架的选择保持开放态度如果你不喜欢 ReactRsbuild 让替换其它框架如 Vue、Solid 等变得非常容易——只需要调整 rsbuild.config.ts 中的插件当前为pluginReact()并替换对应的入口组件即可。从 package.json 可以看到模板的完整依赖与脚本定义运行时依赖react与react-dom版本^19开发依赖rsbuild/core^1、rsbuild/plugin-react^1、biomejs/biome^2、typescript^5以及 React 类型定义可用脚本devrsbuild dev --open、buildrsbuild build、lintbiome check src/、previewrsbuild preview。一、安装依赖pnpm install按照模板 README 的指引前端工程使用 pnpm 作为包管理器第一步是安装依赖pnpm install该命令会读取package.json与pnpm-lock.yaml若生成安装全部依赖。Loco 前端模板选择 pnpm 而非 npm/yarn既保证了安装速度也通过 lockfile 锁定依赖版本确保团队与 CI 环境的一致性。二、开发模式pnpm dev依赖安装完成后即可启动前端开发服务器pnpm dev该命令实际执行rsbuild dev --open会启动 Rsbuild 开发服务器并自动打开浏览器。开发模式下有几个值得注意的细节源码入口入口文件为 src/index.tsx它通过ReactDOM.createRoot将根组件LocoSplash挂载到页面中idroot的元素上并启用了React.StrictMode默认启动页src/LocoSplash.tsx 渲染了一个简单的 SaaS 落地页含顶部导航栏、Logo 与页脚作为新项目前端起步的骨架开发代理关键rsbuild.config.ts 中配置了开发服务器的代理规则——所有/api开头的请求会被转发到http://127.0.0.1:5150changeOrigin: true。这意味着开发阶段前端默认 5173 端口与 Loco 后端默认 5150 端口可以分离运行前端代码里直接请求/api/...即可无需关心跨域问题页面元信息构建配置里同时指定了html.titleLoco SaaS Starter与html.faviconsrc/assets/favicon.ico。三、代码质量Biome 检查模板通过 Biome 统一代码风格与质量检查对应脚本为pnpm lintbiome.json 中的配置开启了organizeImports自动整理 import 顺序linter启用推荐规则集recommended: trueformatter对 JavaScript 与 JSON 文件启用格式化缩进风格为空格space。实际开发中pnpm dev之外建议在提交前运行pnpm lint将格式化与静态检查纳入工作流。四、生产构建pnpm build 与 dist 产物执行pnpm buildRsbuild 会执行rsbuild build将 TypeScript/React 源码编译并打包输出到frontend/dist目录HTML、JS、CSS 及静态资源。之后pnpm preview可本地预览生产构建结果。构建产物是连接 Loco 后端的桥梁dist目录正是 Loco 静态资源服务所托管的目录。这也是模板 README 强调After the builddistfolder is ready to be served by loco的原因。五、与 Loco 集成cargo loco start前端构建完成后只需启动 Loco 后端即可同时提供 API 与前端页面cargo loco startLoco 会通过静态资源中间件static_assets托管前端产物。从模板配置文件可以看到具体机制在 loco-new/base_template/config/development.yaml.t 与 loco-new/base_template/config/test.yaml.t 中静态资源配置为assets: ... # 生产构建后的前端产物目录 path: frontend/dist # SPA 路由回退文件 fallback: frontend/dist/index.htmlfallback指向index.html意味着前端路由如 React Router 管理的路径在刷新时不会 404而是统一回退到 SPA 入口脚手架生成阶段见 loco-new/setup.rhai会先写入一个占位frontend/dist/index.html内容提示需先执行前端构建因此新建项目后首次运行后端前必须先完成一次pnpm build生成真实产物对应配置结构在测试中也有覆盖见 loco-new/tests/templates/asset.rs 中的frontend/dist与 fallback 断言。在最终部署时生产配置 loco-new/base_template/config/production.yaml 同理前端无需独立部署静态服务器Loco 一个进程即可同时承载业务 API 与前端资源非常适合单人全栈开发与初创项目快速上线。六、模板工程速查文件/目录作用loco-new/base_template/frontend/package.json依赖清单与脚本定义dev/build/lint/previewloco-new/base_template/frontend/rsbuild.config.tsRsbuild 配置React 插件、HTML 元信息、/api开发代理loco-new/base_template/frontend/biome.jsonBiome 格式化与 lint 规则loco-new/base_template/frontend/tsconfig.jsonTypeScript 编译选项strict、JSX、ES2020 等loco-new/base_template/frontend/src/index.tsxReact 应用入口loco-new/base_template/frontend/src/LocoSplash.tsx默认 SaaS 落地页组件loco-new/base_template/config/development.yaml.t后端静态资源托管配置frontend/dist小结完整的开发闭环可以概括为三条命令加一个启动动作pnpm install安装依赖 →pnpm dev联调开发配合/api代理访问 Loco 后端→pnpm build产出dist→cargo loco start由 Loco 统一托管。模板通过 Rsbuild、Biome 与 TypeScript 组成的 Rust 系前端工具链配合 Loco 的静态资源托管与 SPA fallback 机制让开发者无需搭建独立的前端部署链路即可获得一个进程、前后端一体的全栈开发与发布体验。【免费下载链接】loco The one-person framework for Rust for side-projects and startups项目地址: https://gitcode.com/GitHub_Trending/lo/loco创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考