Taking Astro to the Moon with QuickNode

Episode Description

Anthony Campolo and Ben Holmes build an Astro front end connected to a Solidity smart contract deployed on Avalanche's test network.

Episode Summary

In this Quick Streams episode, Anthony Campolo walks through building a decentralized application (dApp) from scratch using Astro as the front-end framework and a Solidity smart contract deployed on Avalanche's Fuji testnet via Hardhat. Ben Holmes from the Astro team joins as a guest, offering explanations of Astro's architecture, including its Islands approach, client directives, and integration system. Anthony begins with a philosophical pitch for Web3, emphasizing transparency, ownership, and cryptographic security as core value propositions over traditional platforms. He then walks through the full development workflow: writing a basic Hello World Solidity contract with getter and setter functions, configuring Hardhat with a QuickNode endpoint, compiling and deploying the contract, and verifying it on the Snow Trace block explorer. The pair then build the Astro front end, add React via the CLI integration tool, and wire up a component that reads from and writes to the smart contract using the Ethers library and MetaMask wallet. After demonstrating the app locally, they deploy it to Netlify and confirm the contract interaction works in production. The conversation naturally surfaces topics like gas fees, contract immutability, and the differences between testnets and mainnets, making it an accessible introduction for traditional web developers curious about Web3.

Chapters

00:00:00 - Introductions and Background

Anthony Campolo welcomes viewers to Quick Streams from Remix Conf and introduces Ben Holmes from the Astro team. Ben shares his journey from front-end development through the Eleventy community and his Slinkity project to joining Astro full time as both a developer and community advocate.

The two reminisce about how Anthony pushed Ben to publish Slinkity to NPM and helped QA the project. Ben promotes his Thursday Twitch streams where he builds dashboard and e-commerce experiences with Astro's server-side rendering patterns, setting the stage for the day's collaborative project.

00:03:05 - Web3 Philosophy and Smart Contract Basics

Anthony introduces the session's goal of connecting an Astro project to a smart contract and asks Ben about his Web3 knowledge. Ben describes himself as an extreme skeptic on NFTs and monetization but open to learning. Anthony lays out a philosophical case for Web3 centered on transparency, user ownership, and cryptographic control as alternatives to platform-dominated Web2.

The discussion touches on PGP as an analogy for cryptographic communication, how wallets secure interactions, and why decentralized programs resist censorship. Anthony emphasizes that the demo involves no tokens or money, framing smart contracts simply as programs embedded on the blockchain that users can verify and control.

00:07:33 - Astro Overview and Project Setup

Ben gives a concise overview of Astro's evolution from static site generator to a flexible website builder supporting server, edge, and static rendering with any UI framework. He explains Islands architecture and client directives, which let developers selectively ship JavaScript per component. Anthony then begins setting up the project from scratch, walking through the dependencies including Hardhat, Ethers, and Astro itself.

They discuss Astro's starter templates available at astro.new, the popular Tailwind integration, and how the CLI's astro add command streamlines adding frameworks like React. Ben highlights that marketing and content sites are Astro's sweet spot, with server-side rendering and e-commerce as the next frontier.

00:13:07 - Writing and Deploying the Solidity Contract

Anthony walks through the three files needed for Hardhat: the Solidity contract, a deployment script, and a config file. The Hello World contract features a string variable, a constructor, a getter function, and a setter function. He explains Solidity's typed syntax, public and private access modifiers, and the importance of contract auditing, referencing the famous DAO hack on Ethereum.

The deployment script uses a factory pattern to deploy the contract with an initial message. Anthony explains signers and wallet-based ownership, then configures Hardhat to target Avalanche's Fuji testnet via a QuickNode endpoint. After compiling and deploying, they verify the contract's existence on the Snow Trace block explorer, demonstrating blockchain transparency.

00:21:37 - QuickNode, Wallets, and Network Configuration

Anthony explains the Fuji testnet faucet for obtaining test AVAX tokens and demonstrates his MetaMask wallet connected to different chains. He stresses wallet security, warning viewers never to connect wallets to untrusted sites. The QuickNode setup is detailed, including how to configure the endpoint URL with Avalanche's C-chain RPC path for smart contract interaction.

Environment variable management is a recurring theme, with both hosts acknowledging the challenge of keeping secrets safe during live streams. Anthony distinguishes QuickNode as a global API provider rather than a traditional node provider, and explains why the endpoint URL and wallet private key must be stored securely in environment variables rather than hard-coded.

00:29:05 - Building the Astro Front End

They shift to building the Astro page, with Ben explaining the triple-dash front matter block for server-side JavaScript and how variables declared there flow into the HTML markup. Anthony adds Water.css for simple styling, then uses Astro's CLI to add the React integration, which automatically installs dependencies and configures the project.

Ben explains how Astro's framework integrations work under the hood, providing client and server renderers for JSX files. They briefly discuss other supported frameworks including Svelte, Vue, Solid, and Lit. Anthony then builds a React component that connects to the deployed smart contract using the Ethers library and MetaMask provider.

00:39:13 - Connecting to the Smart Contract and Live Demo

Anthony demonstrates the client:visible directive, which Ben explains will only load the component's JavaScript when it scrolls into view. They connect MetaMask to the local dev site, click the fetch button, and successfully read the "Hello from Astro" message stored on-chain. Anthony then adds the setter function, which requires a signer to associate the transaction with a wallet for ownership verification.

After updating the message to "Hello from localhost," they encounter a minor bug requiring a server restart — a common Web3 development friction point. Ben observes that most Web3 tutorials still rely on Create React App and Webpack, and Anthony notes his push toward Vite-based tooling. The successful read-write cycle completes the local demo.

00:45:09 - Deploying to Netlify and Contract Immutability

Anthony sets up a GitHub repo using the GitHub CLI and deploys the Astro site to Netlify with a minimal TOML config. The production site successfully reads the contract state and writes a new message. Ben asks whether redeploying a modified contract would blow away stored state, sparking a discussion about contract immutability and the "code is law" philosophy.

Anthony explains that some blockchains support upgradeable contracts while others treat deployment as permanent, drawing parallels to the meaning of a legal contract. They discuss gas fees and why Anthony chose Avalanche over Ethereum for the demo, citing Ethereum's high transaction costs as a current barrier for developers.

00:52:43 - Wrap-Up and Community Recommendations

