Learn Blockchain, Solidity, and Full Stack Web3 Development with JavaScript – 32-Hour Course - Ep121

and basically rentright but snoop dogg vegas showyou need them to create aprovider or a node to send yourtransactions to so you could do it inJavaScript like something like this isthe Alchemy documentation where you youtake that Alchemy URL you stick it intosome object and use that to send yourtransaction this is a way that you coulddo it in the back end but on the frontend what you normally want to use is youjust want to use the user's metamask ortheir salana or their wallet as the mainwallet now there are a ton of otherdifferent types of wallets to connectlike Ledger Mew coinbase wallet connectEtc and there are different ways to setthose up but they all do the same thingwhere they expose some URL they exposesome node under the hood they give usthat URL they give us that provider theway metamask does it is with window.ethereum boom this is now our URL thisis now ourconnection in fact if you go up to yourmetamask hit the little three dotsexpand Viewhit add Network and then just hit the Xso we can get to networks you can seeall of these blockchains that I have inhere all have an RPC orl this is theHTTP RPC orl connection of theblockchain node that's running I happento have one running locally rightnow all of these also have a node RPCURL and you can actually see them rightin your metamask right this is connectedto infura these are all connected toinfura these are it's all the exact samething menam Mas just has a really niceway of taking that URL sticking in thebrowser for us in this window. ethereumor window. Solana you know or whateverso this is the main thing that we needto know we need we always need aconnection with the blockchain and thesebrowser wallets are an easy way to dothat make sense great let's take thisknowledge now and let's apply[Music]it so in here let's make a quickreadme.md just so we can talk talk aboutwhat we're going to be making here so inthis section we're going to be using rawhtml/javascript in conjunction with oursmart contracts to build this websitelater on we will use nextjs react whichis a more modern stack to build ourwebsites here but learning understandinghow to do everything with HTML andJavaScript first is going to make ourlives a lot easier come later on downthe road as we know all websites useHTML as kind of their scaffolding forwhat they look like so let's go aheadand create create our HTML for ourwebsite we'll call itindex.html and this is going to be thebasic scaffolding or the basic bones ofwhat our website is going to look likenow in VSS code if you go ahead and justtype exclamation mark in anindex.html and you click the first thingthat pops up it'll automaticallypopulate your code your file here withsome basic HTML setup if it doesn't dothis for you feel free to copy paste thebasic setup from the a repositoryassociated with this course we have ourdoc type HTML we have some HTML tagstelling us that everything in betweenhere is going to be an HTML which isgreat however for Simplicity we don'tneed most of this so we're going to makethis a little bit easier we're going todelete this line this line and this lineand we're just going to change the titleto fundme app and then inside of ourbody we can do something like hi orhello and now we have the Bare Bones tocreate a website just with this now toshow this on a website we you can do oneof two things if you are using visualstudio code I'm going to recommend youinstall the extension live server and itlooks like this and I'll have theextension ID for this extension in theGitHub repository associated with thiscourse this is going to allow us toeasily spin up an HTML website so we'llgo ahead and install this and if you'renot using visual studio code I'll showyou a different way in just a secondonce this is installed you should havethis little go live button at the bottomand if you don't you can always open upyour command pallet which again you canopen up by hitting view command palletand you can type in Live server and justsay open with live server but we'regoing to just click this go live buttonand it's going to say starting and it'sactually going to open up your browserwith our index.html we can actually seeour website is being hosted on 127.0.0.1this is known as the loopb or Local Hostendpoint we're on Port 5501 if you'renot familiar with the ports don't worryabout that for now but we have ourindex.html here and if we change this tosomething like what's good we hit saveif it doesn't automatically refresh wecan come over here and refresh and wecan see that being reflected here ifyou've never created a website beforeyou've essentially just done itcongratulations you might get this vscode folder a vs code folder allows youto make settings specifically for therepo that you're working with for yourcode editor for vs code but we're goingto mostly ignore it for now now ifyou're not not using visual studio codewhat you can do is you can just run thisin the browser so one thing you could dois you could rightclick it and I'm usinga Mac so I'm going to hit reveal andfinder AKA reveal where it's located andyou can just double click it and boomnow it's running right in your browserinstead of pointing to your local hostit's going to be pointing directly toyour local file path now one finalversion that we could do that I'm goingto highly recommend you don't do butit's another option we're actually goingto download a package for you usingnode.js which allow us to serve up HTTPand we're going to install it the exactsame way we've installed our otherpackages we can do yarn add- ddev HTTPhyphenserver and you may still want to add itanyways but now we'll get some nodemodules for this HTTP server packagewe'll get a package.json and of course ayarn. loock as well and what we can dois we can stop this down here stop thatlive server

(Editor: php)