Writing Web3 Frontends for Dash Incubator - 2

Episode Description

Anthony Campolo continues his Dash Incubator series, integrating React, Vue, and Svelte frontends with the Dash SDK through an Express backend that handles blockchain interactions.

Episode Summary

In this second episode of the Web Framework Integration series for Dash Incubator, Anthony Campolo builds on previous work by restructuring a Dash SDK project to support multiple JavaScript frontend frameworks. He walks through the project architecture, separating concerns into a scripts folder containing Node scripts for blockchain interactions, an API folder running an Express server, and individual directories for each frontend framework. The session covers running scripts to read blockchain data, creating a wallet, funding it via the testnet faucet, registering an identity, and registering a name on the Dash Platform Name Service. Anthony then constructs an Express endpoint that resolves Dash names, decoupling the frontend from direct blockchain interaction. He builds a React frontend with Vite that fetches data from the Express endpoint, adds state management for loading indicators and a button-triggered fetch, then demonstrates the same pattern working in Vue. The approach treats Web3 as Jamstack by default, where the blockchain serves as the backend and any frontend framework can consume the API endpoint, with plans to extend the pattern to Svelte, Angular, Alpine, and Lit.

Speakers

• Anthony Campolo

Chapters

00:00:00 - Series Recap and Multi-Framework Approach

Anthony opens episode two of the Web Framework Integration series, recapping the previous stream where he wrote Node scripts using the Dash SDK to create and retrieve identities, including registering ajcwebdevtest.dash. He explains the philosophical foundation for the project, arguing that Web3 is essentially Jamstack by default because the nature of blockchain applications enforces a clear separation between frontend and backend.

This separation means the work largely reduces to mapping fetch calls across different frontend frameworks. Anthony describes leveraging ChatGPT to translate a base React component into Vue, Svelte, Solid, Lit, Angular, Alpine, Qwik, and vanilla JavaScript versions, with an Express server handling the backend portion. This sets up the episode's goal of demonstrating the pattern across multiple frameworks.

00:03:15 - Project Setup and Documentation Context

Anthony shares his screen and discusses his ongoing "first look" blog post series, which helps him organize thoughts around new technical subjects. He provides historical context on Dash, noting that Digital Currency launched in 2014 around the same time as Ethereum, making it one of the longer-running blockchain projects.

He references the Dash documentation at dash.org under platform guides, identifying the create-and-fund-a-wallet and identities-and-names sections as the relevant materials. Anthony notes that JSON-RPC may be deprecated, making some existing examples less useful, and announces he'll rebuild the project from scratch. He installs the Dash SDK and dotenv as dependencies and outlines a README that documents the available scripts.

00:06:54 - Project Architecture and Client Configuration

Anthony explains the directory structure he's adopting: a scripts folder containing Node scripts as the base implementation, an API folder for the Express server and serverless function attempts, and individual directories for each frontend framework. He mentions hitting deployment issues with serverless function providers, which is why the current approach runs an Express server.

He discusses the philosophical choice between a single root package.json orchestrating everything versus individual package.json files per directory. Anthony opts for the latter because real users would only build with one framework, not a monorepo of six. He creates a dedicated client file separate from the documentation's pattern of bundling client configuration with each script, abstracts environment variables, sets the network to testnet, and uses ESM rather than require syntax.

00:12:06 - Reading Blockchain Data with Scripts

Anthony walks through the first set of scripts that read data from the blockchain without requiring a wallet. The getBestBlockHash script calls client.getDAPIClient().core.getBestBlockHash() with basic error handling and logs the resulting data. He demonstrates getBlockHash, which accepts a block number, and getBlockByHeight.

He notes one of the scripts returns a buffer that requires careful handling. These read-only operations establish baseline functionality before introducing wallet creation, identity registration, and name registration, which require more sophisticated client configuration including mnemonic-based wallet access.

00:13:39 - Creating a Wallet and Funding via Testnet Faucet

Anthony updates the client configuration to add wallet support alongside the testnet network setting. Since no wallet exists yet, the create-wallet script runs without a mnemonic to generate a fresh wallet. He modifies the script to console-log output formatted exactly as needed for direct copy-paste into the .env file, streamlining the workflow.

