Deploying a DAPP’s frontend using IPFS and Pinata SDK

This article will walk you through deploying your first DAPP, or more specifically it’s frontend part, through IPFS with help of Pinata — the IPFS pinning service.

What are we building?

By the end of this article, you’ll be able to take your single-page frontend app, and host it within the Inter Planetary File System (IPFS) network.

What is Pinata used for?

In our scenario, we’ll use Pinata, to keep our files alive (pinned) in IPFS. Our setup features a short-lived IPFS node, that is online only for a short period of time — until our deployment is finished — by successfully pinning our files with Pinata.

Pinata offers a free tier up to 1GB of pinned data

Which frontend frameworks can we use?

In theory, any. As long as they provide a static file output like Angular, React or Vue does, most likely through webpack or any other modern bundler.

Setting up the environment 🐳

Our deployment script is gonna use pinata-sdk for the pinning part, while the final example can be seen here.

We’ll use docker to reduce the environment setup hassle, let’s start by cloning the SDK’s repository.

Clone the pinata-sdk repository

Our repository features a pretty simple Dockerfile, which looks roughly like this

Make sure to use the latest version from your locally cloned repository

Let’s spin up a development container, where we can run our deployment scripts.

This will build an image using the Dockerfile we’ve seen previously, and start an interactive bash shell where we will continue with our example.

Interactive shell started successfully

Now that we have a nice and uniform development environment, let’s move forward.

Building the frontend app 🛠

Our app is generated with reason-react, and displays a greeting message when build successfully. You can find the actual app and the deployment script at pinata-sdk/examples/deployment-dapp-frontend.

How the app should look like if build successfully

You can build the app as shown below.

Webpack output in case of a successful build

Result of the build steps above, can be found at the build/ folder.

Now that we know how to build our frontend app, we’re ready to deploy it using our deployment script.

Deploying to the IPFS Network

Our app will be hosted via the IPFS Network, let’s walk through what that means in practice.

1. For files to be accessible on IPFS, someone has to initially serve them. That’ll be our deployment script / local IPFS node. If our app is popular, it will get distributed through other IPFS nodes, which essentially makes our app decentralized.
2. Trick here being that we don’t want to create any extra infrastructure ourself, meaning that we don’t want to host our IPFS node, in order to make our files available permanently.
3. Solution to our infrastructure problem, is Pinata — The IPFS pinning service. Which allows us to pin (read: persist), our files in the p2p file sharing network.

We’ve built our app in the previous step, and as a result we’ve got the build/ folder, that should get deployed to the IPFS network to make our app available for others to use.

PinataSDK provides an example on how to do that rather easily, trough Pinata’s pinHashToIPFS API.

We will use a simple deployment script, the original source code can be found here. But we’ll walk through it in the tutorial.

Pinata API Keys

We’ll start by registering an account with Pinata (or logging in if you already have one) so we can use the service for our deployment.

You can register your account here. Then head to the account section once logged in. You’ll see your API keys there.

Those are your API keys.

Save your keys under [examples/deployment-dapp-frontend/credentials.js](https://github.com/maht0rz/pinata-sdk/blob/master/examples/deployment-dapp-frontend/credentials.js) in your editor.

Deployment script

Before we run the existing deployment script, which you can find at [examples/deployment-dapp-frontend/deploy.ts](https://github.com/maht0rz/pinata-sdk/blob/master/examples/deployment-dapp-frontend/deploy.ts), let’s walk through what it does.

1. Import all the needed dependencies
2. Define where our target build folder resides, so we can deploy it
3. Configure the pinata-sdk with our two api keys
4. Start a local IPFS node using js-ipfs, and wait for it to warm up for a predefined amount of time (e.g. 3 minutes)
5. Once the node is warmed up, add our build folder to it. This will essentially allow anyone in the IPFS network, to view our build files under their hash, which is generated by IPFS as a stamp over our content.
6. Finally, ask Pinata, to pin our content, given it’s hash, and turn off our local IPFS node. Our content will now still be available, even though our local IPFS node is not online/running anymore

Let’s deploy our DAPP

First let’s edit out [src/Welcome.re](https://github.com/maht0rz/pinata-sdk/blob/master/examples/deployment-dapp-frontend/src/Welcome.re) component, so we can be sure our deployed app, is really the one we have built locally.

Once we’ve done that, we can run our deployment script using npm run deploy. After the script finishes, it will output the IPFS hash pinned at Pinata, which we can use to view our website.

Deployment successful!

The Result

You can see my deployment at: http://gateway.pinata.cloud/ipfs/QmNTrW433oWNG3iL3AqWjssJ88FLy3a4UL8Pkt6pnYDtzU/

Your very own DAPP’s frontend, deployed on the IPFS network

Got any questions? Trouble running the examples? You can reach out to me on telegram at t.me/maht0rz.