🚀 Get started building Web3 apps with Cloudflare

Hey, everybody. I'm Jon Kuperman. I'm a developer advocate here at Cloudflare, and I'm joined today by Kristian, who is on my team, and we're talking about Web 3 and the cool project that we built here at Cloudflare. Hey, Kristian. Hey. I am super excited to be here. Good. Yeah, me too, me too. It's been a fun week so far. Yeah, so we're kind of doing like a Cloudflare TV takeover for the next hour is how I guess I've been referring to it in my head. But first 30 minutes, we're going to cover the project that we built, which is a complete open source, like start to finish NFT application using all kinds of cool Web 3 stuff that we're going to cover. And then the second half an hour is going to be an interview with Nader Dabit, who is a developer advocate at Edge and Node and super smart guy who is the person that got me introduced into Web 3 and has helped a lot of people kind of understand the space. So definitely check out that as well. That'll be half an hour from now. So yeah, the purpose of this stream is going to be kind of walking through the project that we made and any kind of interesting insights. And in particular, I don't know, Jon, if you have the same experience as me, but as a developer getting into Web 3 and just kind of understanding the space, there was a lot of things, like just a lot of things I didn't understand. There was a lot of tweets that I would read and I'd be like, okay, it seems like a big deal, like seems like Web 3 is transformative or whatever. But as a developer, I was always like, what is like, show me the code kind of right. And that's what this is. The purpose of this project is, is really showing you the code. Yeah, absolutely. And yeah, it's fun. It's like, there's just so much movement. There's like so much going on so many new things, you know, there's not a lot of like, you know, kind of blessed technologies. So it's like, you know, it's just, it's, it's, it's, yeah, it's a little wild. But yeah, it was a lot of fun working on this project. So yeah, to get into it. Cool. So let me share my screen. And we'll just kind of walk through everything. So, so basically, we have a blog post, get started building Web 3 apps with Cloudflare that we wrote that went live earlier today. And not only does it cover, you know, like what the application is that we built, which of course, we'll spend a lot of the stream walking through. But I think it's a pretty good look at, again, answering that question that I was talking about, which is like, what does Web 3 actually mean for developers? You know, it's one thing for like, PMs and sort of like marketing people to tackle this question. But for developers, like, I think it's, in a lot of ways, it was very surprising. Honestly, there was things that were not as like, hypey as I thought they were going to be, you know, like some at the end of the day, a lot of is still just like HTML and CSS and JavaScript. There are some things that are very, very different, though, obviously. And so this blog post covers that and has all kinds of, you know, analogies and, and even a great, where did it go here, I'll scroll down, we have a great sort of architecture diagram of understanding, not just how, how this project works, but in particular, like, where the pieces of it are in your stack. So pages, you know, has this kind of set of things that it does, workers has a surprisingly, like central role in all of this. And then of course, there's the Ethereum blockchain, which does a lot of the sort of heavy lifting and, like, cryptographically secure things that are above my pay grade. Yeah, is there anything else on the blog post, John, you think we should mention? No, I think that's it. Yeah, just kind of like walking through our adventure into, into like understanding some of this tech and kind of building these things out and then finding cool, like uses where, you know, some of these free Cloudflare products make it a lot easier. Yeah. Cool. So I think probably the way to do this is, we're going to kind of show from start to finish how this project works, and then we'll jump into the code. There's kind of three distinct pieces of the code base that we'll try and walk through. And if we have time, we'll try and cover all of them. But to start, maybe let's just walk through how this project works. So basically, if you aren't familiar with the concept of NFTs, it's a thing called a non fungible token. And the idea is that a non fungible token is a unique digital asset that can be owned by someone in their Ethereum wallet or their Solana wallet or whatever blockchain you're using. So we deployed a, an NFT, this is like the ERC 721 spec is like the official specification for how an NFT works. And in that code, which we'll show you, we said, okay, there are a maximum of 2048 of these tokens. And as someone with a wallet who wants to interact with that program, I can come in here and I can do what's called minting a token, which means basically claiming ownership of that token. How am I doing so far? No, you're doing awesome. I think like, you know, NFTs are obviously, it's like brand new, there's a lot of hype around them. They're a little bit hard to understand their value. But I think like one way that I look at them, and this might be not entirely correct, but it's almost like you wanted to start a community or a company or a business or anything like that. And like, you wanted to go to crypto route and like make your own coin, let's say, but that's like a lot of work, right? Like if you wanted to make your own coin. So like one thing you could do that's a lot easier is you could just build an NFT contract on an existing coin like Solana or Ethereum or something like that. So you're basically like, you're coming on, you're saying, this is our project. There's only 2048 total of these in existence. They each, you know, represent ownership. So it's sort of like an initial like coin offering kind of thing, but like an initial NFT offering. It's like one way I like to think about it. Yeah. And I think often the NFTs that are sort of popular right now, they're called like the PFP NFTs, which is Profile Future NFTs. And so what you'll see is that each of them, say, hypothetically, there's like 10,000 NFTs that are available to be minted. Each of those kind of has unique properties. And a lot of the time they'll have like unique rarities and stuff. So there's a lot of interesting stuff going on in that space. One thing that we talked about with Nader in our interview that is going to be airing after this is the idea, kind of what you're talking about, of NFTs as sort of a membership to some sort of community. So for instance, he has a project called DeveloperDAO. And in order to enter the DeveloperDAO, which is a decentralized autonomous organization, you mint one of these sort of membership NFTs. And I don't, do you remember how many there are? There's probably like 7,000-ish or something like that. I think there are like, yeah, 7,000 or 8,000, something like that. Yep. Right. And so the way that the smart contract works, which we'll get into in a little bit is there is like a hard cap at 2048. You can deploy additional contracts after the fact to say, if you want to mint another NFT, but for this specific program, there is only 2048 or for Nader's DeveloperDAO, there's 7,000 -ish. Once those are minted, say once the minting process is like sold out, you basically, that's where you see like trading and stuff like that going on, where someone wants to pay, I don't know, a thousand Ethereum for one of our Cloudflare NFTs. So that's kind of the basics there. I think- Yeah, I think that's great. That was something that I didn't understand at first, just to recall it out, is that there's a difference between minting, which would be like actually generating the token for the first time. And then after they're minted, you can start selling and trading them. Like if people have seen like OpenSea or something like that, those are for already minted tokens. That was just a difference I didn't understand at first. Yeah, absolutely. So I think the way that we're going to show how this works is really like minting live on stream. So basically the only requirement here is that you have MetaMask installed, which is this add-on right here. MetaMask is an Ethereum wallet, which can you see that by the way? I don't know if add-ons- Yeah, it does work. Probably just making sure. So basically you can store Ethereum or Ethers, I think is the like technical, like the currency, but you're interacting with the Ethereum blockchain. So you can store currency in this wallet and you can also use it to transact on the blockchain. So in this example, we're using the Rinkby test network. So I don't actually have 18 .85, literally like, what is it? Like $100 ,000 or something like that. It's a lot of money. I don't have that much money in this wallet. This is using the test network. And I'll show you actually how to get this Ethereum so that you can play. I need to say Ethers, I guess. It's not Ethereum, it's Ethers, which I'm not used to. But basically there's this concept of the faucet for testing stuff using the Rinkby test network. You can go get some currency and then you can interact with transactions just like you would in production. So maybe we'll go do that right now. Maybe that seems like a good place to start. So I believe it is rinkby .io. Yep, that looks right. And what we're going to do here is we're going to go to the side and go to the crypto faucet. So again, I guess I should, just to clarify, once you have MetaMask installed, it's just a Chrome extension. You want to come up here and go to Rinkby. That's the specific test network that we're using. And then what you need to do, kind of hilariously enough, is make a social media post to verify that you're not a bad actor, or at least not a spammer, and get some Ether. So what I'm going to do here is- Yeah, so if you've seen people in your Facebook or Twitter timeline just tweeting out random long hashes or whatever this might be, they might be devs building on this stuff. Exactly. It's like a classic rite of passage for a Web3 development. So I'm going to come here and I'm going to click this button right here, which is just going to copy this wallet address. And then what I'm going to do, there's a couple of different ways to do this. You can actually just write a tweet with your wallet address and paste it in here. I like to come here and just click this Make a Tweet. Actually, I'll make this a little bit bigger. Nope, it doesn't zoom. It's probably an iframe or something. So I'm going to click this Make a Tweet button, and it's going to set up this little example tweet here. So requesting faucet funds, and then I'm just going to paste in my wallet ID. So it's saying requesting faucet funds into blah, blah, blah, blah on the Rinkby Ethereum test network. So I'm going to post that, and then I'm going to go to my profile. I'm going to grab that tweet. So the tweet URL here, and then in the Rinkby faucet page, I'm just going to paste this in and say, give me ether. Let's do a big one. Why not? It'll be fun. 18.75 ethers. Funding request accepted. Sorry if the text is kind of small here, but if I open this up, it'll either be pending or it'll complete really quickly, which is the fun thing about working with test networks is they tend to be a little bit faster than production. So if you started with zero Ethereum because you just installed MetaMask, you need to definitely do this process. For me, it was just to kind of walk through how it works. Is there anything I'm missing there? No, I think that's everything. But just for folks that are watching, when we get into the code repo itself, this is all documented in the readme, so you should be able to just go there and not have to write it all down right now. Right. Cool. So we come back here. So we're connected to Rinkby. We have some test ethers to play with, and now we can actually mint something. Wow. 241 out of 2,040 have been minted. Holy smokes. That's just people that have been playing with our app today since we launched. John and I launched it at maybe 20-ish had been minted this morning. So what I'm going to do is I'm going to click the mint button here, and this is going to open up MetaMask to authorize a transaction. We'll show you what this code looks like. This is pretty crucial in the sort of flow of how all this stuff works, but basically to just sort of parse this out. So this is your cost of transaction you're doing, which is actually zero. Oh, this one's not showing. Maybe because it's not secure. Yeah. So I guess folks will have to see this at home. Yeah. It will open the Chrome extension, but it's, yeah, I think for security reasons it's not showing up on the screen. Makes sense. Okay. Thank you for telling me. Yeah. So basically it's just a confirmation page that says how much money you're going to spend, and then there's also going to be a gas fee, which is the sort of fee of doing the transaction. In this case, it's 0.000231 ethers, which is pretty cheap. Sometimes with the Ethereum blockchain and production, that's not the case. So definitely make sure that you check how much money you're spending, if you're spending real ethers on something, speaking from experience there. So I'm going to confirm that transaction. Sorry, you can see that, but you'll see transaction processing here, and then it's going to take a little bit for that to happen. It's literally writing a new transaction onto the blockchain. In the meantime, if I open this up, you can see that here in my queue, there is this mint token action, and it looks like it just completed. So now it says you've minted NFT. If you haven't already, add a new asset to MetaMask using the below info. So maybe I'll walk through this as well, just while we're here. But what I'll do is delete this old one just so you can see it from start to finish. So basically, there is a contract address. How would you describe the contract address? It's kind of like a unique ID for the program, right? Yeah. It's really interesting because I think coming from other APIs, centralized APIs, everything is so transparent here. Literally every mint, every trade, all of it is completely viewable. Who minted it from what wallet? What else do they have? It's all very, very, very transparent. Totally. Yeah. Yeah, absolutely. So I'm going to come here into MetaMask, into assets. I'm going to say add token. I'm going to paste in this contract address that I already filled in the symbol, and then your token decimal here is going to be zero. It's pretty standard for NFTs. I used to remember what the explanation is here, but I can't remember now. I think it's something to do with the fact that it's an NFT. There's no... Actually, I do remember what it is. You can't break NFTs into decimals like you can with fungible tokens. So you can have 0.5 Ethereum. You can't have 0.5 of an NFT. So yeah. Let's add that. You can see I have 12 CFNFTs right now, and then I can view it as this particular asset. And I actually can see specifically all the transactions for this unique asset versus my account globally. So then the last thing here is if you are logged in as a user, you can see I'm logged in with my wallet. You can see all the tokens that you own. So I do own number zero, which is our very first NFT, which is exciting, but I own all kinds of other ones here too. If John were to log in on his wallet, he would see his NFTs. Right now, all of these images are the same. This is something we've talked about as potentially making this more interesting. And this is maybe a cool exercise for the reader if you want to learn how to go do that. I think the code is very extensible in that way. But yeah, that's pretty much the basics of the front end UI. Is there anything that I missed? Yeah. I was just going to show... If you click on one, it'll take it... Now that they're minted, if you can click on one, it'll take it to OpenSea, which is a public marketplace. So you can see the stats. Obviously, this one's on the test network. It's on OpenSea's test net, but you could just imagine that somebody making offers on it. We've been selling them to each other in the Discord using fake money. Then the other thing I just wanted to mention is that before we get into the code, it's a little tricky because there's two different maybe new things for folks here. One is interacting with the blockchain in general. So we'll get into that stuff, contracts and the chain. But the other thing is that we're interacting with a Chrome extension. So there's two bits there. Some of the code is specific to how you interact with Chrome plugins, and then some of it's blockchain-specific. So yeah, just wanted to cover those things. Absolutely. Yeah, that's a really good callout. So should we hop into the code now? Yeah, let's do it. Great. So you can find this at github.com slash Cloudflare slash cfweb3. And like I said at the beginning, there are kind of three distinct parts to this project. So the first is the contract itself. So this is like the Ethereum smart contract, including some testing, like unit tests and stuff like that, and then some scripts for deploying the smart contract. The second is the front end itself. That's what we were just looking at. So that's all of this code to render this UI, but then also to interact with MetaMask and to mint tokens, or I guess a better way to phrase that is to connect to the smart contract and call the mint token function on that program. And we'll walk through that as well. And then finally, we have a Cloudflare Workers function. So one thing I guess I'll just mention off the top is that I was kind of, the usage of Cloudflare Workers function here may be kind of surprising to people because it turns out that all NFTs kind of require JSON API to back the metadata for it. And so that includes the name, which is this CFNFT number zero and the description, which we could fill in to be something more detailed, as well as a link to the actual asset, which is this image here. So all of this happens via JSON API, which is written in Cloudflare Workers. It's pretty straightforward. It's like, I don't know, 20 lines of code or something like that. But we'll walk through that as well. Yeah. So do you want to, John, you maybe want to just like tell me where to go and we'll navigate through the code and kind of walk through where to start. Yeah, I think maybe starting with the contract, just kind of like the, this is like the initial thing that you would have to do when, you know, kind of creating any kind of new blockchain project. So maybe you want to talk a little bit about the creation of the contract? Yeah. So this uses a tool called Hardhat, which is kind of some nice, kind of like command line interactions around working with Ethereum programs. And also has like a whole plugin ecosystem for things like deployments and stuff like that. This is pretty standard. I think I literally just initialized this like using NPX Hardhat. Though there was some inspiration from the developer DAO smart contract, which I've worked with before and made kind of a fork off of to try and deploy my own. Yeah. Like it's really cool because, you know, like I think a lot of folks do really cool open source stuff, right? So it's like somebody will make a cool app and they'll open source it. And then if you know where to look, you can go find the GitHub for it or whatever. But like, one thing that's really cool about these is like they are by nature, like forcibly open source, right? So like if anyone is deploying these contracts, you can very, very easily use a tool like Ether scan and go find the contract and read all the source code from it. So it's like really fun. Like we used a lot of stuff from developer DAO, but then Natter used a lot of stuff from some other project for developer DAO. So it's like very, like everything is forced to be open source, which is kind of cool. Totally. Yeah. It's, it's a really interesting, I mean, you can go and see what functions are being called and even how those functions are being implemented. If there's something that you find interesting that you would want to make use of in your own project, which is, it's like hyper open source. It's interesting. It's a different kind of world there. That was like one big difference I noticed right away. So jumping into the contract itself. So it's written in Solidity, which is Ethereum's programming language. It is, I guess the best way to describe it as sort of JavaScript-esque. Yeah. I think it's like another thing where it's big opportunity for web devs, for folks that are coming from a Node or a JavaScript or TypeScript background. I know sometimes projects when their backends are like C++ or Rust or something like that can be very intimidating, but I was shocked at how easy it was to get up to speed and start being productive with Solidity stuff. It was really, really easy. Yeah. It is pretty straightforward. And we can kind of walk through the sort of key functions here. This content mix-in basically just gives you the ability to call this message sender. It's just some kind of helper code. The bulk of this here is the CFNFT contract. We actually make use of a tool called Open Zeppelin, which is kind of like same templates for Ethereum contracts in particular, like avoiding a lot of security things that I don't have the experience to kind of avoid on my own, right? So it basically provides this ERC -721 preset. In this case, I actually use this MinterPoser auto ID that gives you a lot of extra functionality that's really helpful. And then there's just some other things you can kind of opt into here. This ownable, which means that someone owns this contract. And then this context mix -in, which lets you use this message sender function. So really, I know we're kind of, what are we at? 1221. So I'm going to keep it moving. The kind of high -level stuff here I think that's worth knowing is first this max tokens constant, which again, you can take any of this and change it, right? So let's say you have a project and you want to take it and you want to make 10 max tokens, or you want to make it 10,000 or whatever. You can change this to suit your needs. I thought 2048 was kind of a, what is that? Is that like two to the 10, two to the eight? Something like that. But again, just to be clear, you can change it to 10 and deploy your own, but the crucial bit is that this contract now deployed cannot be changed. Sure. That's a good, yeah, that's a good call out. Yeah. So if you fork this and make your own entity, but like you can't go and suddenly decide that our contract has 10,000 max tokens. Right, exactly. Yeah. So there's just some helper variables here. Really, I'm going to kind of jump through here quickly. Two things I think are really important. One is this minted event. So there's actually built in sort of eventing solution inside of Solidity, which is awesome. This is like when a token is minted and then some parameters that you can pass into it. You'll see how that works here a little bit later. And then also the mint token function. And this is probably the most crucial function in this entire contract. It basically allows you to say how many tokens you want to mint and then the address, which is your wallet address to indicate where those tokens are going to go. So there's a couple of checks here for things like if the sale is starting, if you try and obviously mint something less than zero, that won't work. I guess you can mint zero tokens though. I'm looking at this code and realizing that. So if someone wants to try and do that, well, maybe don't try and do that. I'm scared what will happen in our UI. But our quantity here is, can't exceed three. So you can mint up to three tokens. And then finally, you can say here if the total supply plus quantity is going to be, oh, it's, oh, right. I'm reading this wrong. So if as long as the total supply plus quantity is less than max tokens, you'll still be able to mint. After that, you're going to get this pulldown message. And for folks that have been doing NFTs before, a lot of this probably looks familiar that you've seen in documentation or like on the website. Like they'll be like, hey, our thing launches at this time. And each person can only mint this many as a, you know, all these things. So like for folks that have already participated in NFT launches before, like this will probably just be a good explainer for how that, how that stuff is actually in place. Like how that stuff is actually set in the code. And then the other thing I wanted to mention right above the mint function. So like people maybe talk a lot about like on chain and off chain stuff. So it's like important that the, like the, on the blockchain itself, the open source, like immutable chain, when you get an NFT or when you access an NFT, what you will get back is this URI, right? Like you'll get back this link. And then this link though, is, is considered off chain. It's not in the immutable blockchain. So this is a link to the worker, which we can look into. But this is the last, the last step that's on chain before it goes off into like a centralized app. Let's go look at that now. I think we're, that makes sense. So, so yeah, each, each NFT, well, the contract, the NFT has this token URI that John was talking about attached to it. And basically that is comprised of like the base ID, which is this worker's URL. And then the ID itself, which you can use to render like a specific JSON response for that specific NFT. What we have here is the worker, which is pretty basic. It's written in TypeScript, so it's, it's really easy to kind of parse through. And basically what happens is you come here to this endpoint, which is a get request to slash NFT slash ID. And what it's going to do is return a JSON response with this construct NFT function here. And what that does is literally just returns a JavaScript object with a name, which has the ID built into it. Description is the same. And then this image, which uses Cloudflare IPFS. So this is like, I'll just open this up. This is like a static image, basically. You could go and, you know, do something more interesting here if you were building a full-on project. But it is. But it does highlight a cool way to use a Cloudflare gateway to interact with stuff that's, yeah. Right. On IPFS. So yeah, this is pinned using IPFS and goes through the Cloudflare IPFS gateway. So it's basically being hosted in a distributed way using IPFS, which is, which is super interesting. So what I said, it was 20 lines of code. It's like 32. It's still pretty short and a lot of this is kind of config. Yeah, exactly. And by the way, when you fork this project, that gets automatically deployed on new pushes. So you can take that and do stuff with it. And kind of deploy, say, if you want something, it's custom per NFT. Whoops, I went back to the worker, but let's go to the front end. Front end code. Yeah. Tie it all together. Yeah. Just tying it all together here. So this is like, we basically have just kept it in one single file. So a single Svelte JS app. And we tried to keep it pretty readable for folks that just don't, maybe don't know Svelte, which was us at the beginning of this project. Yeah. But basically, this window dot Ethereum object on line seven, that's like testing to see whether MetaMask is installed or not. And so what we do a little bit later is we'll do like an if Ethereum check. And so we're just like, okay, if they have MetaMask, do all this setup stuff. And this is all on the MetaMask API. So it's basically connecting to this contract's unique ID, and then grabbing your MetaMask signer account and, and logging in with it. So yeah, that's this kind of stuff. And if you're not on Ethereum, we just say, hey, or if you're not on MetaMask, we say, hey, you should go get MetaMask in order to use this app. Yeah. And I think the thing that might be the most crucial part for people to understand is once you have, maybe if we go up here a little bit, once you have a contract, so we deployed our CFNFT contract, you're going to be able to take this JSON that comes out of it. I think it's called an ABI, which is like an application binary interface, I'm guessing is what that stands for. And it basically is going to allow you to using the right tool, in our case, we use this project called ethers, you're going to be able to take that application binary interface still assuming that's what it's called, I might be wrong, someone's yelling at me, who's watching, it's like, it's not something else. I don't know, whatever. So you can take that and you can basically set up a an instance of this contract here, which will allow you to call any of the functions on that program. So find an example of this here. Let's see. So for instance, when someone is minting, right, so async function mint, what happens is we call contract with signer. Contract with signer is just like an authenticated interface to that contract. So it basically connects your metamask wallet and your contract. And now I can call mint token. And that's what kind of makes all the web three magic happen, right? So we've got 30 seconds left. Okay, for folks following along, like, we've got the repo open source. So github.com slash Cloudflare slash cf web three. Christian, I'll both be very active on there. If anybody wants to come ask any questions or hang out anything like that would be awesome. Yeah, and then we've got the blog post that we launched today. And now we've got this interview coming up with Natter. Yes. So stay tuned. Us from a few days ago, we'll be on Cloudflare TV as well. Thank you, everyone. And join us on our discord. Do I have time? Workers.community is the URL. Join us on the discord. Yeah, come find us on there. We'll see you there. Thanks so much, everybody. Thank you.