After generating the wallet address and mnemonic, he uses the testnet faucet to fund the wallet, noting that sharing testnet credentials publicly carries no real-world consequences. He demonstrates the Dash block explorer, where the unconfirmed transaction appears, explaining how blockchain nodes need to verify the block before the transaction is fully confirmed.

00:16:45 - Identity Creation and Retrieval

Anthony layers additional configuration onto the client by pulling the mnemonic from environment variables and discussing how this enables working with the blockchain without syncing the entire append-only history. He notes that the constantly growing database becomes unmanageable over time, so caching previously read blocks improves efficiency.

The create-identity script generates an identity ID associated with the wallet, which Anthony then uses to retrieve the identity object containing the protocol version, ID, and public keys. He answers a chat question about Dash Incubator, explaining it funds and organizes his current Dash Platform work. Confirmed transactions appear in the explorer, indicating the wallet now holds usable Dash for further operations.

00:22:21 - Name Registration on Dash Platform Name Service

Anthony skips the top-up identity script and proceeds directly to register-name, where he registers "dashstreamtest" as the label. He explains that the script feeds the identity ID and label into platform.names.register to create a new dash name. Chat clarifies that duffs are the base unit of Dash, equivalent to satoshis in Bitcoin, named after Dash creator Evan Duffield.

He troubleshoots issues with the retrieve-name script, which initially resolves to incorrect data before identifying and fixing the problem. The successful registration produces a name object distinguishing the label from the full domain. Anthony explains that the label combined with the parent domain forms the complete dash name, completing the read-write cycle for blockchain interactions.

00:32:28 - Building the Express Server Backend

Anthony transitions to creating the Express server in the API folder, describing it as a unit-test-like single read operation that resolves Dash names. He acknowledges hitting roadblocks both client-side, due to a Webpack minification error, and server-side, due to WebAssembly issues with serverless functions, which may require upstreaming changes to the core libraries.

The server file imports the same Dash client used by the scripts and creates a /name/:name endpoint that takes a Dash name and returns the resolved data via a try-catch block. Anthony discusses deployment options including Docker containers, Linux virtual machines on DigitalOcean, and edge functions on Cloudflare or Deno, while noting that the current foolproof approach is running Express directly. He tests the endpoint in a browser and via curl, confirming it returns clean JSON.

00:38:18 - Setting Up the React Frontend with Vite

Anthony creates a React directory with its own package.json, choosing the multi-package approach so each frontend example stands alone as a usable starting point. He installs Vite and sets up the project manually rather than using the template, walking through the steps of building it piece by piece as a mental exercise.

He configures vite.config.js with the React plugin and creates index.html, main.jsx, and the app component. He grabs a piece of state called blockchain_data, points the fetch at the Express endpoint with "dashstreamtest" as the name parameter, and verifies the connection works. The browser network tab shows the fetch hitting localhost:3001 and displaying the returned JSON, with the name parameter swappable to demonstrate fetching different identities like ajc-webdev-test.

00:46:15 - Adding Interactivity and Loading States

Anthony refactors the React component to make the fetch user-triggered rather than automatic on page load. He moves the fetchData function into a useEffect that responds to a triggered state variable, adds an onClick handler on a button to trigger the fetch, and introduces a loading state that displays a brief loader while the request resolves.

He frames this as a minimum viable product approach, where the goal is the simplest end-to-end experience demonstrating that React connects to Express which connects to Dash. The loading indicator briefly appears before the data renders, confirming the full chain works. This pattern establishes the template that will be replicated across other frontend frameworks.

00:48:50 - Vue Implementation and Series Roadmap

Anthony pivots to a Vue example he prepared earlier, demonstrating that the same pattern translates directly to another framework. The Vue project uses Vite with main.js importing the Vue app and an App.vue component replacing the React equivalent. Running it confirms Vue successfully fetches data from the same Express endpoint, validating the abstraction line where the backend stays consistent while frontends vary.

He acknowledges a minor issue with a null value displaying briefly before the data loads. Anthony already has Svelte and Angular working via the AnalogJS metaframework, with ChatGPT-generated code ready for Alpine and Lit pending his learning curve on those frameworks. He plans to coordinate with Ryan on where the example repository will live and aims to stream weekly, possibly moving to Wednesdays, before signing off for a weekend trip with his partner. The episode ends at 00:53:51.

