使用 reactjs 和 nodejs 而没有 nextjs 的 Shopify 应用程序?

IT技术 node.js reactjs shopify antd shopify-app
2021-05-01 12:36:03

我正在开发一个 shopify 应用程序,所以 reactjs 处理 UI 部分,node-express 处理 shopify auth 的事情。

shopify 网站中的教程是

  1. 节点,react和nextjs
  2. node 和 express 没有 reactjs

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

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

我的工作方式是

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

更新:我正在使用 ant design,因此 ant design 的 ssr 会有所帮助。

任何人都请帮助我解决问题。

2个回答

经过一番研究,我得到了一个简单的解决方案,我正在添加提供解决方案的链接。

  1. React App 运行在 3000 端口
  2. 运行在 3001 端口的节点服务器
  3. 在客户端设置代理package.json到 localhost:3001

    {
        proxy: "localhost:3001"
    }
    
  4. 安装 http-proxy-middleware

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

  5. 接下来,在其中创建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://stackoverflow.com/a/45494621/1445874

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

这不会太难,您只需要使用 Express/Node 设置服务器端渲染即可使react正常工作。Next.js 会自动为你节省时间,但如果你想自己做,你总是可以的。

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

我稍后会做我自己的例子,因为我想做完全相同的事情。