Anthony frames the completed project as an Astro dApp, noting it isn't a true decentralized application since the front end lives on Netlify rather than a decentralized network like IPFS. He previews an upcoming stream with Ben Myers on deploying to IPFS. Ben suggests viewers check out the Astro hackathon at astro.build/hack, where community projects showcase integrations, themes, and e-commerce starters.

Anthony promotes QuickNode's support for 14 blockchain networks and the company's multi-chain philosophy, pushing back against blockchain maximalism. Both hosts express hope for more collaboration between Web2 and Web3 communities, emphasizing that the two ecosystems can coexist and learn from each other rather than competing.

Transcript

00:00:00 - Anthony Campolo

Hello, everyone. Welcome to Quick Streams. We are here with Ben Holmes. How you doing, Ben?

00:00:32 - Ben Holmes

I'm doing pretty all right. How are you doing?

00:00:35 - Anthony Campolo

I'm doing great. I am coming at you all from Remix Conf, so forgive the hotel room and the lighting and whatnot. Hopefully we won't get any sound interruptions or anything like that, but I think we should be all good for the most part. So really happy to have Ben here from the Astro team. Why don't you tell our viewers a little bit about yourself and about Astro.

00:00:58 - Ben Holmes

Yeah. So I am Ben Holmes. Sorry, messing with some audio here. I am a web developer that started doing a lot of front end work, then learned a little bit of full stack. Now I don't know where I totally am because I work in the library space a lot, but I've been in open source for a bit. First in the Eleventy community working on something called Slinkity, and now joining the Astro team full time to work as both a developer and someone who's kind of spreading the word through streams, tweets, et cetera. So it's been a wild ride. It feels like I've been in the open source space for years, but I just published to NPM for the first time in August, I think, of last year. So it's just wild.

00:01:40 - Anthony Campolo

I remember, I was there.

00:01:43 - Ben Holmes

This is the reason why you're here. You forced me to do it.

00:01:44 - Anthony Campolo

You forced my hand. We kind of got to know each other. Yeah, I was very interested in Slinkity and I kept telling you you needed to ship something, so you eventually shipped it. And then I QA'd it and found some things and it was great. And I've really enjoyed getting to work with you on that. And I felt fairly confident that I could call in a favor and you would not be able to say no. So this is that favor. So you no longer owe me. No, that's not true. You still owe me.

00:02:09 - Ben Holmes

Nice. You're running out of favors. This might be the last live stream we do together. I hate to say it.

00:02:16 - Anthony Campolo

Oh no, it's all good, man. I really appreciate your presence in the community. I really appreciate the fact that you're streaming now, you do your own solo streams. You want to drop that link or what? I'll drop the link in the chat for you. It's going to be bholmes.dev, right?

00:02:33 - Ben Holmes

Yeah, right on the whiteboard behind me. Because I usually don't erase things because I like to reuse for promo and filming and such. But yeah, I stream over on Twitch 2pm Eastern every Thursday. Just kind of working on Astro right now. Planning to build a sort of dashboard e-commerce experience with Astro to feel out some of the new patterns that we have in the framework. So if that interests you at all, working with server side rendering and such, definitely stop by. Should be a lot of fun.

00:03:05 - Anthony Campolo

Very cool. So today what we're going to be doing is we're going to build out a little Astro project and connect it to a smart contract. So I don't know what you know about Web3 or blockchains or smart contracts or any of that, and I'm assuming you aren't totally against it because you're on this stream. So I'll be curious, what are your thoughts about this whole space and what you know about it?

00:03:30 - Ben Holmes

Yeah, I'll put it as I'm not against learning. I've seen both sides of the coin and opinions that people have at least on the blockchain and NFT space. I am an extreme skeptic on those sorts of areas, especially the monetization angle and what I've sort of seen going on with artists and such. We're not going to get into philosophy here, but on the Web3 side it is kind of interesting to see how you could form a business if that is your intention. So I guess I'm interested to know first off how you can connect. It sounds like you prepared a full project end to end, so I don't have to learn up and explain this myself. So that's great. Mostly just here to, like, yeah.

00:04:11 - Anthony Campolo

I'll be explaining the blockchain stuff and you'll be explaining the Astro stuff and we'll just kind of walk through the project and explain it to the listeners as we go. But yeah, what we're doing today, it's not going to involve any tokens, not going to involve any money, it's not going to involve any of that. We're just going to deploy a smart contract and then connect it to an Astro project. And so all a smart contract is is a program that's on the blockchain. So for me, if I were to try and make this pitch to people, and I've been trying to hone this, especially talking to people who are traditional web developers and maybe skeptical of Web3, is that it's a program that you can embed that no one can take down and no one can stop you from deploying and that you have control over because it is all cryptographically connected from the ground up. So I think that the problem with the web the way it is currently created is that it's not optimized for users, it's more optimized for platforms and the people who are creating things like Facebook and Google.

00:05:22 - Anthony Campolo

And when you're using those services, you can't see what they're doing. That's the other thing. Transparency is the other part. So transparency and access and control and ownership, those are all the things that to me are the value props here. Because when you're using something like Facebook or Twitter, as much as I love Twitter, you can't really know how that program works and you can't really control all of your data. We've gotten better about that with certain laws that are forcing these companies' hands. But with something like the blockchain, you are in control of your own program, you're in control of your own data, and you're in control of what happens with all of that from the ground up. And the reason why is because it's all cryptographically verified and you have what's called a wallet. And so do you know what PGP is? Pretty Good Privacy.

00:06:13 - Ben Holmes

Sounds pretty good. I don't know about that protocol if you want to explain.

00:06:17 - Anthony Campolo

Yeah, PGP is probably one of the more well known cryptographic message protocols. If you've ever seen someone, they may have a PGP key on their Twitter. It's not as common these days, but it would be just this long string of text and it would allow someone to send a message to that person and then that person can make sure that they get that message and no one can sniff that message on the way there. No one can read it. So you can communicate with someone and be confident that no one is eavesdropping on that. Actions can be secured and you can have programs be secured and you can have all the things you're doing to interact with programs be secured as well. So it's a very high level philosophical pitch, but I think the things that spin out from it are actually quite interesting. Because people complain constantly about Silicon Valley companies and all the things they do and how evil they are and all this stuff. And it's like, you can complain as much as you want forever, but this is actually stuff that we're building to try and mitigate those externalities and give control back to the users.

00:07:25 - Anthony Campolo

So does that make sense?

00:07:27 - Ben Holmes

It does make sense. Yes, I think so.

00:07:30 - Anthony Campolo

Okay, cool.

00:07:31 - Ben Holmes

