如何将 create-react-app 与提供 index.html 的后端一起使用？

Question

我有一个在https://localhost:8080上运行的后端 API 服务器

以及在https://localhost:3000上运行的前端

在后端，我有一个/路由，它提供一个index.html文件。

我想要完成的是这样设置，这样当我使用npm start编写前端代码时，我会收到 create-react-app 实时重新加载的好处。

但问题是 index.html 文件在调试模式下看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src='%PUBLIC_URL%/js/axios.min.js'></script>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

当我在.env文件中使用npm run build with PUBLIC_URL=https://localhost:3000构建应用程序时会好一点，但即使如此，因为服务器没有运行，所以无法引用文件（我也是而不必在每次更改之间手动运行该命令）

这超出了 create-react-app 的范围吗？ 我不确定要使用的正确捆绑设置，因此我使用 create-react-app，但不是从前端托管 index.html 文件，而是从后端提供它（这样我就可以在它）。

Answer 1

你不会以这种方式在 React 中使用后端。

React 是用于简化前端开发的 UI 框架。

服务器 API 用于与数据库交互并检索和存储数据，还用于托管用于发出 POST、GET、PATCH、DELETE 等请求的路由。 您可以在后端使用模板渲染引擎通过模板解构器静态渲染和提供一些动态加载的内容的 HTML 页面，但是据我所知，这与 react 的操作方式不兼容。 通常，与反应前端一起使用的后端将用于连接数据库和反应组件状态。

听起来您需要做的是将静态 html 页面转换为 JSX 并通过反应组件呈现它并使用后端（如果您仍然需要一个）来传递页面所需的任何数据，或者您可以创建一个基于服务器的纯 Web 应用程序，它使用模板引擎来提供静态 html 页面。

如果您确实需要将数据从服务器发送到前端，您还应该更新 package.json 文件以包含具有 api 地址的代理

"proxy": "http://localhost:8000/",

如何将 create-react-app 与提供 index.html 的后端一起使用？

问题描述

1 个解决方案

解决方案1
-3 2020-01-05 21:49:09

如何将 create-react-app 与提供 index.html 的后端一起使用？

问题描述

1 个解决方案

解决方案1 -3 2020-01-05 21:49:09

解决方案1
-3 2020-01-05 21:49:09