使用没有 nextjs 的 reactjs 和 nodejs 的 Shopify 应用程序?
Shopify app with reactjs and nodejs without nextjs?
我正在开发一个 shopify 应用程序,因此 reactjs 处理 UI 部分,而 node-express 处理 shopify 授权。
shopify 站点中的教程是
- node、react 和 nextjs
- 没有reactjs的node和express
我关心的是如何在没有 reactjs 服务器端渲染的情况下使用 nextjs 测试应用程序?
我们知道 node 和 react 运行一个单独的端口,那么我们如何处理 shopify 的身份验证流程?
我的工作方式是
用户进入应用程序 -> 节点使用 shopify 进行身份验证 -> 如果身份验证成功 -> 显示反应应用程序。
更新:我正在使用 ant design,所以 ant design 的 ssr 会有所帮助。
谁能帮我解决一下。
这不会太难,您只需要使用 Express/Node 设置服务器端渲染即可让 React 正常工作。 Next.js 这样做会自动为您节省时间,但如果您想自己做,您随时都可以。
您可以按照本指南进行参考 - https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a
稍后我会做我自己的例子,因为我想做完全相同的事情。
经过一些研究,我得到了一个简单的解决方案,我正在添加 link 给我解决方案。
- 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 使您的本地主机 public,您可能会遇到 Invalid Host Header
错误。这是解决方案。
ngrok http 8080 -host-header="localhost:8080"
ngrok http --host-header=rewrite 8080
这 2 link 给了我解决方案。
When specified, "proxy" in package.json must be a string
我正在开发一个 shopify 应用程序,因此 reactjs 处理 UI 部分,而 node-express 处理 shopify 授权。
shopify 站点中的教程是
- node、react 和 nextjs
- 没有reactjs的node和express
我关心的是如何在没有 reactjs 服务器端渲染的情况下使用 nextjs 测试应用程序?
我们知道 node 和 react 运行一个单独的端口,那么我们如何处理 shopify 的身份验证流程?
我的工作方式是
用户进入应用程序 -> 节点使用 shopify 进行身份验证 -> 如果身份验证成功 -> 显示反应应用程序。
更新:我正在使用 ant design,所以 ant design 的 ssr 会有所帮助。
谁能帮我解决一下。
这不会太难,您只需要使用 Express/Node 设置服务器端渲染即可让 React 正常工作。 Next.js 这样做会自动为您节省时间,但如果您想自己做,您随时都可以。
您可以按照本指南进行参考 - https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a
稍后我会做我自己的例子,因为我想做完全相同的事情。
经过一些研究,我得到了一个简单的解决方案,我正在添加 link 给我解决方案。
- 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 使您的本地主机 public,您可能会遇到 Invalid Host Header
错误。这是解决方案。
ngrok http 8080 -host-header="localhost:8080"
ngrok http --host-header=rewrite 8080
这 2 link 给了我解决方案。
When specified, "proxy" in package.json must be a string