to that node or ai revolution 2025that piece ofcode so what we're going to do is we'regoing to have you install the ipfsdesktop so you're going to hit that andwhen you do that you should be able toopen up ipfs now if you install it youmight get this little guy this littlebox here in your upper section otherwiseyou might be able to open it up withwith ipfs desktop and see it as a aregular desktop app once you install ityou might see ipfs is running you canrestart stop you can do all this stuffwe're going to go to the files sectionand we're going to get a little popupthat looks like this now I've got a tonof stuff in here because I've been usingipfs for some time in here right now youmight have no data so let's just goahead and import some file and maybe fornow we'll just import you know our next.config.js right it doesn't matter justimport something and now in here we havethis next. config.js or whatever fileyou imported so what we can do with thisis we can actually copy the CID and wecan view this in our browser so if we doipfs do do/ slash we paste it in we hitenterwe can give our browser access toactually rendering ipfs URLs if you'reusing Brave you can just do use a bravelocal ipfs node or let's go ahead anddownload this ipfs companion so we'llhit get ipfs companion there's a Firefoxinstall for Chrome Brave blah blah blahI'm so I'm going to go to the ChromeStore to get it for brave we're justgoing to hit add to Brave ADD extensionbut once you download it you'll getsomething that looks like this even inour little browser companion we can seelike import Port we can see stuff aboutour node if we click our node we we'llsee a very similar setup but now that wehave the companion in our browser we cancopy that CID that hash now Brave we canjust do use Brave local ipfs node andwe'll automatically get dropped into thefile now if ipfs companion doesn't workfor you and you can't see the URL insideof something like Google Chrome or someother browser what you can do is you canuse something called the ipfs gatewayNow using a gateway you're not actuallydirectly requesting the data throughipfs you're requesting the data throughanother server which is requesting itthrough ipfs but if you are having sometrouble accessing these files you canuse the Gateway so what you'll do isyou'll dohttps SLipfs.io slfs SL and then paste the hashcode there and you'll be able to seeyour file now if you do it like this youwon't even need ipfs companion at all sowe're going to deploy our website toipfs so that anybody else who wants topin this can and we will now have theability to have an Incorruptible andunpulled downable website which is justawesome we're going to learn how to dothis the raw way first and then we'regoing to use a tool that's going to makeit a lot easier for us okay so firstlet's go to our our website here and andif you want to deploy to rink be goahead feel free just remember to makesure that your contract addresses fileupdat dates accordingly okay now nextjshas the ability to create staticwebsites and that's going to be animportant term to know we're going tomake a static website at the moment wedon't want our website to be Tangledwith any server stuff and the reason wedon't want it to be Tangled with anyserver stuff is because if our websiteruns with server stuff and we deploy itto ipfs well ipfs doesn't have theability to run any code it just hostscode if our front end has any serverstuff it won't work now in its currentstate ipfs can't come to our project andknow what to do right it doesn't knowhow to do yarn Dev it can't do yarn Devso we need to put all of our code intoits static equivalents so to do thatwe're going to do yarn build and ifagain if we look at our package.json itcomes with this build which just runsnext build and running this buildcommand is going to build our codewhat's called like a production buildcreating an optimized production buildhere and we'll get something that lookslike this and we can see this point downhere static automatically rendered asstatic HTML uses no initial propsthere's some server-based applicationsthat nextjs comes with that if we usethem our static build won't work andactually you'll see when we run yarnnext export it'll fail if you have anyof that non-static stuff so let's goahead and try yarn next export and let'ssee if it fails it didn't fail we nowhave a new folder called out and this isour folder that's just pure static codeand that we can use on ipfs in a latersection I'll show you what it looks likewhen you don't use some of those staticthings both Morales and nextjs have theoptionality to not have static code sowe'll just want to keep that in mind sonow that we have this out folder we cango back to ipfs and we can import afolder we're going to import that wholefolder in here so hit the hit thatimport button and go to the folder wherethat is mine is in nextjs smart contractLottery out so now we're going to uploadthis to our ipfs node once it's donewe'll get this little check mark and wecan go through our ipfs files and seeour out here what we can do let's goahead and pin this to our node we'll pinit to our local node here and now onceit's up we can copy the CID we can goback to Brave or Chrome or whatever wetype in ipfs col slash paste that inthere and we immediately get droppedinto our smart contract lottery in abrowser now we see high from Lottery noraffle address detected because rightnow the way I set mine up was it onlyworks with you know our local hard hatso let's connect our metamask we'll hitthe connect button connect and voila weare right back where we were but withour data stored

(Editor in charge: c)