React app blank on ipfs gateway but functional on localhost

Help
1

As the title suggests, I am trying to launch my react app on IPFS and pin it with crust network. I have successfully built and uploaded the build file and when testing on local install of IPFS I can use localhost and access my app as intended. localhost:8080/ipfs/.

When i try and use a gateway though, I get a blank screen and these issues in the console.

image
image909Ă—216 16.5 KB

I am very new to IPFS in general but I have done a lot of reading and research and can’t seem to pinpoint where I am going wrong.

the end goal here is to do this in a decentralised manor and that is why I am not using pinata or fleek. Any information or help would be appreciated. thanks (:

2

Seems that you use path gateway, which is not intended for loading websites.
Your app fails because it loads scripts from / instead of /ipfs/{cid}/ root.

See:

Try replacing cloudflare-ipfs.com with cf-ipfs.com which is a subdomain flavour.

2 Likes
3

thank you for the response (: that did indeed load my webpage! I am struggling to understand why though. What do you mean by path gateway? I did read the links you sent and to be honest they are a little over my head.

Is this something I set wrong when uploading or a react config? Thank you for your response (:

4

You’re using root-relative pathing, like /yourpath (e.g. I see “chips3” in your error message).

You need to use relative pathing, so that when things are loaded at e.g. cloudflare-ipfs.com/ipfs/SOMEHASH that chips3 gets loaded relative to your root hash.

I did a search and found this article React tips — Working with relative path using create-react-app | by Leonardo Bruno Lima | Medium – I don’t really know react, but relative paths – e.g. ../../../chips3 (or whatever) is the pattern you’ll need to follow so your stuff loads in whatever kind of IPFS gateway it is running on.

TLDR;

  • there are “path gateways”, which load at example.com/ipfs/YOURHASH
  • or “subdomain gateways”, which load at YOURHASH.example.com

When you are setting up react, since it’s built for the regular web, it needs to know what directory it is loading from.

Pinata or Fleek or anyone else that persists IPFS is not more or less decentralized – they just commit to keeping your content online and/or map a _dnslink to it so you can visit it with a regular domain name. You can ignore this part, just commentary :slight_smile:

2 Likes
5

Thank you so much for the thoughtful response. I really enjoyed that article and am starting to understand what is going on here. Sorry, lots of moving parts and they haven’t quite clicked yet.

I did however find a comment on a random stackoverflow that mention something about react-router-dom needing to use HashRouter instead of BrowserRouter. I don’t know what but that worked and now everything is seamless. I never thought react-router-dom could be the issue. Glad its sorted though. Thank you (:

2 Likes