IPFS with React: Loading IPFS Assets from Your Distributed IPFS Gateways

How to access IPFS assets geographically and load them in React apps

IPFS, a distributed filesystem, offers a more decentralised way of storing and delivering web assets. This article explores how to integrate IPFS with React by fetching content from an IPFS gateway and loading those assets into React. To make the experience streamlined, the assets will be lazy loaded and faded in. But before we do this, your IPFS gateway and hosting VPS needs to be configured correctly. We will cover how to do this.

If you have not explored IPFS but wish to deploy it in alongside your React apps, then read my introduction on IPFS before continuing this article:

Introduction to IPFS: Run Nodes on Your Network, with HTTP Gateways

The above article focuses on setting up IPFS nodes on your own VPS, and then configuring a gateway to serve IPFS hosted assets. It acts as a necessary fundamental introductory to IPFS; it will get your nodes set up quickly and efficiently.

We will build upon this setup, and make our IPFS nodes serve assets more securely. Particularly, what we will cover is:

• Setting up and NginX proxy pass to direct visits from http://<your_ip_address>/ipfs to your IPFS gateway. By doing this we are no longer required to include port 8080 (or whatever port your gateway is configured to).
• Configuring NginX with SSL and domain name. Here we will further enahnce the NginX configuration, by adding a domain name, SSL and enable GZIP. At this point we’d have the ability to access IPFS content with the format http://<your_domain>/ipfs/<hash_to_content>.
• CORS control with IPFS, to only allow your domains to access your IPFS node gateway.
• Loading IPFS assets in React. From here, loading IPFS assets such as images and SVGs is very straight forward; all we need is the URL with an IPFS content hash. To ease the content in we will be using React LazyLoad and a React GSAP wrapper to animate the assets in once…