Yeah, definitely like to see it in action.

00:07:33 - Anthony Campolo

Yeah. And you will see it all in action. So yeah, I think we can probably get going here. Is there anything else you want to say about Astro before we get going? I don't think you've explained the Astro 101 to people yet.

00:07:49 - Ben Holmes

We can. I mean, I can.

00:07:51 - Anthony Campolo

I mean the high level Islands architecture, stuff like that.

00:07:56 - Ben Holmes

Easy. Yeah, I've been saying it my whole life, feels like. But yeah, Astro used to just be a static site generator. Now it's a website builder, that's just a generic term I'd use. It lets you either render to the server, to the edge, or to static assets. And it lets you bring any components that you want to the table. You start by running some plain HTML and some server requests at the top of all the routes on your site and then you can hydrate individual components on the page, sort of piecemeal, depending on what you need. For example, you could write a heading with React. So you slap a React component on there for your page, like a hero or something like that. And if you don't want to ship JavaScript with that hero, you can opt out of it and say, I don't need JavaScript for this heading, it's just plain text. Then you can insert another React component that's an image carousel and say, all right, I want to load JavaScript for this one, just not the hero banner. Then we give you these helpers called client directives to choose whether to ship JavaScript with the HTML that you're showing to your users.

00:08:57 - Ben Holmes

It's a major philosophy called Islands architecture that makes that possible. I'm sure we'll demo a little bit of that today.

00:09:04 - Anthony Campolo

Yeah, we'll have some of those client directives as well. All that stuff that Ben just said you'll get to see in the actual project. Cool, great. Let's get going then. I'm going to go ahead and share my screen. All right, good deal. So I really like just kind of starting projects totally from the ground up because I think that's usually the best way for people to learn how this works. So you guys have a ton of awesome starters, and I'm not going to use any of those. If you want to talk about what are some of the starters people could use if they want to generate a project, not by just creating an empty directory. What are some frameworks that people tend to use with Astro?

00:09:50 - Ben Holmes

Yeah, I guess kind of different questions. The first suggestion I have is try using astro.new. It's a website you can go to and get an online editor with Gitpod, StackBlitz, and anything else you want in order to try out Astro on your own. And we have a bunch of templates to get started there. And if you want to build locally, the create astro command is also a really great one. It's under getting started docs if you want to go Google for that and go find it. And generally, oh yes, I think it'll explain it right there, the online editors and manual installation. But yeah, the frameworks people use, we actually have some analytics now. A lot of people love using our Tailwind integration to just type astro add tailwind.

00:10:34 - Anthony Campolo

Wait, people like Tailwind?

00:10:36 - Ben Holmes

So suddenly you have it. I know, it's like the number one integration right now. We're still getting the numbers, but I kind of call out that we have a really easy way to just type one CLI command and configure Tailwind automatically with a config file and everything. Otherwise people are bringing React. Yeah, we don't link it there, but on astro.new, the website, we do link it. So if you're that kind of person that likes spinning up the full online editor, I know this is great for people who use Chromebooks. We actually have some people in our maintainer squad that do that. So that's really great.

00:11:14 - Anthony Campolo

This is fantastic. I've never seen this before actually.

00:11:17 - Ben Holmes

Yeah, there's so much here. The big ones are at the top, I would say, like documentation, blogs, and portfolios are great getting started guides. But going further with server side rendering and e-commerce experiences as the next frontier, that's where I'm going to see some of this stuff going. But right now marketing and content creation are perfect for Astro.

00:11:39 - Anthony Campolo

Cool. I need to let someone know they need to buy quicknode.new stat.

00:11:44 - Ben Holmes

Yeah. Dot new is always good.

00:11:45 - Anthony Campolo

Okay, so I am going to just get us a little project set up here and we're going to install a couple dependencies. This is one of the things I like about doing from scratch, that you can see that these are the Web3 things. You got Hardhat, which is our deployment environment and development environment. We have Ethers, which is a JavaScript library that gives you some nice conventions for connecting to the blockchain. And then this Hardhat Ethers, which integrates the two together. But then all we have is a single development dependency which is just Astro and that is all of Astro, right?

00:12:24 - Ben Holmes

Yeah. And I will say we have some environment variable stuff built in. I don't know what you're using that for, but just a minor call out.

00:12:31 - Anthony Campolo

That is for the Hardhat stuff.

00:12:34 - Ben Holmes

Yeah, I had a feeling it's for the... This is like a full stack setup, right?

00:12:39 - Anthony Campolo

You could, yes. So you could call that... This is an interesting point, which is that I kind of say that Web3 is like Jamstack by default, full stack Jamstack by default. Because you're always going to have a decoupled front end and back end, the back end being the blockchain and then the front end being your client application, which is what we're building out here.

00:12:59 - Ben Holmes

Got it. Yeah. If decoupling is in there, it's Jamstack. That's been my moniker.

00:13:07 - Anthony Campolo

So we have a couple of things we're going to create here. One of the things I like about Hardhat is that you just need three files to get going. We're going to have a HelloWorld.sol, which is our Solidity file. Do you know what Solidity is?

00:13:23 - Ben Holmes

Yeah, yeah. I remember looking through code samples for it. It's been around for years, I think. I don't know if it's the standard, but it is.

00:13:30 - Anthony Campolo

Solidity is the...

00:13:32 - Ben Holmes

It is a programming language.

00:13:33 - Anthony Campolo

Yeah, it's a programming language that was invented for Ethereum specifically. Now, we're not actually going to be using Ethereum, we're going to be using Avalanche for this demo. But Avalanche is compatible with the EVM, the Ethereum Virtual Machine. So it's a programming language that is specifically designed for smart contracts. We'll get into that once we get there. Then we have another file, which is our deployment script in Hardhat, and then our Hardhat config, which is how we're actually going to configure our QuickNode endpoint and all of that. Then we're going to do one of these now. Yeah, let's just, we'll get to that later. And then here are our scripts. So we've got astro dev, astro build, and astro preview. We're only going to really be using astro dev and astro build, but you want to talk a little about what is astro preview? Because I think that's an interesting one.

00:14:32 - Ben Holmes

Yeah, it's just a way to preview your production build after you run astro build. It's not super complex, but it's nice to have that built in for sure.

00:14:40 - Anthony Campolo

You build your site and then you can run it, which is... How is that different from astro dev?

00:14:47 - Ben Holmes

