Shopify App With Reactjs And Nodejs Without Nextjs?

- 1 answer

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.



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

This 2 link gave me the solution.