Shopify app with reactjs and nodejs without nextjs?

问题

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