In dev it's going to be using Vite in development mode. That's the big one. All your dependencies are unbundled and when you're changing files, you'll live see those changes in the dev server. But if you run build and preview, build is going to bundle everything into an optimized production build, minify stuff, collapse files, then preview is just spinning up that production build. It's not going to reboot whenever you save file changes. It's just a way to make sure the production build reflects everything that you were trying to work on.

00:15:18 - Anthony Campolo

Cool. Gotcha. That makes sense. I will walk through exactly what is going on here. This is our Solidity contract. What we got here is we're first going to say the version of Solidity because you always want to explicitly declare your version to make sure you don't have any weirdness going on with that. We're using Hardhat just to do some console log stuff for us for development. And then we are defining a contract. So if we just comment all that out, we have a contract and then we give that contract a name. That contract is going to be HelloWorld, nice and simple. Now this contract is going to have a variable which is going to contain a string called helloMessage. And this is object oriented kind of stuff. We also have a constructor which is going to allow us to pass in a string that will set the helloMessage to whatever we pass in. That's what's happening here. And so as you can tell, this is a little bit like JavaScript, not exactly because it's got types. So it's a C-like, JavaScript-like kind of language with types on it.

00:16:33 - Anthony Campolo

So if you do know JavaScript, you can probably pick up Solidity pretty fast. There's just a couple things you got to learn about it. But we're going to define functions just like we would in JavaScript. And this is going to be a hello function. And then you have private and public, which is kind of deeper level stuff that we don't really need to get into too much. This is about how you manage who can access what. And this is the type of stuff that there's going to be many levels to, like auditing these contracts to make sure they actually work. Now since we're just doing an end to end example here so people can see what it's like to deploy a very basic contract, there's a lot of stuff that goes into actually making sure these contracts are good to go. Because if you think about it, these are eventually going to be connected to funds and money. And a bug in a smart contract will directly impact funds usually. So there's a very famous hack that happened on Ethereum, it was the DAO hack, and it basically allowed someone to siphon off millions of dollars.

00:17:39 - Anthony Campolo

And so they actually had to fork the entire chain and create a new one to say, hey, we're going to rewrite this and take that bug out. And now this is the new state. So that's a whole specialty unto itself that we're not going to get into very much. And then the final function we have is actually to write to the smart contract. The hello function will read and then the setHello function will write. So we're just going to do some basic CRUD functionality here. And my AC just went on, hold on. This is our whole contract here. We got a getter and a setter is a good way to think about it. Do you have any questions about what's going on here?

00:18:26 - Ben Holmes

Yeah, I mean, other than that, type definitions looking a little wacky, like public view returns string memory. In TypeScript, I would have just said string, but cool. Otherwise it makes a lot of sense. Yeah, you even got console log. Fairly familiar. It takes me back to some Java that I used to write.

00:18:45 - Anthony Campolo

Yeah, don't talk to me about Java.

00:18:48 - Ben Holmes

Well, when you say getters and setters, I'm like, I know the mindset, I know where we are with contracts. That kind of makes sense. That's the object. It's how you protect things. You can make things private and public. I'm sure that matters a lot more in Solidity than other languages, right?

00:19:04 - Anthony Campolo

Yeah. Cool. So that is our smart contract. And then this is going to be our deployment script. And what this is going to do is we're going to get the contract and then we're going to create a factory. So factory, this is another object oriented pattern. If you know Java, you probably know what that is. You're going to create specific objects based on this object definition. And so we feed it the contract we want and then we run this deploy command on it. Let's say "hello from Astro" here. And then what this will do is this message is going to be set to the helloMessage. So we're going to pass in a string as we deploy it and then we'll await it and then do the .deployed. And then here we have our console logs to actually console log our address and then our signer. So this is more of the Web3-isms here. Because we're going to have a wallet that we're going to use when we deploy this. So we're going to have a signer, which is more of the cryptography stuff. And that's what verifies who specifically deployed this contract.

00:20:25 - Anthony Campolo

Because by giving my wallet address, I can stamp myself onto it and own it. So then when I want to go and change it and do the setter, no one else can do that, only I can do that. So that's what I mean about the ownership factor and the fact that this contract will be out in the world that people can interact with, but I still have control over because I'm the one who signed this contract. Okay. And then the final piece is our Hardhat config. What's happening here is we're going to have our Solidity version, which is going to match up with this right here. And then we're going to set the path for our artifacts. And what this is going to do is generate a bunch of JSON that Astro is then going to interact with. We can look at that a little more once we get into that. Then we're going to set the network. This is where we would define whether we want to deploy this to Ethereum or to a different network. And the reason why it says Fuji is because we're going to be using the Avalanche test network.

00:21:37 - Anthony Campolo

So for each blockchain there will be mainnet and then testnet. There can be one testnet, there can be multiple testnets. And so Fuji is the Avalanche testnet and it allows us to do this whole thing without real money. So we're going to have a wallet, it's going to have AVAX tokens in it, but they're not real. And you can just go to the Fuji faucet. The Fuji faucet will allow you to just plug in your wallet and take some funds. So for here, if we check this out, then we have the Fuji C-Chain and you'll add in your address and then just request some AVAX. I've already got some in my wallet and so I don't need to do that because we can just see, I've already got some AVAX in my wallet here. And so this is our MetaMask wallet. We're actually going to be switching to using the Coinbase wallet more than MetaMask, but this will probably be the last demo I'll do just with MetaMask and we have different chains we can connect to. So I've got Ethereum and I've got the Avalanche mainnet and then the Avalanche Fuji testnet.

00:22:49 - Anthony Campolo

And so interacting with your wallet is a very big part of Web3. And this is where people can get tripped up because if you click a link that you shouldn't click and then you connect your wallet to it, people can take things from your wallet. So this is a very important thing. Don't ever click links you shouldn't click and don't ever click links random people send you because you will get owned.

00:23:16 - Ben Holmes

Yeah, I know.

00:23:18 - Anthony Campolo

And then here we got our QuickNode URL and then our private key. Now this is where we get into the QuickNode stuff, which is my company and where I work. QuickNode is for deploying APIs. We're not a node provider. This is an important thing, there's some places that will give you a node, whereas we're giving you a global API that just has an endpoint to it. We're not spinning up a server for you. We're giving you an endpoint that connects to the sum total of QuickNode. And when you sign in, you'll see that I've got these endpoints here. This is one that I've already created and you have an HTTP provider. And I'm not going to show this whole thing because at the end of your endpoint is a private key. So this endpoint itself is something that should be private, something that you should not ever hard code into your project. It's very important that you put this in an environment variable, which is why I created this .env over here. And we're going to set our QuickNode URL and then we're going to set the private key for our wallet, which you can get from here by exporting your private key, which of course I will not do.

