带Reactjs和NodeJS而不带NextJS的Shopify应用程序?

时间:2019-02-22 06:03:44

标签: node.js reactjs shopify antd shopify-app

我正在开发shopify应用程序,因此reactjs处理UI部分,而node-express处理shopify身份验证事情。

shopify网站中的教程是

  1. 节点,反应和下一个js
  2. 节点,不使用reactjs进行表达

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

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

我试图工作的方式是

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

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

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

2 个答案:

答案 0 :(得分:0)

这并不太困难,您只需要使用Express / Node设置服务器端渲染即可使反应正常进行。 Next.js这样做会自动节省您的时间,但是如果您想自己动手,可以随时这样做。

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

因为我想做完全相同的事情,所以我会做一点自己的例子。

答案 1 :(得分:0)

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

  1. React App在端口3000中运行
  2. 在端口3001中运行的节点服务器
  3. 在客户端package.json中将代理设置为本地主机: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个链接为我提供了解决方案。