使用 Express 创建反应应用程序答案

【问题标题】：create-react-app with Express使用 Express 创建反应应用程序
【发布时间】：2017-06-16 13:40:34
【问题描述】：

我需要查询一个数据库，我正在使用create-react-app。连接数据库的库 (pg-promise) 不适用于 Webpack，需要在 Node 服务器上运行。

所以我安装了 Express 并得到了这个：

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
})

如何从 React 页面加载数据库中的数据？我虽然使用request，但我怎样才能向我自己的服务器发出请求？我应该在上面的代码行中添加什么？我想应该是这样的：

app.get('/query/:querybody', (req, res) => {
  // process and return query
})

这是对的吗？如何使它与 SPA 一起使用？

【问题讨论】：

如果你想在 Reactjs 中使用全栈，试试这个：mern.io
实际上我需要快速修复，但谢谢！

标签： node.js reactjs express create-react-app pg-promise

【解决方案1】：

可能最无摩擦的方法是在您的 CRA 应用程序旁边添加一个单独的 app.js 或 server.js。你可以使用concurrently 之类的工具来运行你的 React 应用和 express 应用。

诀窍是在与 CRA 提供服务的默认 :8080 不同的不同端口上提供您的 express 应用程序。通常 8081 是一个不错的选择，因为在开发过程中使用靠近的端口号是一个常见的约定。

在您的 React 应用程序中，您需要确保使用 express 端点的完整 URL：http://localhost:8081/query/...

【讨论】：

或者他可以在Webpack中设置代理。 create-react-app 支持这一点。 here is an example

【解决方案2】：

在服务器端，您正朝着正确的方向前进：您需要设置端点，该端点将根据请求响应数据。在您的示例中，您为 GET HTTP 请求设置了一个端点。如果您需要传递复杂的请求（例如向数据库添加新记录），请考虑使用 POST HTTP 请求。

在客户端（在浏览器中），您需要一个库来帮助您向服务器发送请求。我可以推荐尝试 Axios (https://github.com/mzabriskie/axios)。通常如果你省略协议、服务器名称和端口，请求将被发送到加载页面的服务器： http:127.0.0.1:8001/api/endpoint => /api/endpoint

【讨论】：