00:24:43 - Anthony Campolo

But to get that all set up, I'm going to hop off of screen sharing for a second. So any questions so far about all that?

00:24:54 - Ben Holmes

Not yet. I respect how rehearsed and well executed all these environment variables are. I've already been struggling with that on stream. Had to take down a couple VODs just from trying. It's tough.

00:25:11 - Anthony Campolo

This is something I had to do with StepZen as well. StepZen is the previous company I worked at, which you also did a stream with me for. We had a StepZen endpoint, and to access it you need an API key because it would be secured by default. With QuickNode, you can also set JWTs. You can lock it down in even more ways beyond just hiding the URL itself. But for now we're not going to do any of that. But you're correct that there's a lot that goes into doing a stream like this and not blowing away your keys and your endpoints every single time.

00:25:45 - Ben Holmes

Because even if you're off for one frame, you can pause on that one frame pretty easy. Yeah.

00:25:52 - Anthony Campolo

Yep. Okay. And then back to sharing. So I set the environment variables for this URL and then for this private key. And then one thing just for viewers' sake, if you're trying to follow along at home with this, once you get your QuickNode URL, you need to append this thing right here: /ext/bc/C/rpc. So what the heck is that? This is because Avalanche has what are called subnets, which basically means that we have a couple different interacting microservices, is a way to think of it. They don't use the term microservices, but I think it's a pretty good way to think about it. There's going to be the Avalanche chain itself and then there's going to be the Avalanche smart contract part, which is what we are interacting with here. So that's what the C is for. The C is for the C-Chain, specifically for contracts. And so that's an important thing for people who are going to be following along with this. Make sure you do that. Now we're going to run Hardhat compile and all of our Hardhat commands have yarn at the front.

00:27:18 - Anthony Campolo

You could do this with npx also if you want to. And what that does is it takes our Solidity file and it compiles an ABI, an Application Binary Interface. And then that is what we're going to actually deploy to the Fuji network here. Now we're running our deployment script, yarn hardhat run scripts/deploy.js, and then we're doing --network to specify the Fuji network. And then now we have a contract address. And we can verify that this contract address actually exists on the blockchain by taking this address and plugging it into the SnowTrace testnet explorer. And this is something that Ethereum will have and other chains as well. So here's our contract, it is 28 seconds old and it has no funds in it. And this is a good way to see that this thing actually exists on the blockchain. So this is what I say when I talk about how there's transparency in the blockchain because everything on the blockchain can be seen. Now if I wanted to do this kind of privately, I would want to make sure that people don't know my wallet account because then they can see what I deploy.

00:28:39 - Anthony Campolo

So if you actually want to put things on the blockchain and protect your own identity, there's a couple other levels to it and some chains are optimized for that more than others. But still, no one can take this contract address and mess with it because when I deployed it, my private key was associated with it.

00:29:02 - Ben Holmes

Gotcha.

00:29:05 - Anthony Campolo

Okay, let's get into the Astro stuff now. I'm sure that was all very riveting for you.

00:29:09 - Ben Holmes

It's interesting. With a contract up, is a contract a single transaction or a store for all transactions that you might want to submit?

00:29:20 - Anthony Campolo

That's a good question. So the contract will track the transactions. So deploying the contract...

00:29:26 - Ben Holmes

Yeah, just going to check, it's a ledger. Am I getting that exactly?

00:29:30 - Anthony Campolo

Yeah. So this is a good way to describe what a blockchain is. It's a distributed ledger that is on everyone's computer who is running that blockchain. So you have transactions and a transaction can be "I want to move funds from this account to this account" or "I want to have a smart contract that when I give it a dollar, it feeds that out to these five addresses." So you can embed logic to do transactions for you as well.

00:29:57 - Ben Holmes

Right. So since this only has a hello world in it, there's no way it could transfer funds, right?

00:30:04 - Anthony Campolo

Correct. Because there's no logic in it to say, look into this person's wallet and see their funds and do something with their funds. It's just a message associated with it. Now usually if this was on mainnet, there would be funds required to do the setter. So the setter itself is not free. And this is why we do this on testnet with fake AVAX tokens because it costs AVAX gas fees to interact with it. And this goes more into how these things are set up to actually compensate the people who run the network. Because this stuff ain't free. Computers aren't free, computing power is not free. This stuff doesn't just come out of thin air. So the network itself has incentive mechanisms built into it, so people who are interacting with it have to pay. And that's a thing that can trip people up with this Web3 stuff. They're like, well, I don't like the fact that you always have to pay. And it's like, well, I'm sorry, but things cost money.

00:31:09 - Anthony Campolo

You can set it up in a way where the person running it just eats those transactions. And you can set it up so your users don't actually have to pay, but someone has to pay somewhere because computing power is not free.

00:31:22 - Ben Holmes

Right. Yeah.

00:31:24 - Anthony Campolo

All right, so what's happening here? This is you.

00:31:28 - Ben Holmes

It's a page, it's got a title, and we're putting the title up in that front matter block. For people who don't know, when you do the triple dashes on the top, you can write JavaScript and it's server side JavaScript. The analogy I give is, if you're coming from Next.js and you've used getServerSideProps or getStaticProps, it's that, but less code. All you have to do is triple dashes, write a bunch of server code, and all variables that you declare in that block are available in the markup that that server is responding with. Here we've created a title variable. It's got a value. Then we're slapping it in our HTML document directly. You can see here we're writing the full HTML document. There's not a fancy React Helmet or an app.tsx or something you have to update. You just write HTML top to bottom and compose it with components, which I assume we'll at least try out a little bit.

00:32:22 - Anthony Campolo

Yeah, and I like that because then we can do something like this. If we want to include just a little stylesheet, we can just put a link with a rel stylesheet and then we're going to point it to this Water.css, which is a nice little CSS preset that I really like. So it gives you a nice little look. So our website is going to look exactly like this.

00:32:43 - Ben Holmes

I've never seen a CSS file on Product Hunt. That's fantastic.

00:32:47 - Anthony Campolo

Hey, number three project of the day. I mean, I really like this.

00:32:48 - Ben Holmes

Publish my CSS just for product of the day.

00:32:53 - Anthony Campolo

I am not a CSS expert. I have mad respect for people who are CSS experts and that is not me. So I really like having something like this to make my website look a little less dumb.

00:33:04 - Ben Holmes

