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 in IPFS. Our setup features a short-lived node, that is online only for a short period of time — until our deployment is finished — by successfully pinning our files with Pinata. (pinned) IPFS 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 for the pinning part, while the final example can be seen . pinata-sdk 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 , where we can run our deployment scripts. development container 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 , and displays a greeting message when build successfully. You can find the actual app and the deployment script at reason-react 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 folder. build/ 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 — The IPFS pinning service. Which allows us to our files in the p2p file sharing network. Pinata pin (read: persist), We’ve built our app in the previous step, and as a result we’ve got the folder, that should get deployed to the IPFS network to make our app available for others to use. build/ PinataSDK provides an example on how to do that rather easily, trough Pinata’s API. pinHashToIPFS We will use a simple deployment script, the . But we’ll walk through it in the tutorial. original source code can be found here 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 . Then head to once logged in. You’ll see your API keys there. here the account section Those are your API keys. Save your keys under in your editor. [examples/deployment-dapp-frontend/credentials.js](https://github.com/maht0rz/pinata-sdk/blob/master/examples/deployment-dapp-frontend/credentials.js) Deployment script Before we run the existing deployment script, which you can find at , let’s walk through what it does. [examples/deployment-dapp-frontend/deploy.ts](https://github.com/maht0rz/pinata-sdk/blob/master/examples/deployment-dapp-frontend/deploy.ts) Import all the needed dependencies Define where our target build folder resides, so we can deploy it Configure the with our two api keys pinata-sdk Start a local IPFS node using , and wait for it to for a predefined amount of time js-ipfs warm up (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 component, so we can be sure our deployed app, is really the one we have built locally. [src/Welcome.re](https://github.com/maht0rz/pinata-sdk/blob/master/examples/deployment-dapp-frontend/src/Welcome.re) Once we’ve done that, we can run our deployment script using . After the script finishes, it will output the IPFS hash pinned at Pinata, which we can use to view our website. npm run deploy 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 .

Dapp

Target

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Deploying a DAPP’s frontend using IPFS and Pinata SDK

Too Long; Didn't Read

Companies Mentioned

Matej Šima

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Deploying a DAPP’s frontend using IPFS and Pinata SDK

Too Long; Didn't Read

Companies Mentioned

Matej Šima

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES