Adding serverside rendering to Astro with Tim Benniks & Bryan Robinson

[Music] [Music] all righty Dan we are yeah how are you this morning Brian I'm doing pretty good Tim pretty good I I just realized so like this is gonna be a really weird way to start the stream right but I cut my finger last night cooking my index finger which is as it turns out if you're right-handed you use it a lot when you use a trackpad for your main input device so I'm using yes I'm using a whole combination of things and typing's a little weird and it's gonna be it's gonna be a great stream I don't cut myself way to ask you to type something no yeah exactly well I'm doing okay with it I'm doing okay with it right now but it's one of those things where I never um I never hurt myself cooking during the actual cooking process so like you know my KN my knife skills are solid I've kept myself in the past on my knives cleaning them and I happen to cut myself on this tool that I've got that like uh dices carrots real easily and I was cleaning it and I got myself it's basically a glorified paper cut uh but you know what we can call this you're not temporarily in need of accessibility on the website you know that uh have you ever seen that Microsoft diagram for accessibility needs um I'll I'll let me Google it real fast we we'll talk about what we're actually gonna talk about today but there's a really great diagram that showcases the idea of permanent temporary disability and I think it's really interesting yeah because nobody thinks about the fact that if you are carrying a baby and you need to make your train and you have to look at the timetable you're going to do that on your pH probably and then you have to walk there you're literally temporarily disabled at that moment you need accessibility so the temporary bit is very important anyways that's not what this dream is about but you can pretty excited about it you know how we are right anyone who who's been on the stream before knows but this is the diagram I'm talking about right where it's got this idea of uh permanent temporary and situational so like touch there the baby Y and like for me right now I'm in this kind of temporary area where I'm not using my index finger right like but there's permanent and then yeah there's the idea that like you're holding a baby or like when you've got auditory right like if you're at a bar you're basically have this this issue right this situational uh thing so I I think it's really interesting to think about like this is not I mean a yes very important that people with the permanent issues are taking care of yeah but we all have some sort of issue every once in a while like it's very important to remember anyway okay people accessibility okay stream over no it's not I'm just kid done all right honestly if that was true that could have been a great stream because this is a huge thing so um today we're talking Astro right yep Astro it's it's a big week for Astro Astro and netfi just announc new partnership stuff they're they're launching some new features we're not necessarily going to talk about those we're going to talk about more the uh not the lwh hanging fruit right but the the important things that you might not be aware of when you're using Astro with a headless CMS exactly and one of such things well there there's a few things because Astro of course is really really good at just statically rendering your page and giving you all the DX that you want Brian and I are big proponents of stuff like that we actually still like to use the word gem stack sometimes I right oh no is this another Rand are we gonna talk about estro at one point it's an amazing thing I I did a stream uh months ago now uh on the future of the jam sack and there's a whole bunch of stuff I think that's a really interesting space still static that we sometimes we like to call it now instead of jamack it's It's static first or HTML first or you know something along those lines um exactly yeah um your screen share is making some sound what so just click mute your screen share just for take off my screen share because we don't need that's fine too all right so what we'll do this to to today is I built this High graph starter right so when you go to hyra.com to our dashboard and you want to start a website and it's you want to do something like luxury cosmetic shop like thingy with still page building you can use this um starter and so this is build an Astro and so what we realized this is fully static so it's super fast it works nice it's just all the cool Astro things right that we know and love however what we also want is to have for example a newsletter subscription box just to demo how that would work in high graph but also how would we do that um inside Astro if it's server rendered or static rendered or do I have serverless functions do I have API endpoints I don't really know and so when I built this demo I kind of just not implemented it well while I did do it next and next right and so we also have something now about previewing my work because let's say I do a whole thing in the CMS you know when we go to the CMS here and then we have a homepage I want to actually preview this work if I haven't published it yet how would that work in a static site um like I know like knjs used to have like a preview mode where it would only render like client side and if you liked it you can then hit publish and it would just render it statically but something like that doesn't exist in asro because it can do all the JavaScript it it just by Design doesn't exist something like this it is is HTML first right it's static first um we kind of like that though right and and the and the great thing right is theoretically let's let's take a step back too about preview like we'll talk about preview second half the stream probably um but when we're thinking about preview the nicest preview experiences are going to be with these like with the new meta Frameworks right this idea that I can still server render when I need to and that allows me to do the preview allows me to change my endpoint to get draft content instead of publish content however even if you're using old school stuff right even if you're using uh 11 is not old school 11 is about to go 3.0 soon um but something that is pure static with no serers side rendering right you can still do preview you just have to then work it into your build process right have a have a preview branch that goes up when you make new content and then you can preview it there it just takes a little longer isn't quite as we've seen that even being implemented at netlify for example where they had that like a preview ability of something and they would just make a branch right Y and then query that branch and then show that and every change would build a new build the thing is if you do that it's pretty expensive though and it takes a second yeah and it's also there's time right and yeah like some some static generators are incredibly quick Hugo 110 very very quick Builder exactly yeah some like if you were to run next in the old way where you could run it pure static you can't really thing right yeah and it was it was actually an incredibly slow static site generator that's true for the server stuff that it's doing now it was a slow static site generator so if you wanted your preview to take three minutes to build you could do it that way but the better way in the modern meta Frameworks is kind of the server rendered situation that we uh we can show or this kind of strange client site only props render generation thing which it was n too right so I'm talking about a year a few years ago and actually always went wrong because sometimes you need a server context if you want to draft query something and then it it was hard and here here's like the the hot the hot take around like you know the thing on the meta Frameworks right now and this goes for like all the big meta Frameworks is they're doing server they're doing client and they're doing static they're doing them all together at the same time and the context doesn't necessarily change but the context like for us as developers it doesn't change but for how the code is running very different so you have to be like real careful about where you put your window stuff where you put your node stuff like it all still matters very importantly but like the single file architecture on some of them makes it feel like I can run anything anywhere and that's not the case like react server components very different from from other things like I don't know oh boy don't let get me started I had to try something some hook somewhere that could that I I needed to go to a server component for something specific oh no I needed to go to a client one but then that hook wouldn't work in a client component and then my brain broke after reading the docs for like two seconds yes and and like that's that's the context right the the human context that we're in when we're working on it does not feel different at all which can be very solid developer experience right it can be very comforting that your code just is you know kind of the same everywhere until you hit the cases it's not and then it's like I don't understand this especially like as an average developer not somebody was up on the latest on everything like the average developer is g to get frustrated with that it's gonna end up being a poor one anyway I might interject there that if you w to have no if you want to have black magic and you just want to code something and it works in servers and client go for next because they cracked that nut again if that then goes wrong you have to open the box and figure out why that's worse contact Daniel Ro you say hey please you just asked Daniel and then it's fixed I'm not how long I can keep that up anyways let's have a look at this because you pointed me to this so Astro actually has rendering modes why did I not know this I'm not sure is this new or here's the thing it's it's actually pretty old at this point uh but you're not your focus hasn't been Astro and this is the development in a nutshell right your focus was n a little bit on the next side a little bit on some other modern stuff if you're not up to date with all the Frameworks all the time the these sorts of things will slip by you and here's what's great about this and this is again the Astro philosophy of the HTML first the static first is there are actually multiple output types right so you don't specify serers side rendering right and you get pure pure HTML it's pure static everywhere every route this is the default essentially right here you can even do readon API routes right you can do static API routes that can generate in your build process data that you can then use as an endpoint super cool I like that a lot so that base is what we see here right when I go to my page here I have a get page function I have a little queries one here Y where I just query High graph get back that data and it just you know gives it here as page and you can do whatever you need to do it it creates the HTML for you it builds all the routes for you uh but also what I'm talking about is you can do API with this too you can make something that can be that you can do a get request to and you can get data now that data also do yeah interesting ah so while it's building it's spins up something that runs as a server so we can query it at that point or something it it creates Json files basically but creates them potentially in a rest style format depending on bayad Json approach okay exactly um but that's that's just like pure static and we're not going to do that today right because we want to post we want to accept data so we do need a server uh to do that and there are two output mod exactly so just for people who just came in we want to do a newsletter subscription thing that mutates uh something on the CMS so we need some sort of server code somewhere sorry continue Brian yeah no we need server code somewhere and Astro thinks of it in two different ways and the great thing about both of these ways is it gives you the functionality of both sides it just changes the syntax a little bit so that you decide what to opt in or out of so you've got two outputs you've got server which is going to render the entire site server rendered right that index page that you showed then becomes a server route as opposed to a static route okay sure so you can do that and then you can opt out of that for any routes you need that you want to be static so that would be this one yeah so you I can't remember the syntax it's in here somewhere but basically you say I want this to be a pre-rendered page I want this to be static page okay and then the opposite of that is hybrid hybrid says all of my routes by default are static routes and then I opt in for Server rendering for whatever routes I want so with the two things that we're potentially doing today depending on time accepting accepting a form submit and live preview right if we're just doing accept form submission I would go with hybrid render all of my pages static but render my API route as a server rendered page ex right as a server rendered route if we want to do the live preview the easiest way on doing that is going to have any page we want to preview in server mode so that we can pass it the right stuff and act on basically what ends up being user input with us saying hey this is preview mode um exactly because then the server can just run their draft queries and then suddenly it's preview mode exactly and so what we can do is for today I think we're going to go output server but know that if we decide any of our routes make sense to be static we can set pre it's like export const pre-render equals true I think oh like that oh that's nice and easy y so any route we want to be static gets that in its front matter and it's done that's pretty cool yeah like that's the DX man the front matter stuff I love it I think next has some functionality like this as well I just yeah it's like use client in quotes I remember that from the use trick days and it just gives me pain in my backside remember that time I actively avoided that time yes I agree so you can see my Integrations here I have tailwind metax and S map that's why there's a s property here so it can make my S side map on build so there might be some sort of hybrid thing going on anyways in the build now so what's happening in the build there it's not a hybrid thing right what's happening there is that um when you've got a site map you need to be able to have your full URL in that sit map right exactly and by default you could hardcode it right like if you were if you were coding up a sitemap function from scratch you could hardcode that in but what Astro has done is for the sitemap integration that you've got you run site map as an integration and then it's going to grab that site and it's going to prepend it to all the relative links that it generates right all the static links the generate essentially exactly so that way you've got it but the nice thing is if you ever need your site URL you can do that as well and since this is also JavaScript you could also potentially dynamically generate that based on um environment variables right if you're using netfi and it notices it's a production build you could have that you could also probably insert in there like the netlify or the verell U URLs that automatically come in because it's all just JavaScript exactly cool so I said it to Output server does this do it no I was ready for that partially right but I believe if you ran this right now Astro is gonna give you an error so let's actually see that right because I think it's important to show you know what this kind of thing can look like and we'll also see if the newest version errors or not I can't remember oh do we maybe need to update all the Astro things it wouldn't wouldn't hurt to update all the Astro things but let's see it should it actually just runs yeah let let me just update everything first yeah just to be safe I will say this might work locally and that's fine we can just do it locally um but the minute you try to Output uh do output server or output hybrid and publish it to a to a host to one of our modern hosts like a verell maybe even AWS or Cloud flare or netlify yeah you need to specify provider here because Unfortunately they all do serverless slightly differently oh of course yep yes which is a big thing that that I've kind of talked in the past when talking about like some of the jamstack stuff like the portability of sites is hugely important yeah and so with Astro it's as easy as installing and adding a um one of the one of the Integrations right and actually I see you running mpmi um but the other thing we can do right is we can actually run Astro update and what Astro update will do is it'll get the newest version of Astro it'll get the newest version of all the Astro dependencies and the newest version of any Integrations it knows about and put all those together I think it's going to be it's going to be npx Astro JS update oh that's it yep slash update like this like that there you go so note it's yeah it's a it's a weird one it's running right now though right it just gave me a 404 it doesn't know as okay hold on uh I've got the URL I'll paste it in our private chat real fast uh but oh oh upgrade upgrade I'm sorry that's on me that's my bad yeah that always happens for me update and upgrade do different things sometimes y and naming is hard there it goes it works and tells you right and this is I love the DX and Astro I love the CLI and Astro they call their little mascot Houston in there it's real cute but hly yeah s has one of the best CIS in that sense agreed and like you look at it you're like here's everything that It upgraded super nice to know uh because the other thing let's go ahead and and and do one more thing run uh MPX as at hold on let me actually grab the right thing so I don't make this happen again I'm thinking this Astro yeah add netlify there we go because we're going to go put this on netlify of course and they have they have a versel package they have an AWS package they've got package they've got Cloud Player yeah it's really cool oh so it's adding this to my yes this it's asking you do you want me to do this yes we do want them to do this um and then it adds it so if you were actually uh go into your code it has updated your Astro config for you this is this is great Y and now like everything that has a CLI does this sort of thing like it'll yeah does it too it works pretty well I just love that it outputs that in the terminal right it says hey I'm gonna make these changes are you okay with that I'm like yes thank you but you can also see like is this gonna actually did it make a mistake I never trust the computer so I always want to verify how do we know if this is running server side code so locally there's not going to be a super easy way to to tell I don't believe um however we make a server route to do the so the important thing to note right is all these are server routes now because everything is server rout now whatever we do okay cool um so every single thing in there is Ser is server rendered so we could make a an API npoint now if we want yeah exactly so do we just make what do I you the I'm just going the great thing stream streaming with Tim and Brian super super awesome we both talk a lot um we just run exactly we just go uh so yeah we're g we're gonna make a server endpoint API route and to do that we can put this in our pages so in our Pages let's make a new file uh let's call it um I what do we want to call this this would be well if we want to do a newsletter subscription right maybe a subscribe route and then do we do this no so what we're going to do is we're going to do uh I think we can just do TS but let's be on the safe side and I'm looking at the docs right now and let's make it json. TS okay this and yeah and you can do you can do JavaScript if you'd rather you know me I'd rather do JavaScript GNA Go to JavaScript yeah so let me actually pull up here we go uh so we're in kind of an actually we could even put this this let's put it into an API directory too because I think that's just cleaner for our code cuz you know maybe we actually want sub a subscribe page right like maybe we want there to be a page okay so we have an API folder with an subscribe. json. JS inside now exactly uh so now inside this what we want to do is we want to export out uh a post method basically so we're gonna export const post it's got to be a const yeah um and then since we're doing typescript we're gonna get just JavaScript you to jav perfect uh and that's going to equal let's make an async function async and inside of your arguments uh you can actually destructured in an object for the request so we can actually get the request that's being made inside this function so it's just going to be like this uh no I would do so um uh curly braces and just request inside curly braces ah sure that would be spreading I guess that's a whole different thing yeah sorry that was my bad yeah um so now let's let's just for just for the sake let's um let's just console log request the thing is how do we console log to post so we have to make a form now or yeah or run it as um in like a postman or something like that but yeah yeah but Postman to local I'm not sure I've had that set up what I can do though is from another codebase just quickly copy paste a form a form yeah let me just find this uh components footer that's a newsletter component obviously yeah it's not cheating if it's just good prep work exactly it's not cheating if it's prep but I'll say like as Tim grabs this if there are any questions about Astro about high graph about the interplay between the two or about the code base that we've kind of glossed over thus far because it's obviously only uh important as it's a landing for us on this do ask in the chat um over I think somewhere over there probably or like down below depending on what system you're on YouTube or Twitter or LinkedIn uh we we'll answer okay so for now this is not a form it's actually just an input so do we make it a form is that the way form with an action and the action will be uh that route that we just created SL API subscribe and the the fun thing right is I'm doing this like kind of old school the the Astro dos and hopefully we don't get bitten by this the Astro dos want you to do this as a as a client side form right you hit submit yeah exactly that's what I thought it would be uh old school's just as good and the cool thing is once you submit this the first time it'll take us to that route and then you can refresh that page and it will send the post every time oh yeah exactly so H we don't need do we need ID yes let's just I think that's good enough type email require oh there's no name we don't we don't need it yet though we're just confirming that we're server side rendering this is true yeah okay all right so let's put that where it needs to be and then we'll save it in and check the page I'm just trying to okay so it doesn't like a button cannot find button weird it is what it is well so the other thing to think about right is the fact that Astro all Astro uh. Astro files are typescript by default and what probably happening there is that you haven't defined the type of button and you would want to do that for any anything like that and I think you can probably get that in their in their uh types yep test oh it's an email made an email an email input HTML inputs have types and all right so we're getting a 404 that's our first issue I can't read your go to API subscribe now all right so we have our first hurdle API subscribe uh all right let's get rid of the do Jason it should like that should be fine but we'll move on in fact now that I'm reading the form the the the endpoint docs wanted the Jason in there the form docs didn't so there we go ah this is good you're supposed to return a response like if you're posting you're supposed to give a response back um so that's a great error I love that error this is a really good error this is what I need to do and that's what you need and that's just the type up there so we don't even need that how does it know oh how does it know it's getting a response though you just have it so that's an interesting thing I thought I would have needed on that the uh no because respon new response is actually default node right it's default JavaScript yeah exactly and this so in in next right you or maybe next has this too I'm just familiar with next next has new response that you can do and that's just no or you can do next response and next response has a little extra flavor in it yes I know exactly um in N they just if you return something they'll just assume things and then fix it for you and if you want something special you can do the special thing that's why for me it felt like this was fine because Nu is always basically my teacher and it's just fine I don't have to do anything which honestly other types of of systems if you're just doing pure node it's gonna it's gonna error quietly on that Astro is like no what what the heck guys like this is not what we need um and again I think there's there's an emphasis in Astro for web platform best practices right they're very heavy into that so I think that's probably a reason for it as well uh all right so this is working yep well let's just try this one more time we'll just go to the homepage also in there go ahead and console log your request so that we can oh yeah Y and the other thing right is you shouldn't have to resubmit this form over and over again you can actually refresh that response page it will resubmit the same form oh that's actually very nice yep again I'm a I'm a console log driven developer so uh I have to do this a lot oh that was wrong I've zoomed in a lot but here we go is that an email yeah apparently it is well let's have a look at the in our terminal now there's our there's our request so we clearly on the server now this is great there all on the server uh we should also uh have is there a body in here there should be doesn't look like it but maybe it's because we're not asking otherwise there might be too much in in this and really what what we're going to end up doing is uh in our server code we're going to need to to get the um the data off of it because really when you're doing a if you look the URL in your in your um code real fast or is that in your code in your browser oh yep oh it doesn't actually show it uh really what you're getting is you're getting uh the form the form data in there as well in the request so we should be able to await the data in that yeah how does that work do we have some um docs for Astro to await this kind of post body thing so I'll actually share the docs that I'm using as a cheat sheet right now uh which is they have a recipe uh that is setting up uh form form handling I wish I could copy paste it but I can only do this yeah I know really again their SEO games on point you look up Astro server Point you'll get this you look up Astro form you'll get this um but basically what we're going to do is we're going to off the Quest get the uh run a form data uh method so this one right uh yep that one that's what I'm that's what I'm ho crap this is very easy so we just need this then in theory and if not buug and I love debugging live I think it's an important it's it's great so we don't send name I think we send email right let's see my footer email or name email the name is what we want yeah but that's the same thing same thing yeah um and then go ahead and in the result here um let's make that into a JS template literal and let's oh you could just do email sure yeah just keep it simple just refresh yeah repos yep there it is nice there it is so easy peasy so now the fun thing right we've taken care of the easiest bit of Astro now error handling absolutely you know sending responses back absolutely redirects absolutely uh but let's do a mutation let's let's set up a model to take care of this because we don't have one in that high graph uh project in the high graph Studio exactly so let's go to High graph and actually set up something like you just said so go to schema yep and then we just add a new schema for subcribe I cannot do this though because the plural would be weird well we've actually kind of yeah yeah I would just do subscribe our display name always assumes singular we get an API ID and a plural one hey Alon do we need to put oh there he is yep the master himself exactly now now I'm now I'm gonna be self-conscious because oh now we need to show that we know the stuff I really know this stuff Tim absolutely oh you actually do much more kind of okay email we could have some fun and make this and do this yeah well the the fun thing right is that this is um since this is mostly API I I'm not sure if that validation is gonna be in mutation oh that's interesting well I have to go look look into the way we handle that I can't remember now I imagine it's in there okay so we just added pretty nice I agree that interesting it kind of works isn't it I I like I like all the meta Frameworks for what they do in their own ways uh Astro clicked for me more than others uh personally okay so how about we go to the API playground and have a look at what an uh that could work like M look like you can open the Explorer if you want I'm an Explorer it doesn't really matter for mutations that much uh so instead of uh go to down to the very bottom of that area instead new query and click the add button to the right oh I have to actually click that yeah this is this is kind of the graphical interface in general um so now we can create we can do all the crud operations as well as a publish operation but um yeah so create subscriber we need an email um and then we want to return something I imagine we have to return something in a graphql uh call but yeah so so well we can just give it a test now if we wanted to so yeah we're going to set up a variable in graphql if you're not a graphql person this might seem a little strange but the the upside of setting up a variable like this is that in our codebase we'll be able to pass that in via VIA you know programmatically speaking we don't have to depend on things and it ends up being typed correctly and stuff like that um this will be a string I believe yeah and it will be y required so you can see Tim put an exclamation point at the end there to say if a mutation comes through without this it is not it's not proper so we're testing alien here totally the the correct the correct email address there it's all good see we get back the actual thing that gets mutated into the system that gets created exactly so we return the email again yep so um let's remember this I'm just copy pasting here copy copy copy I always I always start my my um my queries and my my mutations in the API playground right the the API nice way of testing and here you go yeah we just added this and and so if we go again and we now change this variable to awesome we get a whole new one yep and there's another one so this is working so um what we now need to do is let's have a look at how I query the in this in my other Astro stuff so I can use the same thing essentially so I have this queries thing like get page so you can see I'm actually using graphql request here so I'm imagining I can just use graphql request as well um in our you know API endpoint so let's grab this and put that in here what we do need to do though and this is a slightly fancy thing we didn't really discuss I actually have a code generation thing here and what this does is when you run this it looks at High graph's um schema and it introspects everything and then it makes you typescript types however of course we haven't really done any typescript in here but if I do that it will not error if I start typing some things so now go on I was G to say I think it's GNA break actually but let's see it might actually so what it just did it actually found a whole bunch of like don't look at this is just a new note version and so it looked at all these kind of different things and it created this graphql folder here with all the types that it got back out of high graph so we have everything and these are not types right and so we can probably find if we wanted to subscriber you see y so there's a type now for subscribers and so um there's a whole bunch of queries we could now do anyways let's not go automatically created by doing that you you don't have to do any of this to use graphql it's just a nice little piece this is just fancy essentially you're you're you're a fancy guide him sometimes we fancy it and so um now if I wanted to have a type for published or um staging or we know no sorry published or draft I can just grab that type from my own graphql folder because it made it now anyways we need our endpoint which is an environment variable otherwise the endpoint being not the Astro endpoint but being the high graph endpoint that exists as the high graph API exactly with this is our high graph API endpoint which pulls up a regular old graphical interface yeah exactly so that way have so what else do we need let's go back so we can use a graphql query like this is a pretty big query but we can just let's just copy this stuff and then we remove what we don't need and add our mutation in it yep and we don't really don't need any of this stuff get rid of all the query and then we can move the uh get rid of the top that Top Line too and then you'll paste in the query we don't even need this exactly we got go back to this this is what we need so we're mutating and we're creating a subscriber we're grabbing the email and so to make this work we need variables of as well which is this email of course we have the email here right yep so we might have to put this here I like that you decided to move those up as opposed to moving the query down like think I don't know how my brain works my brain just works a different way I guess um yeah so here when you want to actually do that this request function comes out of graphql request here on the top Y and so a request actually gets an endpoint the query and the variables so what we need is just this one and so again important to note uh if you're not familiar with graph request you can do these with standard node Fetch and you can it just requires a little bit more boiler plate code this is just a nice wrapper around it that makes it a little bit easier yeah we could literally just do um window. Fetch with a post in here yep I'm even saying you can this is this is remember this is the conversation from earlier where we're talking about context this is a server route it is not it has no window so you'd use nodes built-in fetch oh that would be the node fetch exactly so we can probably do this because yes I believe that will work yeah what we would need for this query is the endpoint we have it from our environment variable the query we created here and then we have the variables which is a a simplified version like this would be the same as this oh not male so we're sending email which we have here to the variable so this thing is literally um this thing yep exactly all right and when you in JavaScript if you if you say email yeah it automatically understands that's both the the variable you're passing in and the uh property name that you want to call it so what we need to check is how what does it look like when I get this back so let's send this again so what it gets back is data create subscriber email so what we might do is do return. data so what we send what we get back is now this essentially this is what you what it should show us in the return um there's no defens defensive code here there's nothing it's important to we are gonna get an error here just so you know tell me why because we don't have permission to make a mutation oh yeah let's try it though yep I think that's always fun okay it's running still do we want to go re reload this I just reload the page yes same same for form mission over and over again oh yeah oh yeah I see just let's get yeah it's in the wrong spot for that one ah that was just a little silly wasn't it that's a different error that was just a little oh it actually really doesn't like it request is not a function where that isn't it here hold on oh request is clearly something coming out of the post ah yeah so let yeah hijack Ellen I completely agree I think this is this is always this is how I debug right different error is good I like different error oh this is the worst thing what's happening now uh let's see inval as node I don't know what this means that's that's a new one for me let's see if it actually runs the page at all of course not you strict and defic that's great I don't so basically an error is Happ happening and then the error is happen is causing an error in the error handling of yeah so we we'll not do it we'll not do crazy Imports with modules and stuff like that we will just change request to Rack I think this is probably better yeah right I think so too I'm worried now okay no same thing okay um no n yeah it's one of those all right well here let's let's do this um we can go to a basic fetch I that's what I was thinking yeah so yeah it would still take the endpoint as the first argument and then it's going to be an object for the second argument it's G to have oh boy not like that yeah and then that takes a body body is gonna be Jason stringify of query and variable it really doesn't like this wait yeah like that there we go oh of both you mean so yeah you'll now inside this do object notation and do variables comma query because we're going to stringify this J this Json object because fetch it's a whole thing um wait a second something is unhappy here we go but you need to post also right how does it know it's to post uh okay then it's going to be uh all right let me go to fetch I think it's this oh but then this has to be body then that's body yes exactly body I think this might be it yeah that should get us where we need to get the error that we're expecting to get okay are you ready for this I'm I'm ready I'm ready for it to break like this feels like raw dogging to me I think it just worked success is true but it's not actually showing me like this because we're probably getting things back that we don't expect right which is this is actually unsuccessful is what's happening we're not defensively cating so let's console log subscriber query which is actually the the result quer is a bad name because it's actually the response we're getting back from that but this will get us the error and the error is going to be permissions error I'm 95% sure refactoring on the Fly oh my God yes this is what this is just how how it goes I really enjoy this all right okay 400 ah okay this exactly what we expected yeah oh no 400 means we actually it's a it's a broken URL that we're broken data right uh let's see it's not like a you're allow we want to get the body back here yeah like and David in the chat right maybe maybe with the try catch yeah exact like we should be doing that we're just trying to be quick and dirty on it um I know we should have done this yes when there's when there's an hour to get this done and to also have banter I think it's not a huge amount of time why this is always so interesting right why does it now not like this anymore because essentially when you trke CCH you just put it in a different scope in the function yes say it's it's the idea of the modern constantl right constant let as variable definitions are only within the scope of the current JavaScript which is usually defined by the curly brackets right by the braces around it so technically by trying to do the at the end we're actually failing that it's it's not going to have access to that because it's only going to have access to it yeah you did it right I'm explaining why this is not exactly what I like but there we go all right we still get the success that's we know um are we console logging anything anymore oh would that be my fault yes well I'm console console logging the error which is then actually the problem is I don't think technically the the in a tri catch like this I think we're actually succeeding yeah that's what I'm thinking as well but again all we care about what what I actually want is let's let's do uh body. Json let's get the the version of that and again I know what the error is here the error is going to be a permissions error so you want me to so for our response do uh after after this do const no in sorry I'm pointing you can't see uh in right right yeah right here do con uh response Jason or Jason or something like that equals await uh subscriber response. Json as a method I think oh that's this of course we're returning a like a promise and nothing is happening we're getting a readable stream we need to convert actual data and then we can console log the response uh Jason and get what we want uh you know what the problem now is with what we need is not is uh subscriber response. body. Json uh sorry nope nope not here up one oh you could do that there too sure yeah that would also be fine but the the actual readable stream is the body yeah um the thing is now that we have to try catch in place this is now nothing here this is actually something in here only what we would want to do right is we would say um it's the same kind of thing right you got you got either hoist it or you got to put your return in your try uh yeah exactly oh yeah I thought that body thing I think it's that might be my bad I think it's like this okay I think see but then body is a readable stream but let's see what get body like console log body oh I see there errors graph Q query is is required interesting we're not passing it a query how are we not passing it a query H what is happening this is why graph request is so so helpful yeah graph request would just do it for us so let's just see what we're pushing into it yeah exactly um fair oh the query is actually not a query all right yeah see there you go uh where we where are we setting query it's there you know what oh but we no longer have graphql yep let's just not do that exactly I think now it will probably work yes that's just okay okay byebye we didn't have that method anymore for very specific reason so yeah we didn't have it because of reasons because of a very specific reason that there's just no time to get into no I I'm not 100% sure on that finally that's the expected error so all right we have the ability to set up a a default set of permissions that are your public permissions we've been using an endpoint that has public permissions set up on it which are 100% read only we need to pass a token in and we need to make sure that you can have permission to mutate right have create permissions on whatever we want to set up so we can do that within High graph we can set up a new Public Access token that has very specific permissions around it and even though this is a server rendered page right we're still going to set these up to be very granular because we don't want them able to go in and edit our or create new products right we only want them able to create subscribers yep subscriber create we'll also need read on this it tells you that here too it says when you when you're doing create you also need read so English we're just going to go create there's no specific conditions to this because you could do if I am ID this I can only then create like there's some super complicated awesomeness that if we set like if this were like a commenting system right and we set up specific users in there we'd want to say you can only edit your com your own comments so we could say where user ID on comment equals the thing that gets passed in allow for editing if we were going in that direction so we did so we just added this specifically on the subscriber we can recreate an update I just added update to be safe yeah and was that wait was that a public Tim did you just put that on our public content API yeah okay let's let's delete those permissions real fast okay I'm I'm like so pragmatic right now we have nine minutes hey bet best practices for this for this I'll set up a public a permanent access token right okay yeah you're actually right yeah and then just add token on the left don't don't set up a default yep okay okay subscribers okay you're right I know okay so this important default stage needs to be draft because this is for Content delivery oh wait this delivery let's do publish yeah yeah again this won't matter because the things we're getting don't matter on this all right so we want that token and then we also want permissions Yep this permissions we just did around yep subscriber read I'm not going to fill this out because it's going to say all by default but we don't want update update we don't care about yep all right now we get that token we're gonna pass that as a header as an a bearer token into our authorization header in our fetch request and it will allow us to do what we need to it's going to be headers yeah and then capital A authorization I believe in quotes know is I think it's got it's got to be a string authorization I think it I think it needs to be a capital A but I'm not 100% sure on that I'm sure yeah you're right then Bearer with a capital B and our token am I just going to post this here I would do process that uh process that and do high graph token and then we'll add that in our environment we got seven minutes we can do the the minor best practices yeah we can do it until they break and then when they break we just throw caution to the wind and put a string in there all right so now gotta run it again and then oh yeah okay cool and then we run but that okay that's interesting let's see the let's see what happens in console just oh it's somehow it's getting oh yeah go go resubmit the form we yeah maybe there we go token contains an invalid number of segments did you copy everything did you paste everything you bet click to copy okay it could be that I make made a typo in here yeah that would be my guess no let's run it again yeah oh that's why it is ah import yeah yeah we are in feat my friend we're in feat land yep yeah so so if you're ever wondering how to get environment variables when you're running in V it's not process. env. variable name it's import. meta n. yeah oh yo there it is we got it back um wow okay now just a real test we're going to the homepage I'm going to try okay how about this looks good to me totally my email address try it yeah okay so we got this back y now go to the content we go to subscribers and there you are yep we didn't have to refresh didn't have to go anywhere it was right there it's just there and also it's in draft mode just for safety and what you can see now that the update is actually the subscriber token we created and not Tim yep which is cool let let's you it keeps keeps you able to audit what's happening in your system did one of my editors do it or did my program do it super and so now you could also if you wanted to use a subscriber a Content API endpoint to do things you can set that up in here that's pretty nice yep automatically that's just in the playground at that point ready to go just sits there now yep yeah so and any any token you add in there so you can do your testing with the specific permissions that you're working on which is super handy okay so Brian we have four minutes I think we're in recap mode for four minutes right yeah I want preview if you can do it in four minutes Tim more power to you I can't do it in four minutes so let's see because there is a basic thing so what we need to do preview is query to draft API and so in my get page typescript this is typescript because I that's how I build it you see there's a stage for published or draft Y and the way we get that is basically that's the query you send here right yep and so if we now go to my page where are my pages index there's an is preview function that I built in helpers so let's go to is preview and it literally just right now looks at the high graph is preview equals yes because true and false doesn't work from these kind of things because it's just strings so if we set it to yes it will query the draft right favor part about the naming there is I would have said true I would have still had true but that would end up getting confusing to the person that comes later on this is now not a Boolean it's not a Boolean it's a string that's why I put in yes yeah so essentially we can now check if preview is actually true and then I'm querying draft so in three minutes let's have a look when I go to my get page let's have a look if I'm actually querying draft and if so preview should just work let's just make sure we can see through all the the stuff you see this is console lck debugging man I'm so old school yeah so we're just going to have a look at the stage I think I might have to restart just to be safe it's so fast this restart is crazy yep yeah and I are on the same page here your your confidence I have got confidence in you but man just works famous last one no no no it's okay draft okay we're querying the draft API all right um so we already are in preview um so what that means is now what we should set up for our content for our page oh for our schema for the page in the sidebar we set it to preview edit and so ah extra clicks yeah so it should literally because it's already in preview mode this is now my preview API right so it's just the slug page so that slug variable is just what hgraph then puts into the preview mode so if we now made a new page with a slug about I think it's this add one component you get a um a really fast way to uh let's get something that actually works you can do it go go go but did I just click on I don't want this just give me the thing stream just automatically ends at at 11 eastern time it just ends wa one minute okay so this page should now exist the save is not published would have be so nice right I know what it is though this this looks look my page is literally just index of Astro yeah you don't have Dynamic route set up in Astro right now no I don't know why I did not do that but can still do it not about we just go to home preview home okay I'm just not GNA be able to solve this now yeah again I have to then three minutes was was Hubris Tim it was it was uh it was confidence I like to see it uh I like see it too I I think I might have solved it now more famous last words Famous Last Words preview okay so we're in home let me just do hero I'm typing some stuff I'm not publishing I'm just saving preview beam there works because this is not published that is not published because we're looking at the draft API locally exactly and then you could you could even put this on a server somewhere doing the server side rendering check for that query and change what you pass to the to the query to be either yes or no I guess uh depending on draft status for the uh for that query parameter see I added the S here so essentially if this was on a server like you just said and it was looking at preview and it's in server rendering mode this is actually now working I know it's kind of weird because this is Local Host right but we just verified that it's like oh you know we can do one thing and then we end the stream okay let's save this so this is not published we're in Pro viiew mode so you see all the things now here we go I'm making my own grave here no it's kind of nicer than true and false right okay so now on this home page I should not see that because I'm only looking at at published rather than draft and again this is all in environment variables right now but it very very much could also be set as uh a query that you make based on query parameters passed in so you could check for is preview true in the query parameter of the URL since we're now server rendering you could check that in your code uh and change that just as well do this and then look at this rather than my environment example but we have it yeah um all right so so quick recap right we we uped Astro via MPX Astro JS upgrade right upgrade yes that upgraded all of our packages for us in a very nice uh compact CLI format then we changed our output from the pure static that is what Astro defaults to again static first HTML first into this idea of serers side rendering now now we chose the server output as opposed to the hybrid output what that means is that we opt in all of our routes to server rendering and if we want to take a single route and make it op make it static we add a variable the opposite is true for hybrid hybrid sets everything to static and allows you to opt in the server render if we were just doing the form submission we would do that uh probably via hybrid since we wanted to do preview and eventually change that to a query parameter we set it to server so that everything is opted into serers side rendering then we set up a an API route that accepted a post that post then accepted the request and got the form data off that request super super easy with Astro that was a real nice process then we set up a mutation in hgraph with a model that we set up today to basically have email addresses for subscribers then we submitted those we went through like 15 different errors that was a fun time and then uh we got finally got the error we wanted which was our permissions error we set up new permissions with a permanent access token submitted and then we got email addresses coming in from our Astro site locally to our hgraph project to our high graph Studio ready to be put into whatever system you want for where your subscribers are recap done and we set up preview and we set I'm sorry Tim you and we set up my my four minutes of fame your four minutes they were amazing U my last words it actually worked anyway that was fun I love streams like this where we just learn in public and then you notice how good tools are from hgraph with setting it up how well that works to graphql to Astro being super friendly like these ER these errors are great we figured it out in a second and the CLI working like yeah good stuff yep now let's do some calls to action here since we still got folks you pick one then I'll go okay let's do the docs you want to do the docs hey rina's been in here so absolutely we should do the docks all right so we have comprehensive docs for hgraph at hyra.com dogs and in there there's like a bunch of new things where we do getting started guides but also recipes for a lot of you things that we use that you probably saw today even you know how to set up like a navigation or a CTA button and then we have integration guides for Astro and next and next and remix now and is is flutter live already remix spell kit and flutter are all live in the implementation guides now exactly so we have a ton of stuff and so how about you go for the next one this one yeah uh so if you have any questions from today or you're trying something with hgraph and you and you're stuck on something you're trying to figure something out uh we have a slack Community slack. hyra.com we answer questions in there our product team answers questions in there uh we just Rea we just launched our studio which is our new our new experience and people who are asking questions about that our CEO is in there answering their questions so there's a whole bunch bunch of stuff happening in our community at slack. hyra.com I think we did it this was a lovely stream I always have fun everything that we did today perfectly works in the free account that you can get at.com signup uh that's going to allow you to do the things that you saw today for free uh we start charging way higher up than all these things uh that we demoed today yeah if you wanted to do things like localizations and extra users and all the stuff is all still free it all works yep so yeah oh we have a we have a comment I think there we go this is what we wanted always good always good see thanks for coming in today alen cheers everybody and we'll see you next week yep byebye bye