Most decentralized applications (dApps) are not fully decentralized because their frontend code is deployed to centralized servers like AWS or Google Cloud, creating a central point of failure; IPFS (InterPlanetary File System) provides a decentralized storage solution where files are distributed across a peer-to-peer network, ensuring the application remains accessible as long as at least one node hosts it, and platforms like Fleek simplify the deployment process by handling the technical complexities of IPFS integration.
Deploy Frontend to IPFS: Decentralized DApp Hosting Guide
Added:hi did you know that most of the self-proclaimed daps decentralized applications on the internet are actually not 100 decentralized while the smart contracts are decentralized as they're on the blockchain the front-end code which is the UI code user interface code that interacts with the smart contracts are often not decentralized at all because they're deployed to centralized servers such as AWS Google Cloud Azure Etc hi I'm KP and today on etherblocks we're gonna learn about how we can deploy our front-end code to a decentralized files for its service like ipfs short for interplanetary file system foreign oftentimes even if the smart contract is deployed on the blockchain you likely won't be storing huge files in large data sets on the blockchain because it is rather expensive to do so for example if you're building an nft project you will not be storing the actual image on the blockchain but rather only a hash that points to some external system so one such decentralized storage solution you can utilize is ipfs short for interplanetary file system where your files are sufficiently decentralized and as long as there's at least one ipfs node that has your file your file will live forever so what you'll likely be doing is storing the large data file on ipfs then storing the hash of that ipfs data on the blockchain and then your front end code will then point to retrieving the actual data using the ipfs link this is a very common practice so you should likely look into using ipfs if it makes sense to do so apart from using ipfs to store large data you can also store your actual dap that consists of the front-end code to ipfs typically you'll host the front end app on centralized service platforms like AWS Google Cloud Azure Etc so without further Ado let's see how we can do this there are many online platforms that let you deploy your files to ipfs but for this video we're going to be using Fleek because of its Simplicity and the fact that you can deploy your front-end code to ipfs in a matter of minutes so let's first create our react app by doing npx create Dash react Dash app and then I'm going to name it deploy front end to ipfs and then do npm start to see what our react application does it's a very standard react application it doesn't really do anything other than a simple page so you can go to localhost colon 3000 in your browser to check it out next we'll need to cover or sorry next we'll need to update our package.json file by adding in the field home page so you need to put a dot for the field home page which will make it so that the page will also work on ipfs gateways whose uh whose URLs are in the format slash ipfs slash hash that's it you can make any changes you want to the code if you want but for this example we're just going to use the starter react app now let's go to fleek.co and sign up for an account I am going to sign in um instead of signing up because I already have an account with them and so after signing in what you need to do is click on add new site connect to GitHub repository if you haven't and then input additional information um there like the repo Branch repository branch that you plan to use uh the build commands and the build directory for the framework we're going to use create create react app and for the docker image I'm going to use node 16.18 version and so to do that is node colon 16.18 but if you want to use a different version of node you totally can um just go over to registry.hub um uh registry dot um what is it yeah registry.hub.docker.com node to see the different Docker images that are available to be used then click deploy site now the deployment will take a few minutes and after it's done you'll see that it was successful um if you go to the top of the page because it should say uh with a green Mark that says verify on ipfs and also um it'll have a link for you to open up where your app is hosted so what Fleek does is deploys your site to the URL that ends with dotfleek.co but that is really pointing to the ipfs hash you can check out this Hash ipfs Hash of your front-end code that you just deployed by going to overview tab if you encounter any errors during deployment or just anything else related to Fleek be sure to check out the awesome video that talks about how to troubleshoot uh deployment on fleek in the link provided down below now you may be wondering how you how you would open up your app using the ipfs hash on the browser for that you will need to use one of the gateways available such as ipfs.io that is by protocol Labs or cloudflare.ipfs.com or even inferior they all have their public ipf as a gateways that you can utilize the reason that you want to use a gateway to view your ipfs deployment like your app is because not all the browsers provide native support of ipfs yet so gateways provide workarounds for applications so what ipfs gateways do is they expose files living in the ipfs Via HTTP so anyone can open it from any browser you may be wondering why you you why we used a platform like Fleek for our app deployment to ipfs well why didn't we just run our own ipfs node and then deploy ourselves well it you could do that but there are some hurdles there um like if you want to if you want to go that route for one ipfs accesses the files via a peer-to-peer Network um which means that if you put your app onto your own ipfs node I'm not using Fleek um and then shut your ipfs node down no one can access your app via a public Gateway like inferior or ipfs.io or something else because the Gateway looks for your file hash in the peer-to-peer Network and the only one currently having that is you and then your node is shut down so no one can access your app so platforms like Fleek and inferior make sure to pin the files so that your application never goes down if you don't trust them though you can you can deploy your own ipfs network and then host app yourself this is what it means to decentralize the front end whereby there is no centralized point of failure as long as there is at least one node hosting your app your app will continue to live forever and ever hope this helped you get started on how to deploy your own front-end code to ipfs see you in the next one [Music]
Up Next

Rust Programming Basics: A Complete Beginner Tutorial
@BekBrace
17.4K views•2022-05-21

BitTorrent Protocol Explained: Piece Selection & Peer Choking
@StevenGordonAU
481 views•2013-02-22

HTTP Requests Explained: GET, POST, PUT, DELETE
@codecademy
103.1K views•2021-10-07

Enigma Machine Mechanics: WWII Encryption Explained
@JaredOwen
13.2M views•2021-12-11
Related Study Plans & Knowledge Roadmaps
Structured learning paths in Computer Science





![Curso de React para Completos Iniciantes [2026]](https://i.ytimg.com/vi/2RWsLmu8yVc/maxresdefault.jpg)
































