Building a full stack web3 app with Next.js, Polygon, Solidity, The Graph, IPFS, and Hardhat
The video for this tutorial is also availa...
For further actions, you may consider blocking this person and/or reporting abuse
Thanks Nader, this is epic! Looking forward to giving this a run through.
Btw, dev.to pro tip: If you use
jsx
instead ofjs
for the code blocks with React code you'll get better syntax highlighting.Even better with
tsx
@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
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.
Thanks, I would have never finished the tutorial without your comment
Same, Thanks!
but my error persists..
Thanks for comprehensive piece.
But let me clarify coooouple of details. Maybe I misunderstood something
Here I have first real questions
Post storage post
means in smart contract code?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 throughfetchPosts
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
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
postCreated
, `postUpdatedPost
model and store it (in the graph?)About grpah itself
In general.
Couple of answers to myself
Side thoughts
You forgot that every logo on Web3 websites need to be a jpg monkey :)
That's the whole thing of web3 — solve what's already solved, but now with blockchain
It seems like that, because you'd need a the use case when fetching data and getting fetched in turn, what is, you need a business purpose to that. Let's say you provide a good, someone else a service that converts your good into a product, which is then getting incentified. Simple view but cashflow is the driver.
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.
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
Umm, I just wanted to say - you are awesome! Thank you for the guide.
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.
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.
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
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
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.
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...
execute command “git config --global url."https://".insteadOf ssh://git@”, then try again
Hi! same problem here, did you fix it?
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
Web3 programmers are professionals who work on designing decentralized applications based on Web3 technology. Hire Web3 developers who understands the principles behind Web3, are knowledgeable about the pertinent programming languages, and has the appropriate tech stack to support their development work.
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
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.
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.
Need install git:
pkg install git
dev.to/cryptomak/comment/1m26m
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.
You just need to cd into the blogcms folder and run all commands from there
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?
connect your metamask wallet first
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?
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");
it is most likely on your hardhat config file, try to make sure the network address and accounts array is visible to that file.
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.
Awesome guide, thanks alot
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.
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.
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.
maybe the address you are using isn't connected, first make sure your address says "connected" on metamask
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??
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.
Awesome guide, Thanks 👏👏👏
This is very well written. Thank you!
omg you're the best. I've been subscribing to various coding websites & just discovered this.
goods
amazing post.
still too lazy to get started today.
{...}
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?
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
Awesome tutorial, thanks. Great starting point for Web3 development.
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]?
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
sucks to suck
I'll be coming back to this post for sure.
Thank you for the amazing tutorial!
Thanks Nader for putting this together!
I am unable to view the cover image while viewing the post. what to do?
You Sir are a Total class act :) I take a bow!
Thank you Nader! This tutorial is extremely relevant, eye opening, informative and to the point. Thank you!
hello @dabit3, metamask cannot fetch the chainId 80001 for the step 'configuring the network'. what can i do
Layer 1 with no Cardano and Terra? Both are too 10
glad to found this , such a helpful post , you're great. vashikaran specialist in Coimbatore
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!
Thanks, Great content.
Awesome Guide, thanks
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.
I have a error..
import "@openzeppelin/contracts/utils/Counters.sol";
I couldn't find the Counters.sol file. please help me!
Amazing one Nader. The Graph section was specially useful!
私は日本のエンジニアです!
投稿に感謝します!
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
Thanks for wonderful tutorial!
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.
or you can use
export NODE_OPTIONS=--openssl-legacy-provider
and it will be fixed in v17Thanks Nader. This is super helpful 👏👏