Love it. We can't all be Steph Eckles.

00:33:07 - Anthony Campolo

It's true. No, we cannot. Very few of us can be. Wait, hold on. One more time. Okay, now. Yarn dev, localhost 3000. There we are. Astro, taking it to the moon.

00:33:22 - Ben Holmes

Wow, it's a page. Oh, and it has a max width. Nice.

00:33:28 - Anthony Campolo

Yeah, totally. So let's get this over here and let me pull this guy up. Pull it down. Okay. Now this is fairly new. When I wrote my first Astro blog post, this did not exist. What is this?

00:33:44 - Ben Holmes

No, it didn't. Yeah, this was added I think a month ago by a super amazing contributor and one of our core members, Nate. I think it was Juan who wrote this. Shout out to Juan if it was. But yeah, this updates your config programmatically. So it's just writing to the config file directly and if you like what you see, you can hit yes.

00:34:05 - Anthony Campolo

Well, it creates the config file too, because I have no config file here. Or maybe I do.

00:34:11 - Ben Holmes

Yeah, if you didn't have one, it would create one for sure, but otherwise it'll update it in place and not mess with what you have.

00:34:18 - Anthony Campolo

What it's going to do is let us know what framework we want to use. I'm specifying React here and it's going to not only create our config, but then also install our dependencies. Now this is a really nice touch here because it used to be, and you did this with Slinkity too, you would have to actually install React manually, whereas this is doing the whole end to end thing for you. And it's also installing this @astrojs/react. What is this?

00:34:49 - Ben Holmes

Yeah, that's a little container that's going to take React and React DOM. It's going to specify here's how you render a React component on the client and here's how you would server render that React component. If you want to just server render it, then it would pass that off to Astro to basically teach the framework here's what you do with JSX files. Then Astro can use that integration: every time I see JSX and TSX, I'm going to use your client and server renderers. We have those for a lot of major frameworks now. Solid, Preact, Vue, Svelte, Lit Element. If you're a web components person, they're all here and you can write your own if you're into that.

00:35:28 - Anthony Campolo

Nice. I still haven't tried Lit yet. Got to give that a spin sometime.

00:35:32 - Ben Holmes

Yeah, I am a fan of using Svelte and their custom elements compiler so you can use Svelte to write web components. It's so clean. Lit Element was just hard to learn for me. But if you're into classes, which you might be if you're a Solidity person, it's there, you can do it.

00:35:51 - Anthony Campolo

Very cool. Now I'll be honest, before I did this I was having trouble with the environment variables. So I think another time you and I are going to have to actually work out how to get this to work with Astro specifically because there's some kind of weirdness happening. But we don't really have time to get into that right now. So that's for another stream. But what's going to happen here is going to be our whole front end React component that's going to interact with our smart contract. And so we took that contract address that is spit out for us and then we import those artifacts that were created for us over here. And this is JSON stuff. If you look, we have the methods and the variables and the constructor and it's taking all of that and giving you a JSON representation of it. And then we're going to do a classic useState. useState will give us a hello variable and then setHelloValue and then we are going to check for the MetaMask provider right here. And then we have this fetchHello function.

00:37:06 - Anthony Campolo

There's a decent amount of stuff going on in this function. I give credit to Nader Dabit because I've just been copying and pasting this kind of logic that came from his tutorial that I first read like six months ago. And it just works and you can just kind of change the variable names and get it going for you. So what's happening is we're going to set the provider using the Ethers library and then we're going to pass in our contract, our ABI, and then that provider we just specified. We're then going to do a try-catch which is going to run the hello function on our contract and then set whatever the hello function spits out to a data object. That data object will then be set to our React state and it will be console logged and then down here it'll also give it to us in our actual component. And then we have an onClick to run that function when we click the button. You know you want to.

00:38:08 - Ben Holmes

All right, that's pretty simple. I do have a point on the environment variable, but I'll hold it.

00:38:24 - Anthony Campolo

Okay, cool. Do you have to append it with VITE underscore or something else?

00:38:27 - Ben Holmes

Yeah, it's a security measure. Since you are exposing an environment variable to client side JavaScript, there's a thing. I think it's PUBLIC, but don't quote me. I think it's that.

00:38:33 - Anthony Campolo

Okay, that's what I was doing.

00:38:34 - Ben Holmes

If it's not in our docs, I'm updating our docs because yeah, that is frustrating.

00:38:38 - Anthony Campolo

Yeah. Part of the problem is that when I was using Vite by itself, it was seeming to work. So I'm not sure if there's something different going on between how Astro is managing the way that Vite manages the env vars, but this is kind of in the weeds and so let's not worry about that too much. And then here we're going to just update our Astro index.astro file again. We're going to import that React component and then we're going to have it here. And let's talk a little bit about this client:visible here. What is that doing?

00:39:13 - Ben Holmes

Yeah, it will only load the component when it scrolls into view. If you were really caring about performance and check the network tab, you can see the component only loads the JavaScript part when it's actually on screen. So you'll just see the static rendered text and the button, I guess. But the button won't be clickable until it's actually on screen.

00:39:36 - Anthony Campolo

Yeah. Cool. Okay, now, moment of truth. Nice. So what we're going to do now is pop that open and then here we want to make sure that this is connected here. So our wallet is connected to this site. This is where you get owned. Don't ever connect your wallet to a site that you do not trust. Then click the button. Boom. Now we see here "hello from Astro" and also our state in our component. And then I also just have the little contract address right there. So that is your whole end to end hello world using Astro and you're reading from the contract. And then the next level would be setting. So now we're going to have a setter function here and this will go right under our fetchHello function. And what this will do is it will do the same thing with the provider, but then this time we also have a signer. So this is the part where I'm saying you want to actually associate this with a wallet so that no one else can modify it. This will end up being a site that's going to be on the internet with a link anyone can look at, but no one else can

00:40:49 - Anthony Campolo

set this without the proper signer. And so this is where you are having control over your contract and what is being done with it because you signed it with your wallet. And then once we do that, we feed in the contract address and the HelloWorld ABI like we did before, and the signer along with this transaction which will run setHello and then set it with the hello state variable. And then we do an await and then rerun the fetchHello function which runs that again. Then the final part will be a little input. This is not really the best way to do this, it's not very good React. But it's just a simple way for us to get going. Let's do that. Okay, that should be good to go now. So let's make sure this is still actually... Yeah, that should be good. And then we change this to "hello from localhost," set the message, and then this will ask us to actually confirm it. And what's happening here, this is where if we were doing this on mainnet it would cost a certain amount.

