Hosting a Custom React Storefront which uses Shopify Storefront API

[Perfactorial]

So, I have a Shopify store which was completely based in Shopify. I used a custom domain for my shop. For a while, I have been thinking of a CUSTOM storefront for my shop. So I created a REACT app which utilized the Shopify Storefront API. Basically, now I have two stores, one is the old shopify store on my custom domain. And the second one is a React App on my localhost. I wanted to host my React app on the same domain which I have created the old shopify store. However, in the React app, I used the storefront api client object which uses the domain of my old store to retrieve the list of products and display them in my React app. Now, if I try to host that react app on that same domain using some hosting service, such as Hostinger, I get error messages in the client object that it is unable to retrieve any data. Upon checking in Shopify, I saw that upon hosting my domain on Hostinger, it lost its connection with the shopify store. Hence, I tried to connect the domain, let us assume shop.com with shopify. Now my react app is hosted on shop.com using Hostinger and my old store is on shop.com too in shopify. As I changed my A, AAAA and CNAME records to connect it with shopify, so that my react app can access my store products, it led the domain to show my old store again instead of the new react app hosted on hostinger. How do I display only my new React App on shop.com and make it capable of reading my store items too at the same time. What should be the procedure for that?

[chicku97]

Hi Perfactorial,

I hope you might have figured it out by now.

Based on my understanding, Hostinger does not provide support to host React websites by default on their hosting except for VPS where in you setup your own server. So first thing is a either get a server and configure it accordingly or use hosting providers like Netlify, Vercel.

With regards to your domain not pointing to the new website, You need to point your domain by changing the A record in the DNS records to the server where your frontend is hosted.

Regards,