Transcript

00:00:03 - Anthony Campolo

All right. Hello, everyone. My name is Anthony Campolo. And this is episode 2 of— what's this thing called?

00:00:13 - Anthony Campolo

Web Framework Integration, I think. Yeah. If you saw my stream last week, I started building out some JavaScript stuff with Dash. And we're gonna be continuing that today. Yeah, it was— I learned a lot in a short amount of time about this Dash SDK and the kind of structure of the docs last time. Wrote a bunch of Node scripts that do— hello, hello. Thanks for joining. So, we wrote a bunch of Node scripts that can do creating and retrieving an identity, which is basically like a domain, like a Dash domain. So it was ajcwebdevtest.dash. So we created that and then creating a frontend to basically interact with that data on the blockchain.

00:01:17 - Anthony Campolo

Hello, hello. Looks like we got people watching on YouTube and Twitch right now. Cool, cool.

00:01:26 - Anthony Campolo

All righty. Yeah. And through the magic of ChatGPT, I already have a million front ends for this thing. It was great because it's something I used to always say is that Web3 is Jamstack by default, which basically means that you're always, because of the nature of Web3 applications, you're always going to have a fairly clear separation between your frontend and your backend because there's like the blockchain and then not the blockchain. In this sense, the blockchain is the backend. But once you have kind of decoupled that and you're just calling API, in this sense, the API being the blockchain, all you have to really do then is figure out how to map that fetch call to each different frontend framework. So, I start with React usually 'cause I'm a React kid. And then I was just like, ChatGPT, take this React component, turn it into a Vue component. And it just writes it again in Vue. And I said, do it again in Svelte. Do it again in Solid, in Lit, in Angular. In Alpine. And then it can do Qwik. If I gave it some code examples, it probably could figure it out. And then vanilla, vanilla JavaScript also. So, and then the backend is just like an Express server.

00:02:56 - Anthony Campolo

So, why don't I share my code so we can start looking at what's happening here. Let's see, is my screen all clear? Looks pretty good.

00:03:15 - Anthony Campolo

I hope people are excited for the weekend. Happy Friday, everybody. If you got something fun you're gonna be doing, let me know in the chat what you're going to be up to.

00:03:32 - Anthony Campolo

Okay, that looks good. So we're gonna move that here. Okay. Cool, cool. All right.

00:03:55 - Anthony Campolo

So I'm also kind of working on— I always do these blog posts called a first look at something. So I've got a whole lot of these blog posts, and I find that for me, it's a really good way of kind of organizing my thoughts around a subject. So I'll explain kind of what it is. This intro has also got a little help from ChatGPT. So I talk about a little bit of the history of the project and then the Dash platform. Some of the different libraries we have.

00:04:32 - Anthony Campolo

Let's do this.

00:04:35 - Anthony Campolo

Yeah, so Digital Currency launched in 2014. Pretty lengthy time for a blockchain project to be around that long. It actually means it kind of came out around the same time as when Ethereum came out. EvoNet— I feel like that's why I kept seeing something that looked like that in the library name. Anyway, cool. So, we learned last time that the JSON-RPC is probably gonna be deprecated at some point. So, these examples are not as useful as they were— I thought they were going to be. But let's kind of start totally from scratch here and build up this project again.

00:05:29 - Anthony Campolo

Okay. Let's call this Dash— Dash Stream.

00:05:48 - Anthony Campolo

Alright, so first dependencies is we have this Dash SDK and then .env for our environment variables. And what I did in this README is I start by kind of adding in all of these scripts here. So, last time this is mostly what we were looking at. Is on the Dash documentation, which is at dash.org.

00:06:22 - Anthony Campolo

Go to platform, guides, documentation.

00:06:28 - Anthony Campolo

And mostly it was the create and fund a wallet and then identities and names. These— this set of stuff is what we got now. And I modified the scripts just a little bit to make them basically output your environment variables for you. So I'll show you that in a second.

00:06:54 - Anthony Campolo

Let me just grab this whole thing here. This here. Okay.

00:07:19 - Anthony Campolo

Cool, cool.