00:42:23 - Anthony Campolo

But if you look here, it's costing us an extremely small amount. And this is one of the reasons why I'm using Avalanche instead of Ethereum proper. Because I think that until Ethereum can get its scaling story figured out, it's not really a great blockchain to use right now because the transaction costs are so high. I bought an Ethereum domain, the domain cost $15 and the transaction cost was $200. So it's a huge problem. Whereas with Avalanche, that's not the case.

00:42:58 - Ben Holmes

Okay, yeah.

00:42:59 - Anthony Campolo

And then nice. We're going to sit here and wait 10 to 15 seconds while that goes through.

00:43:04 - Ben Holmes

Something like that.

00:43:05 - Anthony Campolo

Yeah. And there you go.

00:43:07 - Ben Holmes

Nice.

00:43:08 - Anthony Campolo

Something didn't happen. Let me do it properly.

00:43:11 - Ben Holmes

Window might have reloaded.

00:43:16 - Anthony Campolo

Hello from localhost again. Yeah, this is something that I always find is hard in development, when you need to rerun your server versus not. Because I find that most people like being able to develop with their server just constantly running and it figures out for you, but I have yet to find a framework that can successfully do that without having you restart when you change environment variables or something. There's just so many levels to it. So that time it worked. All we had to do was restart our server.

00:43:58 - Ben Holmes

Interesting.

00:43:59 - Anthony Campolo

Okay.

00:44:00 - Ben Holmes

Not quite sure why, but I know a lot of things are going on with the window object responding to events that are coming back. I'd have to look into it.

00:44:07 - Anthony Campolo

I know, it's a whole thing and no one's QA'ing Web3 stuff on Astro right now. So I understand why we're going to run into a couple bugs like that. And that is all good.

00:44:20 - Ben Holmes

Yeah. I remember poking at some Web3 starters and noticed, wow, they're all using Create React App and Webpack. I don't think the web dev community that I'm a part of is the one making these tutorials. It'd be nice if Astro or Vite or something like that was involved.

00:44:37 - Anthony Campolo

Well, that's what I'm pushing for. All of my tutorials use Vite. I never use Create React App anymore and I never use Webpack anymore. If you're running a production app right now, there's arguments to be made for sticking with Webpack. But for me, just building these little sample apps and trying to push the web forward to these newer tools, I love Vite. I think Vite is absolutely incredible.

00:45:03 - Ben Holmes

Yeah, plain Vite is so nice. With their Vite starter, that's all you need. It's perfect.

00:45:09 - Anthony Campolo

And then here we got a dead simple netlify.toml here with a build command, yarn build, and a publish directory dist. That's all we're going to need. And since we also hard coded our contract address, we don't even need to feed Netlify any environment variables, which is pretty nice. We're going to spin up a git repo here. Do you use the GitHub CLI by chance?

00:45:36 - Ben Holmes

I have actually been using the built in stuff with VS Code where if you haven't published yet, it just has a button that says "publish to GitHub." It's like, okay, I'll do that. And then it generates a repo based on your NPM package name. It's so clean, so cool.

00:45:50 - Anthony Campolo

Yeah, I've been a big fan of the GitHub CLI. We had this gh repo.

00:45:54 - Ben Holmes

Yeah, yeah.

00:45:56 - Anthony Campolo

And we create the repo, we make sure it's public and then we're also going to push up our stuff as well and even give a description and set the remote and do the whole thing in one giant command. So I am a fan of that. And then it will give us a link here to our actual repo. Stay in Chrome land for now. Here is our repo. Go ahead. And we did that there. Now we just got a couple more things to do and then we will be done here. Now we're going to connect our Netlify to our GitHub. I got a couple of them, "Taking Astro to the Moon." And there's our build commands. We will deploy our site. I always like setting the domain as well. We got that. And since we are using Vite, this thing builds pretty dang quickly. So what it's doing now is taking our whole Astro project, turning it into essentially a static site that can be hosted on Netlify, and it's going to then run the build. So it runs the Netlify build command which then runs yarn build. And this is always one of those things.

00:47:32 - Anthony Campolo

It's like I know what most of these things mean, but not all of them.

00:47:37 - Ben Holmes

Yeah, it's a big log at the front. I learn something new every time depending on where the error happens.

00:47:42 - Anthony Campolo

I know, right?

00:47:43 - Ben Holmes

Yeah. A lot of it's build logs. That's always fun.

00:47:47 - Anthony Campolo

This should all be good to go now. If we click here, we will get our wallet. We'll connect that and then we'll get this. So you see how it says "hello from localhost" again. And that is because the contract is always going to be in whatever state you left it in. Because even though we were running on localhost before, we were interacting with the actual contract on the actual blockchain. So now we're going to say hello.

00:48:17 - Ben Holmes

It's not just a schema, I guess.

00:48:20 - Anthony Campolo

Yes, it actually stores the data for you because we have a variable and then we set that variable and then that variable is stored on the blockchain. This is why a lot of people explain the blockchain as just a distributed database. It's a distributed database that's highly encrypted and that has conventions for letting you connect to it and interact with it with your wallet, which is doing all the cryptography for you.

00:48:45 - Ben Holmes

Got it.

00:48:45 - Anthony Campolo

This will be the last step here. We will confirm that and then we will wait patiently for it to finish. And if everything went according to plan, we will see "hello from Netlify" in a second. Any questions on that?

00:49:06 - Ben Holmes

There it is. Makes sense to me. It's not like deploying a JavaScript object, for example, where if I redeployed and changed it, then it would blow away the state. Is it true that if I edited that contract to, I don't know, make it "hello" times two to duplicate the message when you set message, if I deploy a change to the contract, does the state get blown away?

00:49:33 - Anthony Campolo

It depends what the change you make to the contract is. So this is kind of a complicated question. Because some blockchains will have conventions set up so you can upgrade these contracts, whereas others are like, you deploy a new contract if you want to change it. Because there's this idea of "code is law," which is once that contract goes out into the world, sometimes you don't want the ability to change it. You want it to be set in stone. And that's why it's a contract. If you can rewrite a contract, is it really a contract? So it kind of brings up a philosophical question of what does it mean for something to be a contract? If you sign a contract and then someone rewrites that contract and leaves your signature on it, that's not a contract. The contract is supposed to stay the same. So some blockchains will have conventions built in so you can change and upgrade contracts. And the reason why is because if there's a bug in the contract, you want to upgrade that contract.

