AI导哈

React应用模板

SEMOSS React应用模板，提供前端与后端连接的起始结构，包含示例组件和开发工具。

  • by boredcod
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 boredcod/mcp-demo-app

使用说明

Semoss模板应用程序

概述

该存储库为SEMOSS React应用程序提供了一个起点。它包括：

  • 一种用于连接React前端与MCP或Java后端的结构。
  • 示例自定义Java反应器和与之交互的TypeScript组件。
  • 开发工具：Biome、预提交和lint stage。

先决条件

在使用此存储库之前，请确保您拥有以下内容：

创建SEMOSS Pro代码应用程序

  1. 打开SEMOSS用户界面：
    首选 http://localhost:9090/SemossWeb/packages/client/dist/#/ （称为“SEMOSS UI”）。

  2. 创建新应用程序：

    • 导航到“应用程序”页面（通常在左侧边栏）。
    • 点击“创建新应用”。
    • 选择用代码开发应用程序（而不是拖放）。
    • 输入名称和描述（例如。， YourAppName).
    • 提交以创建应用程序。你会被带到编辑页面。
    • 注意URL中的长字符串——这是您的应用程序的ID(your-app-id)例如。， 1337e31c-2131-4ef4-b942-94bdffa65c3f.

了解应用程序文件结构

  • 在SEMOSS UI编辑器中，您将看到一个文件资源管理器，显示 portals 文件夹。
  • 资源管理器正在显示 assets 文件夹； portals 在里面 assets.
  • assets 是应用程序代码的主文件夹。

在您的计算机上：

  • 首选 workspace/Semoss/project/[YourAppName]_[your-app-id]/app_root/version/
  • 内部 version，你会发现 assets 文件夹，其中包含 portals 和 portals/index.html.
  • 这 assets 文件系统中的文件夹和SEMOSS UI中的文件夹是相同的。

发布您的应用程序

要使更改对用户可见，请执行以下操作：

  1. 在SEMOSS UI中，打开并编辑 portals/index.html.
  2. 单击“保存”。
  3. 在您单击“发布文件”之前，更改不会公开。
  4. 发布后，刷新应用程序选项卡以查看更新。

注：
已发布的快照存储在
workspace/apache-tomcat-9.0.102/webapps/Monolith/public_home/your-app-id.

使用此存储库创建React应用程序

克隆模板

  1. 在文件资源管理器中，转到
    workspace/Semoss/project/[YourAppName]_[YourAppID]/app_root/version/
  2. 重命名 assets 到 old-assets.
  3. 在此位置打开一个终端。
  4. 克隆此存储库： git clone git@github.com:SEMOSS/Template.git，如果使用SSH密钥
  5. 重命名克隆的 Template 文件夹到 assets.
  6. 打开 assets 在代码编辑器中（建议使用VS code）。

SEMOSS应用程序结构

  • SEMOSS UI中的“发布文件”按钮为用户创建快照。
  • 这 portals 文件夹包含用户可用的文件，包括 portals/index.html （应用程序的主要入口点）。
  • 前端源代码通常存在于 client 文件夹，并捆绑到 portals 使用Webpack（请参见 client/README.md 详细信息）。
  • 后端Java反应堆在 java 文件夹。当您在SEMOSS UI中单击“重新编译反应堆”时，SEMOSS会编译这些反应堆和位置 .class 文件在 classes 文件夹（请参见 java/README.md 更多）。

插件

此存储库包括几个帮助维护代码质量的工具：

  • 更漂亮：格式化和lints前端代码以保持一致性。
  • 预承诺：确保在提交之前运行代码格式和质量检查（主要针对后端代码）。
  • 皮棉上演：在每次提交之前对暂存文件运行格式化和linting，以防止推送错误代码。
    • 注意：如果您是Mac用户，并且您的提交出现错误，并显示以下消息 " not foundECURSIVE_EXEC_FIRST_FAIL  Command "lint-staged，那么您可能需要在中更改行尾 ./husky/pre-commit 和 ./husky/commit-msg 从CRLF到LF。
  • 佣金化：此预提交钩子使用传统的提交语法。查看此链接，了解如何格式化提交消息。以下是一些常见的例子：
    • feat: Major feature added
    • docs: Documentation changed/updated
    • fix: Bug fixed and code restored to working state
    • refactor(style): Changed some code around to adhere to better style
    • chore: Some update/chore that you've been needing to do

后续步骤

  • 看 client/README.md 用于前端开发说明。
  • 看 java/README.md 用于后端/反应堆开发。

支持

如有疑问或问题，请联系SEMOSS团队或参考内部文档。

相关 MCP