如何将 Budibase 应用以非 iframe 微前端方式嵌入自研宿主外壳【免费下载链接】budibaseAI agents, automations and apps that run your operations. Model agnostic.项目地址: https://gitcode.com/GitHub_Trending/bu/budibase如果你的目标是把 Budibase 应用嵌进自己的宿主应用host shell且不希望用 iframe 隔离整页Budibase 仓库在 examples/microfrontend/ 目录下提供了一个单路由级微前端宿主 PoC。它把 Budibase 作为非 iframe 微前端挂载进自研外壳由宿主外壳拥有/app/*路由并通过GET /api/microfrontend/bootstrap?appPath/app/workspace-url解析应用元数据支持深链与基于 hash 路由的宿主/浏览器导航。有两个前提需要先确认Budibase 服务运行在http://localhost:10000PoC 的代理都指向这个地址。bootstrap端点仅在 Enterprise 许可下可用examples/microfrontend/README.md 中明确注明服务端在未启用该 feature 时会返回 403。PoC 的挂载机制PoC 由三部分构成Vite React 的宿主外壳、一个 Express 编写的 BFF 桥接服务bff.server.mjs以及可选的 nginx 同域路由示例nginx.root.conf。核心挂载逻辑在 src/App.jsx 中读取window.__BUDIBASE_APP_URL__得到应用地址请求/api/microfrontend/bootstrap?appPath...拿到appId和clientLibPath动态import(bootstrap.clientLibPath)加载 Budibase 客户端 bundle调用 bundle 导出的mountBudibaseApp({ target, appUrl, appId, initialPath, onNavigate })把应用挂载到页面中一个普通 DOM 节点div ref{targetRef} /全程没有 iframe。应用内部路由变化通过onNavigate回调同步回宿主路由pathname保持为/app/...应用内路径放进hash因此浏览器地址栏的深链始终由宿主外壳控制。配置应用目标地址在 index.html 中通过window.__BUDIBASE_APP_URL__指定要嵌入的 Budibase 应用。默认值为window.__BUDIBASE_APP_URL__ ${window.location.origin}/app/microfrontend该值有硬性要求README 与App.jsx的解析逻辑一致必须是绝对 URL必须与宿主外壳同源origin 相同否则启动时直接抛错路径必须以/app/开头其中workspace-url对应你要嵌入的工作区 URL。把默认值中的/app/microfrontend替换成你实际发布的 Budibase 应用路径即可。主路径无 OIDC 桥接模式这是默认模式适用于「Budibase 自己处理登录/会话」的场景。确认 Budibase 运行在http://localhost:10000在examples/microfrontend目录下执行yarn install yarn devdev脚本会同时拉起 Vite 宿主外壳和 BFF见 package.jsonconcurrently vite node ./bff.server.mjs 3. 打开http://localhost:5173。开发态的路由规则由 vite.config.js 决定/api、/socket开启 WebSocket 代理、/builder三类请求被代理到http://localhost:10000其余请求由宿主外壳自身处理。如何验证挂载成功外壳头部有一行Status:状态文本src/App.jsx 中的状态机按加载过程依次变化Loading Budibase app...→Loading Budibase app metadata...→Loading Budibase client bundle...→Budibase app mounted完整链路走通应用已挂载到目标 DOM 节点Failed to load Budibase appbootstrap 请求或 bundle 加载失败常见原因见下文「已知限制」Client bundle loaded, but mountBudibaseApp was not found客户端 bundle 已加载但没有导出预期的mountBudibaseApp函数。挂载成功后可以在宿主动作地址栏直接访问/app/workspace-url#/page-path验证深链应用内路径在 hash 中刷新和浏览器前进/后退由宿主路由承接。可选分支OIDC 桥接模式当用户必须通过你平台的 OIDC 登录、并被静默桥接进 Budibase 会话时使用 Mode 2。同样确认 Budibase 运行在http://localhost:10000创建环境变量文件模板在 .env.oidc.examplecp .env.oidc.example .env在.env中填写三个必填项replace-with-...是模板占位必须替换为你自己的值OIDC_ISSUEROIDC_CLIENT_IDOIDC_CLIENT_SECRET模板中还有一组可选覆盖项OIDC_SCOPES默认openid profile email、OIDC_REDIRECT_URI默认http://localhost:5174/auth/callback、BUDIBASE_TENANT_ID默认default、BUDIBASE_OIDC_CONFIG_ID、BFF_SESSION_TTL_MS默认28800000以及HOST_PORT/BFF_PORT/HOST_ORIGIN/BUDIBASE_ORIGIN/BFF_PUBLIC_ORIGIN等端口与地址项。执行yarn install yarn dev:oidcdev:oidc等价于带VITE_AUTH_MODEoidc的yarn dev外壳据此在头部显示Login/Logout按钮。打开http://localhost:5174。该端口启动后实际访问入口是宿主外壳Vite在5173BFF 桥接在5174。此模式下 BFFbff.server.mjs承担认证编排/auth/login发起 OIDC 授权码流程含 PKCE/auth/callback换取 token、建立本地会话mf_sidCookieTTL 默认 8 小时并在bridgeBudibase1时重定向到 Budibase 的 OIDC 登录端点完成会话桥接/auth/session供外壳查询当前认证状态/api/global/auth/*被代理到 Budibase 的认证端点其余请求代理回宿主外壳。必须配置项桥接模式下要把 Budibase 的 platform URL 设为 BFF 的公网地址本地即http://localhost:5174否则 Budibase 的 OIDC 重定向会把用户带回:10000而不是宿主README 的 Important OIDC note。若三个 OIDC 变量未配置就访问/auth/*BFF 会返回 500 并提示OIDC is not configured. Set OIDC_ISSUER, OIDC_CLIENT_ID and OIDC_CLIENT_SECRET.可选nginx 同域反向代理示例[note以下路径与端口均来自 nginx.root.conf是开发机上的本地 upstream 示例]若不走 Vite 开发代理、而是让 nginx 在同一个域名下做路径路由参考配置的分发规则为路径上游说明/auth/127.0.0.1:5174BFFOIDC 桥接流程/api/global/auth/127.0.0.1:5174BFFBudibase 认证端点经 BFF 重写/api/127.0.0.1:10000Budibase其余 API/socket/127.0.0.1:10000Budibase含 WebSocket 升级头/builder/127.0.0.1:10000BudibaseBuilder 静态资源/127.0.0.1:5173宿主外壳其余页面README 指出该示例演示了同域路径路由与Referer转发。在 OIDC 模式下使用 nginx 时确保/auth/*与/api/global/auth/*被路由到 BFF。已知限制与报错判断许可限制/api/microfrontend/bootstrap仅在 microfrontend feature 启用Enterprise 许可时可用否则服务端抛出 403消息为Microfrontend bootstrap is only available when the microfrontend feature is enabled.见 workspace 控制器。此时外壳会停在Failed to load Budibase app。同源限制window.__BUDIBASE_APP_URL__与外壳不同源时外壳启动即抛错window.__BUDIBASE_APP_URL__ must use the same origin as the host shell.路径不以/app/开头时报window.__BUDIBASE_APP_URL__ path must start with /app/.。PoC 定位仓库将该项目标注为 Microfrontend PoC (Single Example)即单路由级的示例实现生产化改造会话存储、多应用路由等需要基于 src/App.jsx 和 bff.server.mjs 自行扩展。【免费下载链接】budibaseAI agents, automations and apps that run your operations. Model agnostic.项目地址: https://gitcode.com/GitHub_Trending/bu/budibase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何将 Budibase 应用以非 iframe 微前端方式嵌入自研宿主外壳
如何将 Budibase 应用以非 iframe 微前端方式嵌入自研宿主外壳【免费下载链接】budibaseAI agents, automations and apps that run your operations. Model agnostic.项目地址: https://gitcode.com/GitHub_Trending/bu/budibase如果你的目标是把 Budibase 应用嵌进自己的宿主应用host shell且不希望用 iframe 隔离整页Budibase 仓库在 examples/microfrontend/ 目录下提供了一个单路由级微前端宿主 PoC。它把 Budibase 作为非 iframe 微前端挂载进自研外壳由宿主外壳拥有/app/*路由并通过GET /api/microfrontend/bootstrap?appPath/app/workspace-url解析应用元数据支持深链与基于 hash 路由的宿主/浏览器导航。有两个前提需要先确认Budibase 服务运行在http://localhost:10000PoC 的代理都指向这个地址。bootstrap端点仅在 Enterprise 许可下可用examples/microfrontend/README.md 中明确注明服务端在未启用该 feature 时会返回 403。PoC 的挂载机制PoC 由三部分构成Vite React 的宿主外壳、一个 Express 编写的 BFF 桥接服务bff.server.mjs以及可选的 nginx 同域路由示例nginx.root.conf。核心挂载逻辑在 src/App.jsx 中读取window.__BUDIBASE_APP_URL__得到应用地址请求/api/microfrontend/bootstrap?appPath...拿到appId和clientLibPath动态import(bootstrap.clientLibPath)加载 Budibase 客户端 bundle调用 bundle 导出的mountBudibaseApp({ target, appUrl, appId, initialPath, onNavigate })把应用挂载到页面中一个普通 DOM 节点div ref{targetRef} /全程没有 iframe。应用内部路由变化通过onNavigate回调同步回宿主路由pathname保持为/app/...应用内路径放进hash因此浏览器地址栏的深链始终由宿主外壳控制。配置应用目标地址在 index.html 中通过window.__BUDIBASE_APP_URL__指定要嵌入的 Budibase 应用。默认值为window.__BUDIBASE_APP_URL__ ${window.location.origin}/app/microfrontend该值有硬性要求README 与App.jsx的解析逻辑一致必须是绝对 URL必须与宿主外壳同源origin 相同否则启动时直接抛错路径必须以/app/开头其中workspace-url对应你要嵌入的工作区 URL。把默认值中的/app/microfrontend替换成你实际发布的 Budibase 应用路径即可。主路径无 OIDC 桥接模式这是默认模式适用于「Budibase 自己处理登录/会话」的场景。确认 Budibase 运行在http://localhost:10000在examples/microfrontend目录下执行yarn install yarn devdev脚本会同时拉起 Vite 宿主外壳和 BFF见 package.jsonconcurrently vite node ./bff.server.mjs 3. 打开http://localhost:5173。开发态的路由规则由 vite.config.js 决定/api、/socket开启 WebSocket 代理、/builder三类请求被代理到http://localhost:10000其余请求由宿主外壳自身处理。如何验证挂载成功外壳头部有一行Status:状态文本src/App.jsx 中的状态机按加载过程依次变化Loading Budibase app...→Loading Budibase app metadata...→Loading Budibase client bundle...→Budibase app mounted完整链路走通应用已挂载到目标 DOM 节点Failed to load Budibase appbootstrap 请求或 bundle 加载失败常见原因见下文「已知限制」Client bundle loaded, but mountBudibaseApp was not found客户端 bundle 已加载但没有导出预期的mountBudibaseApp函数。挂载成功后可以在宿主动作地址栏直接访问/app/workspace-url#/page-path验证深链应用内路径在 hash 中刷新和浏览器前进/后退由宿主路由承接。可选分支OIDC 桥接模式当用户必须通过你平台的 OIDC 登录、并被静默桥接进 Budibase 会话时使用 Mode 2。同样确认 Budibase 运行在http://localhost:10000创建环境变量文件模板在 .env.oidc.examplecp .env.oidc.example .env在.env中填写三个必填项replace-with-...是模板占位必须替换为你自己的值OIDC_ISSUEROIDC_CLIENT_IDOIDC_CLIENT_SECRET模板中还有一组可选覆盖项OIDC_SCOPES默认openid profile email、OIDC_REDIRECT_URI默认http://localhost:5174/auth/callback、BUDIBASE_TENANT_ID默认default、BUDIBASE_OIDC_CONFIG_ID、BFF_SESSION_TTL_MS默认28800000以及HOST_PORT/BFF_PORT/HOST_ORIGIN/BUDIBASE_ORIGIN/BFF_PUBLIC_ORIGIN等端口与地址项。执行yarn install yarn dev:oidcdev:oidc等价于带VITE_AUTH_MODEoidc的yarn dev外壳据此在头部显示Login/Logout按钮。打开http://localhost:5174。该端口启动后实际访问入口是宿主外壳Vite在5173BFF 桥接在5174。此模式下 BFFbff.server.mjs承担认证编排/auth/login发起 OIDC 授权码流程含 PKCE/auth/callback换取 token、建立本地会话mf_sidCookieTTL 默认 8 小时并在bridgeBudibase1时重定向到 Budibase 的 OIDC 登录端点完成会话桥接/auth/session供外壳查询当前认证状态/api/global/auth/*被代理到 Budibase 的认证端点其余请求代理回宿主外壳。必须配置项桥接模式下要把 Budibase 的 platform URL 设为 BFF 的公网地址本地即http://localhost:5174否则 Budibase 的 OIDC 重定向会把用户带回:10000而不是宿主README 的 Important OIDC note。若三个 OIDC 变量未配置就访问/auth/*BFF 会返回 500 并提示OIDC is not configured. Set OIDC_ISSUER, OIDC_CLIENT_ID and OIDC_CLIENT_SECRET.可选nginx 同域反向代理示例[note以下路径与端口均来自 nginx.root.conf是开发机上的本地 upstream 示例]若不走 Vite 开发代理、而是让 nginx 在同一个域名下做路径路由参考配置的分发规则为路径上游说明/auth/127.0.0.1:5174BFFOIDC 桥接流程/api/global/auth/127.0.0.1:5174BFFBudibase 认证端点经 BFF 重写/api/127.0.0.1:10000Budibase其余 API/socket/127.0.0.1:10000Budibase含 WebSocket 升级头/builder/127.0.0.1:10000BudibaseBuilder 静态资源/127.0.0.1:5173宿主外壳其余页面README 指出该示例演示了同域路径路由与Referer转发。在 OIDC 模式下使用 nginx 时确保/auth/*与/api/global/auth/*被路由到 BFF。已知限制与报错判断许可限制/api/microfrontend/bootstrap仅在 microfrontend feature 启用Enterprise 许可时可用否则服务端抛出 403消息为Microfrontend bootstrap is only available when the microfrontend feature is enabled.见 workspace 控制器。此时外壳会停在Failed to load Budibase app。同源限制window.__BUDIBASE_APP_URL__与外壳不同源时外壳启动即抛错window.__BUDIBASE_APP_URL__ must use the same origin as the host shell.路径不以/app/开头时报window.__BUDIBASE_APP_URL__ path must start with /app/.。PoC 定位仓库将该项目标注为 Microfrontend PoC (Single Example)即单路由级的示例实现生产化改造会话存储、多应用路由等需要基于 src/App.jsx 和 bff.server.mjs 自行扩展。【免费下载链接】budibaseAI agents, automations and apps that run your operations. Model agnostic.项目地址: https://gitcode.com/GitHub_Trending/bu/budibase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考