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

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

Image for post
Image for post

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 ChineseGrammarReview.app for iOS.

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