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 🐳
We’ll use docker to reduce the environment setup hassle, let’s start by cloning the SDK’s repository.
Our repository features a pretty simple Dockerfile, which looks roughly like this
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.
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.
You can build the app as shown below.
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.
- 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.
- 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.
- 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.
Save your keys under
examples/deployment-dapp-frontend/credentials.js in your editor.
Before we run the existing deployment script, which you can find at
examples/deployment-dapp-frontend/deploy.ts, let’s walk through what it does.
- Import all the needed dependencies
- Define where our target build folder resides, so we can deploy it
- Configure the
pinata-sdkwith our two api keys
- 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)
- 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.
- 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 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.
You can see my deployment at: http://gateway.pinata.cloud/ipfs/QmNTrW433oWNG3iL3AqWjssJ88FLy3a4UL8Pkt6pnYDtzU/
Got any questions? Trouble running the examples? You can reach out to me on telegram at t.me/maht0rz.