00:07:29 - Anthony Campolo

Okay.

00:07:30 - Anthony Campolo

So the scripts that we're going to be focusing on, we're going to be create wallet, create identity, and register name. We can also update our identity. And this is some other ones here about just checking, verifying information on the blockchain. And yeah, top up. Yeah. Okay. And then here, serve. This is what serves the backend.

00:08:10 - Anthony Campolo

So, let's go a little ahead.

00:08:17 - Anthony Campolo

Okay. And then the way I'm gonna break up this project is it's gonna be kind of interesting, it's gonna be the scripts folder, which will be all of these just Node scripts. And these will be, I usually think of this as kind of like the base implementation, 'cause it's just JavaScript code. And ideally you can port that to wherever you need to. Well, I tried to deploy the backend on some different serverless function providers. And some weird stuff happened. So, right now, we're actually gonna be running this in Express server. There'll be the scripts folder, which is going to be all the Node scripts. Then there'll be an API folder where I'm gonna run the Express server. And that's also where I'm gonna put, like, serverless function attempts and things of that nature. And then each different frontend will have its own directory. It'll be a React directory, a Vue directory, a Svelte directory. And then ideally, there will be a root package.json, which will be used to run any of the scripts or the API. And then a second directory that will run one of the subdirectories. So then you'll have two things running at once. So if that doesn't make any sense at all, you will see very quickly what I'm talking about.

00:09:46 - Anthony Campolo

Okay, let's do that, that, this. Let me actually get that in there. Cool, cool. Okay.

00:10:31 - Anthony Campolo

So, we were at the— okay. This is— so, then in the scripts folder, there will be a single file client where we're importing the Dash object and our .env configuration. And this is where we're going to configure our— the thing that actually talks to the Dash blockchain itself. And I'm gonna be abstracting lots of environment variables in the project. So, right now we're setting the network to testnet. You see that in this example here. In the examples in the documentation, a couple important changes that I'm making, which is they always include the client and the client configuration at the top. With the script below it. Whereas I have mine as its own file. That way we're not gonna get confused about how many client objects there are or what they're doing. So, I think that's pretty important. And then we're setting network. I'm also using ESM here instead of require.

00:11:56 - Anthony Campolo

Okay. So, that seems to be pretty good.

00:12:06 - Anthony Campolo

Okay, so now these first couple scripts, let's go through these quickly, are for just reading data from the blockchain. So this will be get best block hash.

00:12:23 - Anthony Campolo

See if that's working, great.

00:12:29 - Anthony Campolo

So that is running client.getDAPIClient, and then you run .core.getBestBlockHash. And then we do a little error handling here, and then we console.log the data like so. So that's pretty standard. Then we got getBlockHash over here. And for this, you're specifying a number.

00:13:11 - Anthony Campolo

It was called like height, or actually no, the next one is, yeah, getBlockByHeight. All right, cool, cool.

00:13:39 - Anthony Campolo

And this one is— it's a buffer, so you gotta make sure to handle that correctly. Okay, so now, now the interesting stuff starts to happen. So we're gonna update our client, and now we're— in addition to the test network, we are adding in a wallet. And the first time we do this, there is no mnemonic because we don't have a wallet yet. We want to create a wallet from scratch.

00:14:13 - Anthony Campolo

That's why we need the create wallet script.

00:14:19 - Anthony Campolo

You'll see here now I'm going to be console logging out the exact things we're going to need to copy paste into our .env file and makes it pretty clean and easy to deal with. So this is going to create this new wallet which has a wallet address and a new mnemonic— and having access to this gives you access to the whole wallet and everything on it. So obviously you do not want to share it with the world on a stream, but this is all just on testnet, so no harm, no foul. Okay, so I copy paste that into .env. And then they have this testnet faucet.

00:15:12 - Anthony Campolo

Go ahead and give myself some Dash. Not a robot. Uh, duh duh. Let's see if that works.

00:15:32 - Anthony Campolo

By the way, this is not secure. Not good, not good. Success. Okay. And if you want to check out the Explorer, so this is where you can see what is happening on the chain of blocks that is the blockchain. And since we just did that unconfirmed transaction, you need to put that transaction on a block and verify the block on a bunch of nodes first. If we pop this open, you can see more information. Yeah, so this is the wallet address, and then this is the transaction itself. So we will let that sit for a second and— okay, so now that we have a wallet, we are able to use that wallet to register an identity. So an identity is what's going to be basically our domain.

