DEV Community

Cover image for The Complete Guide to Full Stack Web3 Development

The Complete Guide to Full Stack Web3 Development

Nader Dabit on February 10, 2022

Building a full stack web3 app with Next.js, Polygon, Solidity, The Graph, IPFS, and Hardhat The video for this tutorial is also availa...
Collapse
ajcwebdev profile image
ajcwebdev

Thanks Nader, this is epic! Looking forward to giving this a run through.

Btw, dev.to pro tip: If you use jsx instead of js for the code blocks with React code you'll get better syntax highlighting.

Collapse
justynclark profile image
Justyn Clark

Even better with tsx

Collapse
cryptomak profile image
CryptoMak • Edited on

@dabit3
Thanks for share first post that I will follow to start learning web3.
good to have my first contract deployed

Some errors that I detected and fixed.

1.Please add in the prerrequisites, that you also need to install git, if not the npm install command will fail for the @walletconnect/web3-provider

  1. In the "viewing a post" section, you put " create a directory named posts" the s is incorrect. The directory need to be in singular just "post" if not view and edit post will fail.

For the moment I'm only in that step. I will put more feedback later if needed.

Hope in the future you can post some article for LUNA/TERRA blockchain.

Collapse
luismartinezs profile image
Luis Martinez Suarez

Thanks, I would have never finished the tutorial without your comment

Collapse
silc22 profile image
Silvana Trinidad Cerquatti • Edited on

Same, Thanks!
but my error persists..

Collapse
philosoft profile image
Alexander Frolov

Thanks for comprehensive piece.

But let me clarify coooouple of details. Maybe I misunderstood something

  • smart contract is basically a core backend. Since it services CRUD (create, read, update, delete) operations. Without delete in this case.
  • smart contract is a piece of solidity code, which lives inside blockchain
  • smart contract describes everything - data (entities. blog post only in our case) and logic (data manipulation)
  • smart contract stores base data - map of post ids to ipfs hash and vice versa.

Here I have first real questions

  • What does Post storage post means in smart contract code?
  • Where all this data is actually stored? Let's say I have 10k posts in my blog. That's 10k pairs id => string and another 10k pairs of string => id. Where are they stored exactly? Inside blocks of blockchain? Does it mean that this "array" will be scattered across huge amount of blocks? And every consecutive call on fetchPosts will be literaly slower and more expensive every day, since physically, data will be distributed across many-many-many blocks?

The whole "data on blockchain" thingy means I (as an author of a blog) will need to pay (quite literally) for each action - create/update post?
Also that means that there is no point (aside from using grpah later) in published field, since every post will be accessible through fetchPosts method of a smart contract. Is that correct?

Actual data of blog post is a JSON file put up on IPFS. Which brings a next set of questions

  • I edit my post 1k times, I will upload 1k json-files to IPFS, which makes every draft accessible to everyone who knows the hash
  • 1 edit = 1 transaction
  • 1 transaction means I need to pay for it
  • 1 transaction also means that it will be in blockchain "forever" and since every transactions is public, so as a blog (smart contract) address, then everyone can see the list of transactions and therefore whole 1k of json-files (hashes in IPFS)
  • there is absolutely no guarantee that my blog posts will be there after a couple of months. if nobody will fetch them and/or pin them on their IPFS nodes, that means that chunks of my json-files will be marked as "useless grabage" and will be deleted on next node clean up. is that correct?

There is no pagination for this blog. So if I have 100k posts they all will fetched and displayed at once at one page.

Deploy via deploy.js deploys only smart-contract? What about all other js? Where it will be stored? Where from and how user will download that? How user will be able to access this blog via browser? I can do that from dev env with proper prod config and I can even post there. But who and how will read it?)

