Interfacing With UniswapV2Router02: 5 ― Deploying to IPFS

At last, when the app is 'finished' enough to be published, and the optimized webpack build is ready, the InterPlanetary File System awaits. We could of course just upload the build directory to any old web server, but since we are doing things the DApp way, we may as well go for an IPFS deployment. It turns out to be quick and easy too, since we're using

This saves us setting up and maintaining our own IPFS node. There are solutions like Fleek that allow for continuous deployment to IPFS from a GitHub repository, but since this toy token swap is going to be a deploy-and-forget case, I chose the Pinata/Cloudflare route.

As always, there are a few details that need to be taken care of. Firstly, and not really needed in this case, because I'm going to serve the app from the root of a dedicated domain, but still not a bad idea, just in case I'd like to access it through some gateway URL some time, is to set homepage to the current directory in package.json:

{
// ...
"homepage": "."
}

This is to let create-react-app know it ought not assume the app to be served from the root, so there won't be any trouble accessing it through

https://cloudflare-ipfs.com/ipfs/QmZfzvmbyL7ebg9s3YYfwmnjVv2c4T38R1uteF1m3Y7umT

That's the deployed app's actual CID. As you can see, the app doesn't care if it's served from /ipfs, or from the root at https://myopicmanoeuvre.cyou, which just routes to the same gateway URL using a DNSLink record.

The other thing we want to do at build time is not to generate a sourcemap. Loading from IPFS can be a bit slow, especially when the files aren't in Cloudflare's cache, and when I checked build/static/js, the largest sourcemap was 2.8M. Clearly unacceptable to be loading this when there's no use for it anyway. Generating them can be suppressed by building using

GENERATE_SOURCEMAP=false yarn build

on the command line, or putting GENERATE_SOURCEMAP=false in a file named .env in the project root.

The build directory can now be uploaded to Pinata.

Pinata upload button

After successful upload, the CID for the directory shows up in your list of pins. The deployed app can now be accessed through the gateway URL of shape https://cloudflare-ipfs.com/ipfs/<CID>.

Which leaves only the DNS configuration. Routing a domain to an IPFS CID using DNSLink requires two DNS records:

DNS configuration

This is the toy token swap's DNS configuration. I've added an ALIAS record to map the domain apex to www so https://myopicmanoeuvre.cyou may be used to access the app. Note how this requires two dnslink records: one for the apex (_dnslink), and another one (_dnslink.www) for the www host so the domain can still be resolved through IPNS when www. is prepended for some reason. The DNSLink string is the same for both: dnslink=/ipfs/<CID>.