00:16:45 - Anthony Campolo

So this is back under script.

00:16:50 - Anthony Campolo

So now we're layering on a couple other things. We have the mnemonic we're grabbing from our environment variable. And this is for letting you work with the blockchain without always having to sync the whole history and state of it.

00:17:08 - Anthony Campolo

Bump that up just a little bit.

00:17:13 - Anthony Campolo

That just being because when you have a blockchain that is append-only, then you end up with this longer and longer basically database of information that gets bigger and bigger and more unmanageable as the years go on. So, what this does is it says, like, hey, ignore, block this through that because ideally it should never change anyway. So, once you've read it once, you should be able to kind of cache it. But now let's do the create identity.

00:17:47 - Anthony Campolo

Okay. So, now this is where it starts getting interesting. So, what I am going to do here is the identity is going to have an ID associated with it. And then we're able to use that ID to retrieve the identity or retrieve the identity ID itself. Okay. So, let's just do that first. Okay.

00:18:26 - Anthony Campolo

Create identity first. Boom. Okay. Great.

00:18:32 - Anthony Campolo

And so, this is gonna do the same thing where it's going to basically console.log us out exactly what we need here.

00:18:50 - Anthony Campolo

Okay, taking its sweet time.

00:19:10 - Anthony Campolo

So this is what I was saying about why you want to— not have to sync the whole chain. So I think that is why it's taking some time. When Evo?

00:19:23 - Anthony Campolo

Uh, that's a good question. What is Evo truly though? Okay, let's just head up here while this is thinking. I'm wrong here. Interesting.

00:20:09 - Anthony Campolo

Oh, there it goes. Sweet.

00:20:13 - Anthony Campolo

Okay. So, this is now our identity ID. And you can use that to retrieve the ID. Or the identity. That's good, that's good.

00:20:37 - Anthony Campolo

AJ says, the Dash Incubator will be the main driver for Dash adoption. What are you guys working on? Yeah, the Dash Incubator seems pretty sweet. That's kind of what is funding and organizing my work. And I am working on the Dash platform. Okay. Should be all good. So now we're taking the identity ID and feeding it in and then running platform.identities.get and then console logging out the data. And we see we get this thing here, and it looks similar to this here. So it tells us the protocol version, it gives us the ID, and then we have some public keys.

00:21:36 - Anthony Campolo

Let me include the one, this one.

00:21:55 - Anthony Campolo

Alright, now we got these two public keys here. If we go back and look here, we should see that we start to have some confirmed transactions. So that's cool. We got some Dash in this wallet now.

00:22:21 - Anthony Campolo

Okay.

00:22:22 - Anthony Campolo

So, this now will retrieve the identity ID specifically. So, that's gonna print us out an array with each of the IDs. So, we saw— here we had two public keys, each with an ID. And then top-up identity, this is— there's something called credits. I'm not super clear on— I think they might be like gas. It's kind of the first thing I thought when I saw it. Gas being how Ethereum kind of moderates demand. People can pay more gas to speed up a transaction, but that might not actually be the best example or comparison. And something called duffs. Yeah. So, something I'll have to ask Ryan about more.

00:23:46 - Anthony Campolo

So, cool, cool.

00:23:48 - Anthony Campolo

Great. So, there. Actually, we just have the one. Because— yeah. It's— this is the idea is grabbing— okay, so I'm gonna skip a couple of these. I'm gonna skip top-up identity and go right to register name. I'm gonna create new name now.

00:24:31 - Anthony Campolo

So yeah, this is what I want to change. Cause, warn I.

00:25:07 - Anthony Campolo

Okay, whatever.

00:25:10 - Anthony Campolo

Okay, so yeah, label, that's what it was.

00:25:30 - Anthony Campolo

Okay, I'm just, I'm second-guessing myself because I had done some work yesterday that I'm not seeing now, but anyway, I'd abstracted this out to its own environment variable called label, but not really that important. Let's change this to Dash Stream Test. Yeah, a little wordy, but should be fine. Okay. And we're already feeding it our identity ID. That's all good. And then it should output our name back to us if all went according to plan. So this is feeding in the identity ID and then running get ID and then feeding in both of those things along with your new name to platform.names.register.

