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

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

Install NginX and Configure Proxy Pass

#install nginx
sudo apt update
sudo apt install nginx
sudo systemctl status nginx
#open firewall ports
sudo ufw allow 'Nginx Full'
sudo ufw status
server {
listen 80;
listen [::]:80;
server_name <your_ip_address>; #IPFS proxypass
location /ipfs {
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8080$uri;
}
}
sudo service nginx restart
http://<your_ip_address>/ipfs/QmW2WQi7j6c7UgJTarActp7tDNikE4B2qXtFCfLPdsgaTQ/cat.jpg

Adding SSL and a Domain (and GZip)

server {    listen 80;
listen [::]:80;
server_name <your_domain> www.<your_domain>;
return 301 https://<your_domain>$request_uri;
}
server {
listen 443;
listen [::]:443;
#configure SSL ssl on; ssl_certificate /etc/nginx/ssl/domain.ca-bundle;
ssl_certificate_key /etc/nginx/ssl/domain.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 10m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
resolver 127.0.0.1;
ssl_stapling on;
ssl_stapling_verify on;
ssl_trusted_certificate /etc/nginx/ssl/domain.ca-bundle;
server_name <your_domain> www.<your_domain>; #configure GZIP gzip on;
gzip_vary on;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml image/gif image/jpeg image/png image/tiff image/vnd.wap.wbmp image/x-icon image/x-jng image/x-ms-bmp image/svg+xml image/webp
gzip_disable "msie6";
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.0;
#configure IPFS proxypass location /ipfs {
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8080$uri;
}
}

The Proxy Pass

sudo service nginx restart
https://<your_domain>/ipfs/QmW2WQi7j6c7UgJTarActp7tDNikE4B2qXtFCfLPdsgaTQ/cat.jpg

Adding CORS Control to IPFS

ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["<your_domain>"]'ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "GET", "POST"]'ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials '["true"]'
{
"API": {
"HTTPHeaders": {
"Access-Control-Allow-Credentials": [
"true"
],
"Access-Control-Allow-Methods": [
"PUT",
"GET",
"POST"
],
"Access-Control-Allow-Origin": [
"<your_domain>"
]
}
},
...

Restart IPFS for these changes to take effect

sudo supervisorctl restart ipfs

Loading IPFS Assets in React

<img src="https://<your_domain>/ipfs/QmW2WQi7j6c7UgJTarActp7tDNikE4B2qXtFCfLPdsgaTQ/cat.jpg" />

Where to Fetch IPFS Assets?

App -> Gateway -> IPFS Delivery -> App

Method 1: Environment variables

REACT_IPFS_GATEWAY_URL = https://<your_domain>/ipfs/
<img src={`${process.env.REACT_IPFS_GATEWAY_URL}${record}`} />
<img src={`${process.env.REACT_IPFS_GATEWAY_URL}QmW2WQi7j6c7UgJTarActp7tDNikE4B2qXtFCfLPdsgaTQ/cat.jpg`} />

Method 1: Backend Service Request

The Haversine Formula

on = lon2 - lon1 
dlat = lat2 - lat1
a = (sin(dlat/2))^2 + cos(lat1) * cos(lat2) * (sin(dlon/2))^2
c = 2 * atan2( sqrt(a), sqrt(1-a) )
d = R * c (where R is the radius of the Earth)

Conclusion

Further Considerations

Programmer and Author. Director @ JKRBInvestments.com. Creator of LearnChineseGrammar.com for iOS and Android.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store