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
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
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.
build directory can now be uploaded to Pinata.
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
Which leaves only the DNS configuration. Routing a domain to an IPFS CID using DNSLink requires two DNS records:
CNAMErecord mapping a host to
TXTrecord that contains the
dnslinkstring specifying the CID
This is the toy token swap's DNS configuration. I've added an
ALIAS record to map the domain apex to
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: