React全栈模板

一个基于React的全栈模板,用于创建Pulse Editor扩展应用,支持模块共享和前后端开发。

  • by Shellishack
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Shellishack/pulse-app-mcp-agent

使用说明

[!警告] 此repo已弃用。此项目已移至monorepo:https://github.com/ClayPulse/official-pulse-apps

Pulse应用程序模板

这是一个React全栈模板,您可以使用它来制作自己的Pulse Editor应用程序。它使用Webpack Module Federation与Pulse Editor共享模块。

有关Pulse Editor核心及其生态系统的更多信息,请访问我们的官方网站 网站 和 文档.

开始使用

使用CLI创建Pulse Editor扩展应用程序

# Install Pulse Editor CLI
npm i -g @pulse-editor/cli
# Use CLI to create a React template project (based on this repository)
pulse create

开始开发

方法1:将您的扩展作为开发扩展安装在Pulse Editor中

运行以下命令以在本地启动开发服务器。

npm run dev

这将在以下位置托管您的扩展http://localhost:3030(或者您可以在中自定义服务器主机 webpack.config.ts).然后在Pulse Editor中,转到设置并填写扩展开发服务器的信息以安装新的扩展。您将需要以下内容:

  • 开发服务器:例如。http://localhost:3030
  • 扩展id:在中指定的扩展id package.json
  • version:在中指定的扩展版本 package.json

方法2:在浏览器中预览您的扩展

如果你想快速开始开发你的扩展,而不想在Pulse Editor中安装它。你可以运行一个在浏览器中运行的预览开发服务器(就像开发React应用程序一样)。

npm run preview

请注意,在预览开发模式下,您的扩展将无法使用IMC(模块间通信)与Pulse Editor通信。

添加扩展源代码

前端:
在内部添加React代码 /src 为您的扩展制作自定义组件, main.tsx 是脉冲编辑器扩展的主要入口。

后端:
在中写入服务器代码 src/server-functions,每个文件都必须有一个默认导出。

脉冲编辑器库

您可以从以下位置使用共享实用程序(如类型) @pulse-editor/shared-utils.

你也可以使用React钩子 @pulse-editor/react-api 与脉冲编辑器主进程交互。一些例子是:

  • 加载/写入当前打开的文件。
  • 调用脉冲编辑器代理。
  • 使用AI模型。
  • 使用安装在脉冲编辑器中的代理工具。