如何将React前端连接到Sails.js并替换原有EJS模板

方案1：混合模式（保留Sails服务端路由，React做页面渲染） #

该方案适合不想改动现有Sails后端路由逻辑，希望平滑迁移的场景

• 第一步：初始化React构建环境
  在Sails项目根目录新建assets/src文件夹存放React源码，安装react、react-dom及对应构建工具（vite/webpack均可），配置构建工具将打包产物输出到Sails默认托管静态资源的assets/dist目录。
• 第二步：替换EJS模板入口
  保留views/目录下的主入口EJS文件（如layout.ejs），删除原有模板渲染逻辑，仅保留React挂载根节点及构建后静态资源引入逻辑，示例代码如下：

  <!-- views/layout.ejs -->
  <!DOCTYPE html>
  <html>
  <head>
    <title><%= pageTitle %></title>
    <link rel="stylesheet" href="/dist/assets/index.css">
  </head>
  <body>
    <!-- React挂载节点 -->
    <div id="root"></div>
    <script type="module" src="/dist/assets/index.js"></script>
  </body>
  </html>
  

• 第三步：适配服务端数据传递
  原有EJS中通过<%= %>注入的服务端数据，可通过两种方式适配：一是Sails渲染入口EJS时将首屏必需的基础数据挂载到window全局对象，React启动时直接读取；二是React组件内部直接调用Sails提供的REST接口获取动态数据。
• 第四步：配置开发&构建命令
  在项目package.json中新增脚本，比如：

  {
    "scripts": {
      "build:react": "vite build",
      "dev": "vite build --watch & sails lift"
    }
  }
  

  开发阶段修改React代码会自动触发构建，Sails会自动加载最新的静态资源。

方案2：前后端完全分离模式 #

该方案适合后续有单独部署前端、前后端职责拆分需求的场景

• 第一步：单独初始化React项目，可放在Sails项目子目录或独立仓库，开发阶段React本地服务跑默认端口（如vite默认5173），Sails服务跑默认1337端口。
• 第二步：在Sails的config/security.js中配置CORS规则，将React开发域名加入跨域允许列表，避免接口调用跨域问题。
• 第三步：将原有Sails中返回EJS页面的路由全部调整为返回JSON格式的接口，前端路由完全由React Router控制，组件内通过fetch/axios调用Sails接口获取数据渲染。
• 第四步：部署时可选择两种方式：一是将React构建后的产物全部放到Sails的assets/目录，配置Sails路由 fallback 到React的index.html即可；二是将React产物单独部署到静态服务器/CDN，和Sails后端服务完全独立部署。

迁移注意事项 #

• 建议采用灰度迁移策略，先从单个非核心页面开始替换，验证逻辑通顺后再逐步覆盖全量页面，降低迁移风险。
• Sails原有接口逻辑基本无需修改，仅需要将原返回渲染HTML的逻辑调整为返回JSON数据即可，原有权限校验、参数处理逻辑都可以复用。

内容的提问来源于stack exchange，提问作者Avinash