Shopify app with reactjs and nodejs without nextjs?

自闭症网瘾萝莉.ら 提交于 2020-03-05 05:05:15

问题


I am developing a shopify app so the reactjs handles the UI part and node-express handles the shopify auth things.

The tutorials in shopify site are

  1. node, react and nextjs
  2. node and express without reactjs

My concern is how to test the app without reactjs server side rendering with nextjs?

As we know node and react runs one seperate ports, so how can we handle the authentication flow with shopify?

How I am trying to work is

User enters app -> Node authenticates with shopify -> if auth success -> show react app.

Update : I am using ant design so ssr of ant design will be helpful.

Anyone please help me out with a solution.


回答1:


It wouldn't be too difficult, you'd just have to set up Server Side Rendering with Express/Node in order to get react working. Next.js does this automatically saving you the time, but if you would like to do it yourself you can always.

You can follow this guide for reference - https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a

I'll do up my own example in a bit since I'm looking to do the exact same thing.




回答2:


After some research I got a simple solution and I am adding the links that give me solution.

  1. React App is running in port 3000
  2. Node server running in port 3001
  3. Setup proxy in client package.json to localhost:3001

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

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

  5. Next, create src/setupProxy.js and place the following contents in it:

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

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

6. That's all.

If using ngrok to make your localhost public, you may get Invalid Host Header error. Here is the solution.

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

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

This 2 link gave me the solution.

  • 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



来源:https://stackoverflow.com/questions/54820976/shopify-app-with-reactjs-and-nodejs-without-nextjs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!