00:26:44 - Anthony Campolo

And then we run the function and console— duffs are the same as Satoshis in BTC.

00:26:52 - Anthony Campolo

They're the base unit. Ah, okay, so that makes sense. Still confused then what credits are and how credits have to do with all this stuff. Because that's simple. That's just cents versus dollars, you know.

00:27:18 - Anthony Campolo

So, on register. Yeah.

00:27:24 - Anthony Campolo

So, right now we're using the Dash platform name service. Cool. Looks like it worked. So, now we got this dash name, which is dash stream test. And retrieve name.

00:27:43 - Anthony Campolo

It's called Duff. Because of R, the creator of Dash, Evan Duffield. Cool.

00:27:49 - Anthony Campolo

Whenever I hear Duff, I just think of Duffman. So, Duff is a beer, fictional beer in The Simpsons.

00:28:05 - Anthony Campolo

Okay. Retrieve name. All right.

00:28:22 - Anthony Campolo

So, this object here is your Dash name. Okay. That did not exactly work. This is not retrieving what I want to retrieve right now. That's because— duh. It's resolving to this right here.

00:29:17 - Anthony Campolo

There we go. Ah. So, this actually— I know what's wrong. I want that and this and that. That should do that now.

00:29:44 - Anthony Campolo

Okay. Okay, not quite.

00:30:18 - Anthony Campolo

Mm, okay, that's where I messed up. Boom, now we're talking. Okay, so yes, yes, yes, yes, yes.

00:31:04 - Anthony Campolo

So, now I see this is the one we just created, dashstreamtest. Cool. Cool, cool, cool. Cool, cool, cool.

00:31:14 - Anthony Campolo

So, you can kind of differentiate between these two if you want. This is the label. And this is the domain. And this is the dash name. It's when you put the two of them together. Sorry, I'm gonna just grab some water very quickly. I will be right back. Okay.

00:32:28 - Anthony Campolo

Confirmation are still ticking up over here. Okay, so those are the main things to do for interacting with the blockchain itself. So, we can kind of imagine creating some sort of frontend with inputs that lets you feed in this data as you go. The way I'm going to be structuring this is I'm— I started by first doing this part and having it be kind of abstracted out. And then now I just want to have a single read operation on the blockchain to basically give you back this right here. So we're gonna be running this, we're gonna be resolving the Dash name to get it back. And then I just want to have that be like a single— you think about like a unit test almost for each front end. So the first one you have React, and so you need to just have a React frontend that is calling this somehow. So, to do that, we're gonna use this— we're gonna create an Express server here. This is gonna be the really interesting part 'cause this is where I hit some roadblocks that may require upstreaming some changes into the core libraries themselves 'cause I was hitting issues both trying to run this in the client because of some Webpack minification error. And then also on the server side for using like serverless functions because there's a WebAssembly thing in there that was getting confused. So, at this point, it seems to run nowhere, which is not tight. But because you can just run it in a server— this is kind of the simplest, most foolproof way of doing this. So, I'm gonna want a server script. Yeah, just like that.

00:34:55 - Anthony Campolo

Okay, great, great. Great, great, great. I'm way ahead of myself. Okay.

00:35:02 - Anthony Campolo

And this is our server. So, this is still using the same Dash client we were using before, which is pulling in our mnemonic from here.

00:35:19 - Anthony Campolo

And change that to serve.

00:35:28 - Anthony Campolo

Okay, so we're creating an Express server, and then we're gonna create an endpoint, which is going to be /name/, and that's gonna take something, which will be your identity name, and then it feeds that name into the resolve function. So, ideally, you could take any name you want and then look up someone's information. It's kind of the whole point of having some sort of domain name thingamajig, dash platform name service. This is kind of a fairly, you know, generic reusable piece of functionality that has now been kind of turned into an endpoint. So, this endpoint right now is just being served. We're gonna serve it as an Express server. On localhost. And then you can kind of extrapolate that. You could turn that, you could take that and deploy it with a Docker container. You could deploy it on a virtual machine, a Linux virtual machine on DigitalOcean, just run straight up Node on Linux. Or you could do an edge function now, Cloudflare, Deno, stuff like that. So as I was saying, I hit roadblocks with both serverless functions, which were on AWS Lambda. And then don't know if I actually tried any of the edge functions yet, but those are usually the most complicated and most recent. And we're just gonna do a try-catch here. So that'll give us the data back. Or it will error. Okay.