00:50:34 - Anthony Campolo

You want the contract to do the thing you want it to do, not the thing it's actually going to do. And this is why you have to audit them and do this whole process around making sure it actually works the way you think it does. But for the most part, usually when you put a contract into the world, that's it, it's out there, it's going to do what it's going to do. And then if you want to change it, you can deploy a new contract. So this is something that I'm still learning about as someone who's fairly new to Web3, like when is it actually appropriate to change a contract versus not. That's a higher level question. That's a really good question though.

00:51:13 - Ben Holmes

Yeah. From a world of continuous deployment and the fact that it's like, oh, it's a singular deployment, you can make a new one if you'd like. I guess there's no concept of addendums either. If I'm extending the metaphor, I can add addendums to written contracts, but in this case I just make another contract. And I'm sure it gets in the weeds of how to connect contracts or offload people from one to another because I'm sure that's a thing people have to deal with, like this one's old, please move everyone to this new contract.

00:51:45 - Anthony Campolo

Yeah, and that's a coordination problem. You have to have everyone usually upgrade at the same time together. But yeah, this is still new stuff. We're all kind of figuring out this Web3 world together. But that's a good end to end example, I think, of seeing what is a smart contract, how do you connect a front end to a smart contract, and how you deploy that front end. And so that's an Astro dApp. We just built an Astro dApp. This is a decentralized application. It is running on the blockchain and connected to that blockchain. And the centralized part is Netlify. So if I wanted to, I could also deploy this front end to something like IPFS, the InterPlanetary File System. That's something I'm going to be doing with the other Ben, Ben Myers. I'm going to be on Some Antics next month to show how to do that. And so that would be a true dApp if you had the front end also on a decentralized network. So this right now is not really a true dApp because it's on Netlify.

00:52:43 - Anthony Campolo

But we all know Netlify. We all love Netlify. Even though Netlify doesn't love Web3, we love them. So this is where we are right now. And I like showing this example for getting Web2 people into it.

00:52:57 - Ben Holmes

Yeah, I mean it seems like the front end piece isn't that important. The tech stack of the front end piece doesn't really matter a whole lot as long as you just have the libraries to connect to the wallet to make the request. It's really just a GUI to do something you could otherwise do in a CLI, maybe like any other good front end, I guess. But you're not writing a full stack thing really. It's super decoupled by design. So I could build this with anything. Astro just being my framework of choice because the CLI command is so easy. I'm just like, create Astro, add React. Okay, I'm moving. I can use whatever I want. I just like it as a sandboxing tool. But yeah, it's cool to see it. Basically anything could use it if you want to, as long as it's JavaScript.

00:53:43 - Anthony Campolo

That's right, yeah. Awesome. Are there any other places you want to point our viewers before we close it out here? I'll drop your Twitter. And then we dropped astro.build at the beginning, but I'll include that just one more time for people.

00:54:00 - Ben Holmes

Yeah, those are the main two. astro.build, I would suggest astro.build/hack. Right now we're closing the community vote for our hackathon. I think it actually closes tomorrow at midnight Greenwich time. And if you want to vote on the creations that have been out there, we have a whole new website that's been built by some members of our community that lets you browse all the projects. It's really slick. And then you can go vote on our Google form if you see one that you really like. And we'll use the community vote to decide on the winners that will be announced in the coming weeks. So definitely hop over there. I also did a Twitch stream on this, so if you look at my Twitch streams, previous recordings, you can see me walking through some of these projects. But yeah, that is the thing to check out with Astro right now. I think it showcases a lot of new stuff we're doing. Like if you wrote your own integration, how would you do it? If you wanted to write a theme, like an accessible starter, an e-commerce starter with Snipcart.

00:55:04 - Ben Holmes

Love that project. Authentication. There's a ton of projects there. So check out the recording for that and astro.build/hack as we're closing this thing out. Otherwise find me on Twitter. I'm always around talking tech.

00:55:18 - Anthony Campolo

Yeah. And then of course check out quicknode.com if you are interested in getting an API set up that you can interact with. We don't just have Avalanche, we actually have 14 chains right now. The 14th one is in beta and 13 of them are all good to go. So if you want to do Ethereum, if you want to do Solana, we have Harmony which is the one that's in beta right now. I'm going to be playing around with that in the next week or two. So yeah, we really believe in the multi-chain future here at QuickNode because the biggest insult in the Web3 world is calling someone a maximalist. There's Bitcoin maximalists, Ethereum maximalists. And we're not maximalists here at QuickNode. We think that a lot of different chains have a lot to offer and we want to give developers the ability to work with whichever chain they want to and that has the trade-offs that they want.

00:56:11 - Ben Holmes

Very Netlify of you all. Very agnostic.

00:56:16 - Anthony Campolo

All right, great. Well, thank you so much, Ben. I really appreciate you being here. You're the first guest on these streams. I did a solo one last week. But yeah, I just always enjoy getting to work with you. I really enjoy how you explain things and how you have the perspective of a dev. And I think that enabling devs to work with this stuff and make it really simple and easy for them is so important. And frameworks like Astro are such a huge part of that. Hey, we just got some followers. We have five followers.

00:56:47 - Ben Holmes

Nice, welcome. And yeah, likewise. I mean, your README walkthroughs are always legendary. Very thorough. I saw you copy-pasting everything through there, so yeah, glad it went off without a hitch. Basically debugged your own README live. I would have like three issues if I tried to do that. But yeah, well done.

00:57:08 - Anthony Campolo

Cool. And thank you. We got Prince in the stream there. Appreciate you being here. Someone else from Netlify. And yeah, this is really cool to kind of get some more Web2 people looking at Web3 stuff. I really don't want there to be an us versus them mentality about Web2 versus Web3. I really think that so many of my friends are not in the Web3 world and I think that's okay. But I want to make sure that we're always reaching across the aisle and not making this a battle between the two. I think the two can and should and will coexist. And there's lots that we can all learn from each other.

00:57:45 - Ben Holmes

Totally. Yeah, a lot of opportunities there. Glad we're trying it out with new web tech like Astro.

00:57:55 - Anthony Campolo

All right, that's going to finish it up for us. So thank you all for being here. We'll be back next week. I don't have an exact date yet, but just keep an eye on the QuickNode Twitters and we will let you know. And yeah, thanks so much again, Ben, for being here.

00:58:12 - Ben Holmes

Cool stuff. Have a good week, y'all.

00:58:14 - Anthony Campolo

All right.