Subgraph part. So we

  • "listen to contract events" - postCreated, `postUpdated
  • go to IPFS to fetch latest json
  • populate Post model and store it (in the graph?)

About grpah itself

  • how it is stored internally?
  • how it provides fulltext search capabilities?
  • does it support multiple languages in one text?
  • does it support multiple languages at all?
  • every save costs something? isn't it? transaction fee or something
  • every query costs something? or not?
  • how do you even integrate this graph into blog?
  • what about "reindexing" or indexing first time after I already have 1k posts?
  • how reliable is that?
  • how fast?

In general.

  • if I want to support images inside posts not only cover. I will need to come with format (inside json) and store them on IPFS? What about reliability? thumbnails? different sizes and different types (png, jpeg, webp...)
  • where does the real frontend lives? how user will get js/css/html?
Collapse
philosoft profile image
Alexander Frolov

Couple of answers to myself

  • yup. smart contract is a core backend in solidity
  • storage - stores info on-chain. memory - while executing a function
  • yup. blog @ blockchain means I need to pay for every action that I want to be permanent - creating/editing posts in this example
  • yes. each edit is a new json-file in ipfs.
  • you still need a real domain name with real server to serve js and stuff
  • ipfs is slow

Side thoughts

  • amount of "e-waste" (waste of storage, electricity, cpu, bandwidth...) on ipfs is tremendous
  • there are no real guarantees that your content will be available in couple of months (on ipfs)
  • amount of "e-waste" on blockchain is mind-boggling. "history of every action" is no small thing and it's ever growing
  • there is no real concept of "deleting something" from ipfs or blockchain. enter endless pool of moderation problems
  • smart contracts are complex and error-prone (as all software basically; and solidity is still far from version 1.0). have trouble reading documents? now try to read code ;)
  • blockchain by itself is very old idea (~50 years). there is nothing new really.
  • private chains have their limited applications in very specific conditions (because in general all the same problems could be solved by a set of agreed upon APIs)
  • web3 is ~20 years old. and it was about semantic web, not "dApps"
  • "web3 stack" and technology landscape decades behind of what we have now in "traditional web" in every aspect ........
Collapse
larsonnn profile image
Lars Feldeisen

You forgot that every logo on Web3 websites need to be a jpg monkey :)

Collapse
imthedeveloper profile image
ImTheDeveloper

Great run through of the stack. I've been deploying some clones of other projects for a while and battled through countless hours of gotchas that you've captured here and resolved.

Bringing in components like the graph in this example really shows how you can scale.

Collapse
t0nyba11 profile image
Tony B

Nice guide, but this really makes me never want to work with this approach ever if something so simple, already running in nodejs anyway, is so complex for so little benefit. Get off my lawn :)

Collapse
alekseiberezkin profile image
Aleksei Berezkin

That's the whole thing of web3 — solve what's already solved, but now with blockchain

Collapse
luismartinezs profile image
Luis Martinez Suarez

If you're on linux and this command doesn't work:

npx hardhat run scripts/deploy.js --network mumbai

Try appending the pk env var like so:

pk=_paste_here_your_private_key_ npx hardhat run scripts/deploy.js --network mumbai

Collapse
dappdappgo profile image
DappDappGo

An incredibly good article.

If you don't have anymore ideas for new articles, think about how to test chainlink vrf contracts. All my tests fail because it's an external function call.

Collapse
sokirill profile image
Kirill

Umm, I just wanted to say - you are awesome! Thank you for the guide.

Collapse
hjgraca profile image
Henrique

Thanks for the great article and detailed steps. But really is all this necessary? Looks like a big step back to what we have been doing in "web2". Again thanks for sharing.

Collapse
danielsimao profile image
Daniel Simão

I don't think this would be necessary for a normal blog post, but for what he is trying to teach, it's a really good concept, in which you are able to learn file storage, indexing and querying etc...

In the end, believe web3 will replace some parts of web2.

Cheers

Collapse
stephd profile image
DepSteph

Why stacks has to be harder and more complicated or complex.
Once its was html-css +js.

Now its already 10+ framework to pick front-end and/or back-end. Not yet include the between both library..

Tomorrow will be all of this? :-(
So overwhelming and re-inventing the wheel

Collapse
timmysmalls profile image
timmysmalls

It's really cool to see all these things in action, but I don't have a full grasp yet of when I'll actually need this. I understand that this is just an example, but I don't know when I would use a blockchain for decentralized hosting.

Collapse
silc22 profile image
Silvana Trinidad Cerquatti • Edited on

Hi everyone!
My error persist when i'm trying to install "npm install --save web3 @walletconnect/web3-provider"

npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -4058
npm ERR! enoent An unknown git error occurred
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

I have tried everything... can anyone help me?
I can go ahead with this.

Collapse
0xdhaval profile image
dhaval.eth
Collapse
leefan0 profile image
LeeFan0 • Edited on

Need install git:

pkg install git

Collapse
xinxinatg profile image
Xinxin Peng • Edited on

Thanks for this thorough walk through! When deploying the localhost, the create post button next to home could not appear. I have double checked all the steps, it is the same as what you presented in the blog. Would you mind helping me figure out what might be the issue? Screenshot

Collapse
0xdhaval profile image
dhaval.eth

connect your metamask wallet first

Collapse
robmehrtens profile image
Mehrtens

Hello, this is a great tutorial. Has anybody experienced issues with npm i @walletconnect/web3-provider? All other packages install fine, but this one errors out on git code ENOENT. Not finding the issue. This has me stopped as I cannot connect to Matic network...

Collapse
silc22 profile image
Silvana Trinidad Cerquatti

Hi! same problem here, did you fix it?

Collapse
jalins profile image
jalins

execute command “git config --global url."https://".insteadOf ssh://git@”, then try again

Collapse
pavelloz profile image
Paweł Kowalski • Edited on

Thats a lot of work to get almost nothing done. :) I will stay away from this for sure. This dev workflow looks like made for masochists.

Collapse
ikjudd profile image
Ian Judd

hm.. about halfway through the piece (after building out index.js) I started getting this error when I try to run dev

Error: could not detect network (event="noNetwork", code=NETWORK_ERROR, version=providers/5.5.3)

Any ideas on how to resolve this?

Collapse
simeongavalyugov profile image
SimeonGavalyugov

I had the same error - for some reason new ethers.providers.JsonRpcProvider() wasn't recognizing the network running so I had to pass the url explicitly i.e

new ethers.providers.JsonRpcProvider("127.0.0.1:8545");

Collapse
akupsmee profile image
Ikenna Blaise Akupuome • Edited on

it is most likely on your hardhat config file, try to make sure the network address and accounts array is visible to that file.

Collapse
girl_d3v profile image
Brittany

Hello, would anyone be able to help me? I'm suck on initializing a new subgraph, when trying to add my ABI path, terminal outputs "File does not exist". I've tried typing it out and dragging directly from the location. I can't seem to find the answer for this.

Any help is appreciated.

Collapse
akupsmee profile image
Ikenna Blaise Akupuome

You just need to cd into the blogcms folder and run all commands from there

Collapse
nickfazzpdx profile image
Nicholas Fazzolari

Wow, the complexity is impressive. This looks like it will be very difficult to maintain over time, and having to find engineers familiar with all these frameworks and libraries could be a real challenge. I'm all for learning new technologies and concepts, but whew this is a lot.

Collapse
danielsimao profile image
Daniel Simão • Edited on

Thanks Nader for this post! I found some things that went wrong on my side.

npx hardhat test was failing with:
TypeError: Cannot read properties of undefined (reading 'getContractFactory')

Fixed by removing the following from tests/sample-test.js:
const { ethers } = require("hardhat");

And adding the following to hardhat.config.js:
require("@nomiclabs/hardhat-waffle");

Cheers

Collapse
lukeb profile image
lukeb

This is awesome! Is the directory restructure in the repo you linked typically how combine a full stack web3 repo with everything at the top level? I've been debating on moving things around but haven't settled on anything yet

Collapse
darahask profile image
Darahas Kopparapu • Edited on

why const provider = new ethers.providers.Web3Provider(window.ethereum) is used in create-post where as provider = new ethers.providers.JsonRpcProvider('rpc-mumbai.matic.today') is used to get a post??

Collapse
utilitycoder profile image
Utilitycoder

Thanks for the guide, Nader. I have a newbie question. I can't seem to figure out why my wallet isn't connecting. I get a "error: TypeError: Cannot read properties of undefined (reading 'provider')" in my console while trying to debug.

Collapse
akupsmee profile image
Ikenna Blaise Akupuome

maybe the address you are using isn't connected, first make sure your address says "connected" on metamask

Collapse
demetrakopetros profile image
Petros Demetrakopoulos

A really nice library that can be used in any Web3 stack is EthairBalloons. It is a strictly typed ORM library for Ethereum blockchain. It allows you to use Ethereum blockchain as a persistent storage in an organized and model-oriented way without writing custom complex Smart contracts. It is available for installation via npm.

Collapse
rod_o profile image
Rod O

Deploying to Polygon
I had problems in the step deploying to Polygon

I requested 1 MATIC from Faucet
In metamask I would see .5 MATIC
I'd start but I would get "INSUFFICIENT_FUNDS"
In metamask I would see 0.079 MATIC now
Refresh and I'd see 0 MATIC
At this point I don't understand:
1) Why don't I see ~1 MATIC show after requesting it.
2) If my network didn't start, why does the MATIC disappear from my test account.

I repeated this several times, then eventually I was successful starting - I think the only thing different is I started it up immediately after receiving the .5 MATIC -- and now I see 0.473 MATIC in my account - and it doesn't disappear when I refresh.

Collapse
rod_o profile image
Rod O

Guessing that this address is shared, probably by anyone who is using this tutorial - and others have left something running so they chew up the MATIC's from the account. Still don't really understand why 1 is requested and .5 goes to the wallet.

Collapse
samueladex profile image
Samuel Adex

Awesome guide, thanks alot

Collapse
ben profile image
Ben Halpern

I'll be coming back to this post for sure.

Collapse
maxyou profile image
Hongyu You

The contract function updatePost( ) has a line: idToPost[postId] = post;
What does it do? Does it really needed?
If we should remove hashToPost[old_hash]?

Collapse
pachverb profile image
new/bird

goods

Collapse
__shradz profile image
shradz.eth is in nyc • Edited on

npx hardhat run scripts/deploy.js --network mumbai

when i try to deloy ^^ it hangs for a long time and does not compile. Did anyone else face this? what should i do

Collapse
afozbek profile image
Abdullah Furkan Özbek

Thank you for the amazing tutorial!

Collapse
awguo profile image
John

amazing post.

still too lazy to get started today.

Collapse
gelato profile image
Gelato Network

Thanks Nader for putting this together!

Collapse
nancybennetts profile image
Nancy Bennetts

Awesome guide, Thanks 👏👏👏

Collapse
rodiwa profile image
RD

This is very well written. Thank you!

Collapse
hanayezi profile image
Hannah Vile

omg you're the best. I've been subscribing to various coding websites & just discovered this.

Collapse
mass59 profile image
Masoud Shokohi

{...}

Collapse
nebulahh profile image
nebulahh

i am always getting this error

00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'deploy'

when i run yarn deploy. what else can i do?

Collapse
rangercoder99 profile image
RangerCoder99

Please just stop with this web3 stuff it's just one spam 😔 it's not web 3.0 or does it got anything to do with the official workgroups... just son corporate play to make tons of money

Collapse
lukeb profile image
lukeb

sucks to suck

Collapse
arome_dev profile image
Abraham Onoja

Thanks Nader. This is super helpful 👏👏

Collapse
divee789 profile image
Divine Olokor

Good Tutorial.

If you are having network issues on running the nextjs app at first, try and downgrade your node version to 16.0.0 and below.

Collapse
philosoft profile image
Alexander Frolov

or you can use export NODE_OPTIONS=--openssl-legacy-provider and it will be fixed in v17

Collapse
xcanchal profile image
Xavier Canchal

Amazing one Nader. The Graph section was specially useful!

Collapse
iidajun profile image
JI

私は日本のエンジニアです!
投稿に感謝します!

Collapse
nebulahh profile image
nebulahh

hello @dabit3, metamask cannot fetch the chainId 80001 for the step 'configuring the network'. what can i do

Collapse
lucianboboc profile image

Layer 1 with no Cardano and Terra? Both are too 10

Collapse
emiliootten profile image
EmilioOtten

glad to found this , such a helpful post , you're great. vashikaran specialist in Coimbatore

Collapse
liongg profile image
Leandro Esteban Galvan

Hi, thanks for the guide. I have a mistake maybe someone can help me.
Failed to compile
./pages/_app.js:9:0
Module not found: Can't resolve '../config'

I'm obviously a newbie!

Thanks!

Collapse
breugemalan profile image
Alan Breugem

Awesome Guide, thanks

Collapse
sokijaja profile image
Sokari Andrew-jaja

Thanks, Great content.

Collapse
0xdhaval profile image
dhaval.eth • Edited on

I am unable to view the cover image while viewing the post. what to do?

Collapse
demostenesbr profile image
Demóstenes Muniz Brito

It's a burn in my heart! Thanks for sharing your post, I note relevant links for studying combinated with the comments on this post.

Collapse
nebulahh profile image
nebulahh • Edited on

I am supposed to add an assemblyScript mapping to src/mappings.ts but there is no such file in src/. the file there is blog.ts. should i update the blog.ts with the provided assemblyScript

Collapse
karthik2502 profile image
Karthik Nagarajan

You Sir are a Total class act :) I take a bow!

Collapse
frejandreassen profile image
Frej Andreassen

Thank you Nader! This tutorial is extremely relevant, eye opening, informative and to the point. Thank you!