00:37:14 - Anthony Campolo

That's all looking pretty good. Serve this.

00:37:25 - Anthony Campolo

Now, as I was saying, this basically just gives us an endpoint. So, we gotta change that to dash stream test. And we should be able to both open this just in a browser if we want, we're gonna see it's just straight up JSON object. Look at that beauty.

00:37:44 - Anthony Campolo

Or if we want, we can curl it like so. So that's our endpoint. And that's pretty, pretty sweet. Because as I was saying, now, that is what allows us to then decouple this from our front end. So we have now a backend running on a server, host 3001. And now we're gonna do this. So, I need to modify this actually.

00:38:18 - Anthony Campolo

To create React directory. Yeah. Okay.

00:38:29 - Anthony Campolo

So, this is where the mono repo type stuff comes into play. Let's do that. Let's do this.

00:38:45 - Anthony Campolo

So, we're gonna have package.json. So, there's— there could be multiple ways. So, there's kind of two important philosophical approaches you got to think about when you do this is do you want a single package.json in the root that orchestrates everything else? Or do you want a bunch of individual directories that each have their own package.json? And you can think of this as, do you want a microservice approach? Because if you're going a microservice approach, then you kind of want to figure out how to manage them all from a single package.json. But I am more concerned with creating a bunch of different examples that each would be their own project. So, if someone actually was going to build this, they wouldn't build a monorepo with 6 different frontend frameworks. They're not a weirdo like me. They would just use one of them. And they would use React or they would use Vue or they would use Svelte. And so, whatever that single directory within my larger directories, that would be their project. That's why I'm going the approach where I'm gonna create a different package.json for each of these. So, if you were to actually create a new repository, you would be able to have that be the way you would do it.

00:40:14 - Anthony Campolo

Okay.

00:40:17 - Anthony Campolo

And then these are the dependencies you need to add. We're gonna be using good old Vite. And now, let me grab some of these scripts. So, I'm gonna want this one, these ones. Okay.

00:40:59 - Anthony Campolo

Uh, okay. Okay.

00:41:46 - Anthony Campolo

And I could do this with the Vite template, but I kind of like walking through the steps of actually building it piece by piece. And so it's a useful mental exercise. Okay, so we got our vite.config using the React plugin.

00:42:13 - Anthony Campolo

I'm gonna just, hold up, hold up. Actually, no, 'cause I'm already in.

00:42:38 - Anthony Campolo

Alright, so, this scaffolds out the main things we need. We're gonna have an index.html, which is gonna import from main.jsx, main.jsx importing our app component. Come back to that in a second.

00:43:05 - Anthony Campolo

Let's grab all of this. Okay.

00:43:16 - Anthony Campolo

So, this is going to create a piece of state. And set it in a variable called blockchain_data. Probably give that a better name, kind of representing the fact that it's hitting this name here. Let's go ahead and change that to Dash stream test. And this should still be running over here, so we know that this is still chilling. That's good. That's good.

00:43:54 - Anthony Campolo

And this is the thing that I had ChatGPT write in a whole bunch of different frameworks. So this should do— this should be client or dev, right? It was. Yep. Okay.

00:44:22 - Anthony Campolo

Okay. Moment of truth. Bam. That's how you know it worked. That's why they pay me the big bucks. So, if we look in the network over here, we can see that we have these fetches happening right here. So, that's fetching from here. And then it's displaying out this data like so.

00:44:48 - Anthony Campolo

That's stream test.

00:44:50 - Anthony Campolo

And if we wanted to, we could just change the name of this to ajc-webdev-test. And then we'll get different data back here. So the React boilerplate is basically the Vite starter template.

00:45:25 - Anthony Campolo

Oh, I spelled this wrong. There we go.

00:45:35 - Anthony Campolo

