带有 reactjs 和 nodejs 的 Shopify 应用程序没有 nextjs？

Posted 2023-02-25

【中文标题】带有 reactjs 和 nodejs 的 Shopify 应用程序没有 nextjs？

【英文标题】：Shopify app with reactjs and nodejs without nextjs?

【发布时间】：2019-07-16 04:29:45

【问题描述】：

我正在开发一个 shopify 应用程序，因此 reactjs 处理 UI 部分，而 node-express 处理 shopify auth 事情。

shopify网站的教程是

node、react 和 nextjs 没有 reactjs 的节点和表达

我关心的是如何在没有 reactjs 服务器端渲染的情况下使用 nextjs 测试应用程序？

我们知道 node 和 react 运行一个单独的端口，那么我们如何使用 shopify 处理身份验证流程？

我的工作方式是

用户进入应用程序 -> 节点使用 shopify 进行身份验证 -> 如果身份验证成功 -> 显示反应应用程序。

更新：我正在使用 ant design，所以 s-s-r of ant design 会有所帮助。

请大家帮我解决一下。

【参考方案1】：

这不会太难，您只需要使用 Express/Node 设置服务器端渲染才能让 react 正常工作。 Next.js 会自动为您节省时间，但如果您想自己做，您可以随时进行。

您可以按照本指南进行参考 - https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-s-s-r-code-splitting-setup-9da57df2040a

我稍后会做我自己的例子，因为我想做同样的事情。

【参考方案2】：

经过一些研究，我得到了一个简单的解决方案，我正在添加给我解决方案的链接。

React App 正在端口 3000 中运行 节点服务器运行在 3001 端口

在客户端 package.json 中设置代理到 localhost:3001

    proxy: "localhost:3001"

安装http-proxy-middleware

$ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware

接下来，创建src/setupProxy.js并将以下内容放入其中：

const proxy = require('http-proxy-middleware');

module.exports = function(app) 
  app.use(proxy('/api',  target: 'http://localhost:3001/' ));
;`

6。就是这样。

如果使用 ngrok 公开你的本地主机，你可能会收到Invalid Host Header 错误。这是解决方案。

ngrok http 8080 -host-header="localhost:8080"
ngrok http --host-header=rewrite 8080

https://***.com/a/45494621/1445874

这 2 个链接给了我解决方案。

When specified, "proxy" in package.json must be a string

https://create-react-app.dev/docs/proxying-api-requests-in-development#configuring-the-proxy-manually

【讨论】：

嘿@CaptainZero 我知道你已经有一段时间没有解决这个问题了。你知道我对如何在我的节点服务器（使用 Koa）中处理身份验证并返回到 react 应用程序感到有点困惑。你还记得你最终在那里做了什么吗？你知道我是否需要按照教程所示在反应应用程序中处理身份验证吗？谢谢！

是的@fabricio，我所做的是进行身份验证并从节点生成令牌并传递给反应，该令牌用于执行所有经过身份验证的任务。