So it's very similar to create-react-app, but it's using Vite instead of Webpack. And this is pretty much the recommended way of doing this these days. I am a heretic and I'm using JavaScript and not TypeScript right now. But if you wanna check out, here is basically what I'm working with here. There you go.

00:46:15 - Anthony Campolo

Okay, so one crypto with the same name. What do you mean?

00:46:32 - Anthony Campolo

Okay.

00:46:33 - Anthony Campolo

Now, to kind of abstract this out a little bit into more composable functionality, I want to have a button that will allow me to actually trigger this fetch. Because right now, it just happens as soon as you open the page, the useEffect runs and it just gives it to you, bam. But I want to have a little more control over that.

00:47:01 - Anthony Campolo

Let me do this. Let's keep consistent. Okay.

00:47:15 - Anthony Campolo

So, with this now, I'm going to have a fetchData function as being put in the useEffect. And then we have an onClick handler that will trigger the fetch. So, now we have a separate piece of state that will hold whether we have triggered the fetch or not. And then we have another piece of state to display a little loader while it's loading. So, that looks like it will be all good. Boom.

00:47:59 - Anthony Campolo

Boom. Good. All right. Awesome. So, we saw there how for a brief second it says loading and then it gives us the data. So, that's kind of like when I'm thinking of how to create like an MVP, minimum viable product, that this is what I like to do. Where, you know, I want to have an end-to-end experience. Like there needs to be an app. Needs to be connected to a thing. What is like the simplest possible thing I can get it to do that shows that the thing is connected to the other thing? So, this is the thing, React, connected to the other thing, Express, connected to the Dash. And great.

00:48:50 - Anthony Campolo

So, let's look ahead now.

00:48:54 - Anthony Campolo

So, I'm not gonna deploy this because that part is what was breaking. But just to give you a little taste of what's to come. Let's take a look at one of these other examples.

00:49:09 - Anthony Campolo

So I already had some examples. Okay. There we go. I'm gonna pull in Vue. Yep. Uh-huh. Great, great, great.

00:49:55 - Anthony Campolo

And then after I show how I do this, I'm gonna log off 'cause I'm taking the weekend off, going to nice little place about 2 hours away with my partner. And so, we wanna leave in like an hour or 2 for that. Okay, so this is now going to Vue. I got here, this is again another Vite app. This is why Vite is super sweet because that's what's managing each of these different frontend frameworks.

00:50:33 - Anthony Campolo

Probably want to change these to the other ones were.

00:50:46 - Anthony Campolo

Again, we have index.html. And now we have a— instead of having a main.jsx, it's just a main.js. We're just importing our Vue app. And then this is like the app.jsx, but it's app.vue.

00:51:06 - Anthony Campolo

Yeah. Make sure I save this over here. Okay, right here.

00:51:27 - Anthony Campolo

Okay, so now we have that going. We can actually run it. Uh, let's do this.

00:51:51 - Anthony Campolo

See if that all went according to plan. So now notice how we got Vue there. Great. Okay. So still some things to work out with that null that it's showing in the beginning. You don't want that. But, and then did I have a loading? Yeah, I have a loader already. Great, cool. So this is now where we can kind of see where the abstraction line happens. We have this Express server running here, and then we can create as many fronts as we want that hit that endpoint, which is managing the connection to the blockchain itself. So there are going to be a whole bunch of different frontend frameworks that are going to be doing this. So, I've already got Svelte working along with React and Vue and Angular via AnalogJS metaframework. And yeah, and then I already have— ChatGPT wrote me the code already for Alpine and Lit. And I've never really used either of those frameworks. So, that'll take a little time for me to just get that set up. But yeah. So, I'm probably going to— there's gonna eventually be some sort of repo that's gonna live somewhere. It's gonna have all these examples in them. And I'll talk to Ryan about what's gonna be the best way to manage that. But yeah. Thank you everyone who was hanging out and watching. This was super fun. I'm going to aim to do this once a week. So hopefully next week. Might be earlier in the week. Still kind of working out the day. Might be Wednesday. But keep an eye on the Dash Incubator YouTube and Twitch. And I am, of course, AJC Web Dev on the internet. And yeah, this will about close out for me. So have a good weekend, everybody.