---
title: "Building an e-commerce site with Hygraph and Astro"
description: "We have invited Elian from the Astro core team to join Tim on a chill stream in which they convert the skncre Nuxt starter for Hygraph to Astro. Along the way you will learn the core concepts of Astro and Hygraph, all while diving deep into the code."
date: "2024-05-31T18:28:02.000Z"
url: "https://timbenniks.dev/videos/live-hygraph/018-aietljmxmxm"
youtube_url: "https://www.youtube.com/watch?v=AieTLJMxmxM"
playlist: "live-hygraph"
image: "https://i.ytimg.com/vi/AieTLJMxmxM/maxresdefault.jpg"
tags: ["cms", "frontend", "product-strategy", "devrel"]
---

# Building an e-commerce site with Hygraph and Astro

We have invited Elian from the Astro core team to join Tim on a chill stream in which they convert the skncre Nuxt starter for Hygraph to Astro. Along the way you will learn the core concepts of Astro and Hygraph, all while diving deep into the code.

Watch on YouTube: https://www.youtube.com/watch?v=AieTLJMxmxM

## Transcript

my [Music] b hello everyone we are live and as you could have seen from the fairy stock 30 second countdown this is the first live stream we've done with our you know with this year and so um we're talking Astro and we have alien here from the Astro core team so alien tell everybody who you are and what you do hey um yeah I'm Al on of the Astro core team um so I work in Astro core I did previously do a lot of documentation in Astro um now I'm a little bit working on some other stuff behind the scenes um in the UI team so I'm working on and with Astro studio and some other things I can talk about yet um yeah I think the main thing you might know me of is of course I do a lot of talks about Astro um exactly and I think that's it did I see you last year on Fugi as Amsterdam or was it JS World um it was JS world and I will be there again this year exactly this is going to be a super fun one yeah because it's a huge conference right so many people and um anyways last year it was like 1,250 people something something like that because the year before they actually put in 1450 people and they added extra seats but it was like too dangerous so they scaled it down a bit that's how they could just keep selling tickets it's it's not a big deal amazing right wow yeah some conferences are on it man that's true so yeah um today we're going to go from a n project to an astro project and then when I told you this like a few minutes ago you were like oh but we just have a guide on the Astro docks done yeah well actually that's that's almost always my answer if people come to me with with an a question about as it's always we have it in the docks um and we do most have it well we have most of the things covered um but as we were talking about earlier it still is a n two migration guide yeah but to be honest there is not a real very big difference in between two and three anymore um so it should be doable yeah and so we might actually go over these docks and have a little look or we just sure go fresh and you can just kind of guide me as you like um exactly and I really love companies and astroid is a company now we can call it a company right well astroid is not a company it's the Astro techn ology company which Powers the development of Astro yeah yeah but with that in mind the fact that you put so much emphasis on documentation and that you are like doing all that stuff that's really really cool and you can see it in our chat a few of our colleagues actually saying these things like as a docs person I can say no one reach the docks you know what I not go for it what do you think yeah I was going to say in our case I don't feel like that's true actually um we get a lot of comments on our docs we we have um a lot of ducks like Starlite exactly is one of our duck products exactly um and we have like I think 700 or more contributors on our documentation so I think I can say that people read our dogs at least I am not one of them I'm sorry yeah but that's to be honest that's fine that's completely fine I always have the thing like if you go to our dogs you should be spending there only the minimum time needed you just want to find something that you use or want to use find it get the solution out and then leave the docks that makes sense I don't think there is anyone reading like a book well this person Romina who is doing docks and high graphs she might have but the thing is like for me for example I tend to just want to know like asro is so clean and easy to use I kind of just need to know something dive in or ask you one of the two and then just move on right yeah exactly yeah exactly that's also like the way we intend it to be used it must be like it's utilitarian right you just hit search like that's the first thing I did when we just went together rather than you saying hey go on the left and go down it's like I'm just typing and then I found something it just worked Al goolia for the win I guess yes very much it it really helps us yeah so let me put this thing on the screen so this is the website we're looking at today and so we released this yesterday officially as our next start kit for composable Commerce and it's kind of like super fancy but then when you read the descriptions of all the products it's kind of weird it's all about snail slime it's extremely expensive oh really yeah it's like well like this is like one little bottle for 200 bucks but I think the other ones here 355 or face cream and then it has all these like really interesting things here anyways we just have a we need to have a little fun right when you make a mock brand let's mock these products and these luxury people just a little bit and so this is using High graph and it's using a whole bunch of different components so we have a hero component this is like a little routine component with an extra image next to it where you can just upsell the routine this is a product highlighter then there's some sort of editorial with an image that can have two boxes here and this is actually a little product I and when you go there like so there's all these little really content Rich things and the idea behind this thing is because said we call it composable covers right so there's a agraph CMS in there but product data generally with this more fancy rich type of websites especially when you go to the bigger Brands like L'Oreal their products actually come from the CMS they come from another system where they have teams and teams of people figuring out what these products should be right what we have done with hgraph is actually we've built something that called um content Federation so we can Federate content from different places into your CMS and then act like it's just normal data from the CMS and in this case we are getting that information from a website called Federate this and this is my colleague Brian who's in the chat here has worked on this and of course this is Astro Starlight because we like it and so and we even have a bunch of documentation in here about about what is this remote Source thing that you can add to hgraph and how does it work and there's a whole bunch of information here about that and this is essentially a little platform that just has mock API data that you can use for any project even you if you have a demo tomorrow and you have to show something you can just grab this right and so here this is like a little graphql endpoint that we're using for these products here and so that is Federated into hgraph and so in hgraph in our schema you can even see there's this a Federate this for skin care you're getting all this information and now it's basically natively to usable in high graph and so that makes this very interesting because if you have maybe blog posts or you have articles about backstage information about shooting these these products you can get this for another from another platform and you can do yeah payment stuff from other platforms and I'll put it in high graph and it helps you to compose stuff then you have a centralized place where you get all of your data exactly doesn't matter where it comes from yeah that that's the idea and that especially developers and content editors don't have to understand how these systems work they just work inside the same language essentially which is graphql in this case yeah and one last thing I want to say about it and then the marketing is over because then we just have to dive in is essentially these systems stay kind of autonomous that's what's so nice about it we don't clone the data we don't copy anything over we don't do stuff with it it kind of just works and then if you update something we have in the CDN we just have a time to live or a web hook cash clearing for specific Fields even so if something updates it just works in hgraph also so we're especially important that we don't clone it because then you can have like a mismatch right so um now it's next but it has to become Astro so how about I give you the word a little bit I'll just remove this from the screen and can you kind of talk to us even though there's probably a bunch of people here that know Astro but also for me because I've used it like a few times it works well but give me like the elevator pitch of about Astro and then a few extra things about how what we should think about when we go from next to Astro okay um I kind of want to say that Astro is a meta framework so think of it like a competitor to next or next it works the same things it has a router built in it can do a lot of stuff but it has some extra tweaks um for a first thing um it will by default ship no JavaScript and be totally static generated so B basically only CSS and HTML will be put out of course there are solutions if you need interactive components uh we call those client directives where you can say I want this component to be interactive and have JavaScript um the thing is that you also have to see um as as a base layer um so you put something on top which could be react view anything you want um but you can also mix and match so imagine I want spel and I want a react component to be um existing on the same page that is totally doable um I don't say that it's a recommended thing it that was my next question do do we want to do that or um no in general cases you don't want to do that um but the cases where it is useful is when you have an old website written in react a new website written in View and you kind of want to have the superpower of the Astro Island architecture and you're converting components from one to each other um then it might be useful um okay but yeah not recommended um I think that's the most important um yeah but of course I was saying that um asro was static by default which is true but we also have server side options partials we have a couple of different things but I don't want to get too deep into that since we probably might encounter that and then we can go deeper into the thought process of selecting which one um so quick question on my end now so imagine we use the island thing right so we actually hydrate a piece and let's say that's fugs so for just that little island you have to load all of fjs and then for another Island that react you have to load all of react then hydrate and do reaction yes that's not super nice to do I imagine no that's the whole thing about combining framewor you don't want to combine all of those um one of the things is of course that if you have um a vs component and you use that on one page and then on the other of course it will only load VJs once you don't want to all of view every time again so that will yeah of course um well that's really interesting yeah and I would say maybe if you if I wanted to use few and react for different components but not hydrate at all then it's fine it comp to HTML exactly because this website we're looking at now I might have built this with n and I used like how the easiness of use of few that I like but there's no extra JavaScript like I have a little JavaScript button here right if I take like right now JavaScript is off it's identical exactly that's what you want and now put turn it on it's identical and it's it's luckily n is quite optimized so it scores 100 in Lighthouse on both sides but still this just gives us a lot of interesting approaches of we don't need to add a bunch of islands here unless later on we add a shopping basket and an account and a bunch of other things but that stream typically for me personally I don't use any Islands except for mostly it's a menu button like the mobile Manu navigation that's typically the only thing I have to hydrate yeah the little hamburger thingy that that turns into a cross like this one yes exactly um but for that you you can CSS yeah yeah I was going to say Edy fend list or add a class name or something oh old school JavaScript skills come back into fashion with this I like it yeah that's the that's the whole thing like if you just want to use a script you just use your script that that's totally it's very interesting okay so where do we start to actually make this work we we can do a couple of different approaches for one you could go into the docs and say we get started from there or we just go into the CLI and I tell you what to do which is basically the same but um yeah how about we do that because I already opened this is this big enough let me Zoom it in once I would say Okay so we're not going to start the server yet right no I was going to say probably you're better off by using the getting started page which is on the top left there yeah um yeah and then this is fancy I like it yeah and I'm on there oh wait wait wait there we go yeah yeah that's me love so now you just have everything that you need if you just scroll down on this page you will see how to start oneck thing just just let me check what note version we have here okay we're good good you never know you start a live stream you don't even have like the basics okay so this all we have so we can just I think this is perfect yeah exactly if you are I was going to say if you're an user h no you just can use with npm okay but then I will probably have to install or not not really okay because npm create should be basically um oh that's right and so can I just type like a new okay so we're gonna call this I have a g repository that I made let me just so let just give it the same name all right let's do this oh you're right npm create will just download it nice yeah it's basically the same as npn um I haven't used fpm in a while I'm glad that Houston worked because I was the last one to touch that that looked really fun by the way that's super cool stff um let's go with empty by the way here let's just start everything from from the bottom it's really easy anyways and we'll just install everything typescript yes of course seems to be good yeah yeah um let's see yeah so you have to say yes and then later on connect to remote ah sure oh yeah sure we just push a new remote yeah exactly yeah this CLI is so fancy it's actually um well it was built for Astro but actually it resulted in an whole other um oh really yeah Library it's called clack and the the website is cl. CC and it's totally um separate from AST now like this you're not typing any oh wait I have to go and move to this screen that's it oh that is fancy I like yeah people that make like this kind of software in this in our space the same with n they made njs and they made Nitro and they made and then everybody just uses that stuff that's the way to go and I love it yeah all right we're in yes let's open a code editor o well that was easy so let's see what we start with like how many Independents do we get like oh not many that's good I like that well all of them you would expect right so check is basically typescript and then typescript itself and Astro yeah that's all we need um so let's have a look okay so of course of course this is empty I like this new way of doing things like we start empty with all the the configs and it just works KN does the same thing NEX does it now that's super nice yeah teach me anything though no that's true but the thing is that well for one there is the the link above so if you want to learn about what file does you can navigate to it but in like the best case you don't even have to touch this file and if you do then you probably are looking for a specific spefic feature and then that in that feature will tell you what to change yeah that's the way to go I like it that's the thing about op in design versus opt out design which Ben one of our core members also have has some talks about so shall we just run this thing yeah that's it and now it will open on your Port 4321 whenever it's ready yeah it's probably oh there we go it every time opens on a different browser the one on my screen that's fine this is live streaming so have you used asro 4 before because I know that okay do you see that little waving thing at the bottom there oh this here this is fancy what is this that is the new astro um death toolbar um it tell me that you did this before next or not yes actually well yes um the I think we released it after but I know that there was work before them um next one is like insane with all its features I'm sorry I'm saying next because I know it so well but here we go that's okay um so basically what we do is we give you a couple of tools in there you see the the inspect one that will actually show you um all of the islands that you're using and how they work so if you're using an island yeah then it will show you this is a client load this client idle um we'll come back on that later and then we have audit which is accessib issues so check your image for all tags for area attributes that might be wrong and that stuff can we actually add yeah our custom plugins into this so we can do like a spell checker or whatever this is a total open system you can build your own plugin like story blog did and Spotlight did um so you can just check that out we have a store on it so Tailwind for instance you could view your whole Tailwind config in there um just like I think that n has in their Tailwind plugin um like the separate config viewer work they had that before they just put it in here so that was easy um oh and meta tags and stuff this is great so I'm looking in through the screen into the eyes of my colleagues and telling them right now that we have to in here we have to write one but I can I can work on that that's all good ah look what Brian is telling me is this HRA plugin for current queries on page how about that that would be a possibility exactly very cool all right so we have so probably it's not too useful for us now not yet but yeah it might be in the future um so that's a new astro 4 thing and I think for the rest we just can start by porting a n to um to Astro yes I think that makes a ton of sense so let's have a look um at my um other repo just to have a look at what we're actually doing because I think first things first we have to connect to hgraph and get let's just get like a pre- tag with from Json on the page just so we know we have it sounds good the best way would probably like in N what I'm using is n has these modules right so in N I'm using something called the next graphql client which does if this is big enough it does a whole bunch of like super magical things that you can literally just use a function for each query name that you have and you put a query in a file so you can just do page. graphql and that's this whole thing but when you then do npm run da or something it actually makes functions for you that you can include for free and it just queries a page and that's super super handy so how would you propose we do graphql in Astro good question I actually don't really use graphql that often so we would rely on the community for that but I'm sure that people here in the comments will have used um graphql I have and I know that you have a plugin as well right well it's not really a plugin but I did work on like a little Astro 3 starter kit for hgraph a few months ago then I just made a video but not released it so okay so in this case um how do we know this is is working so so I ran it this I ran it this morning it works so how about we look at the code of this little starter I built and then we can just grab some stuff from there so when we look at the package Json so what did I do so I have Tailwind I think we should do that use Tailwind also for later for our project because I'm using that I am having here I have graphql request and I have a bunch of code gen things so sounds good okay so there's a few things we have to install not too much and then there's a c gen specific task script here okay so what is this graph oh then it just runs and it just finds something most likely is there a config file for that probably that CS file yes exactly it probably just finds this in the root so what this is we're using Coden config oh that's just a type and so essentially we use the high graph endpoint which we'll grab in a second and so that's the schema and with what you can do with graphql is this code will just inspect whatever that schema has to offer and then make you types which is super easy and handy and so it needs to know what you're querying and it finds that in a source queries folder and that is Source queries oh yeah so here this is a get articles function that I made and let's have a look so this is an so this must be is this SSR or not is this we have well it depends but I don't think so actually no rather not no I don't think so but it has this request function that comes from graphql and then it just you just add it it's endpoint the query in the variable so we have variables that's static exactly oh and this is just the high graph endpoint so I think we could literally just copy this and R and do get articles do get page and then here Y what do we do here ah I'm literally just firing this function calling the endpoint basically yeah so it's just calling the endpoint so this doesn't look exactly complicated so nope how about we start with just installing these dependencies so there there's a bunch of them though well you could actually just copy and paste them over um and then at the same time that's a little bit easier right okay here we go these are death dependencies I don't know why I did that probably because it's Cen it's never going to be used elsewhere and then we have the yes and then Twi will do separately oh okay sure that's fine now let's check if these are the final versions though because this has been a while okay I'm just doing a little check here in the in the code editor oh it see seems to be seems like good nice nice that seemed easy exactly you don't actually have to install it I think you I think um if we are installing Tailwind it will automatically install everything else too oh when we do Astro add or something like that so we yep we can do npx Astro add Tailwind that's it nice y that's it and it will create uh both a entry in the um as yeah it will actually tell you what it does so maybe is great have you never seen this I have used it in few but not with Astro but the one in few changed a few times and in the end I just type it in manually and it also works I'm one of those old school guys who used to go to HTML when he didn't do much JavaScript and then so you you have this re repetition keyboard thing in your your brain yeah just if we can be helped let's be helped no yeah exactly so it basically told you what it did it installed ta CSS and the well RoR plugin and then it put it in the config and created a minimal um minimal uh Tailwind config file okay so it did this and then it where's the Tailwind config so I'm just gonna quickly steal all the other Tailwind config stuff that I have in my other project that would be this one I don't think I did much there to be honest oh there's just some colors that's it just some theme stuff and Brian says I have to let everyone know that build the Astro CLI on how much he loves it I'll do that definitely um can I just oh wait it's a theme yep it's just the whole thing you have to replace that's okay we're good well and now we we could Che work but exactly oh yeah yeah I need to check how I did the font well if it's locally in your system then it will work uh I'm afraid it's a Google one look we have this n Google fonts thing right and we just say this is the family is there anything similar or we just not GNA do a font today um we could do it if you want it's called Astro font um you could totally do it that's that's Let's do let's do it after we get some graphql on the screen though I'd rather see something first um let's have a look where were we you have to restart the dev server probably well that's first that is a good start yeah like I have stared upon my screen why things weren't changing and then oh exactly I've been there too many many times all right so let's have a quick look at what else we're oh wait yeah what do we have on the screen okay ah now this is definitely detail when this working exactly all right so let's go back to that other one so what so let's just copy this go genen file and then we probably just call it rather than okay so this okay we need to have an high graph end point then and the gool thing probably we do have to uh do install and I don't think we did oh you think okay cool well we can see like if it doesn't work then we'll know so exact that's generally the way we we do life um let's just get the high performance end point here high performance well we we just um sometimes when you have a huge um company and you have a lot of customers and then you figure out something to make it a lot faster you make a new endpoint and you slowly get them all on there that's why we have this two of them right it's one of that's how these things go okay so we're going and then we have to make a so okay we are already in Source what do we need where is get bit all right and then this I don't think we need to touch any of this Okay cool so that will output a um graphql query in the queries uh in the graphql folder okay what I understand from this is that this folder will now get the types used yeah for graphql for the for the query that we're going to do I'm just going to grab this one go back um get page so let's have a look okay so you see it hasn't actually done it yet so it doesn't know so we have to run the thing first I think yeah that makes sense it's one of those yeah because this one will I think this will just generate this folder okay so let's have a look so we're not going to do we're just going to do a let's just get one page that we need a slug which is g to Dive Right In Here who why not right and then we need a page query and that's not going to be this one obviously and we don't oh wait yeah we do need this we need a slug variable for now we're just going to hard code it because I'm not even sure how far we're gonna get because we we only have half an hour left anyway so yeah time fast oh it's always like that isn't it all right so let me just grab from the GitHub repository um the correct I think I have a query for a page here we go ah and so this is pretty long um if we have time I will explain why okay because what we're doing is we are actually using something we call components inside um our system and what that means is it's slightly different than you would expect but this that's what you get with like hatless cms's that are relatively um like how do you say this like they're abstract right so for Content editors sometimes let's say if we want to edit this page for example if everything links to another thing like this hero here this is like a little component right and it fits here directly into the schema of this page right if you didn't have this you would have to make um a connection outwards to another thing that is then in hero that lives on its own which means the hero can be in a 10,000 different kind of places normally this is volatile related data that is just could change next week right so you don't need a single entity just for the hero and a single entity just for this thing of course for a product you want to have a single entity but for like a little hero with an image that changes every week you don't so a component is essentially a little schema or a model that is attached to another model and so users can literally just say oh let me just drag and drop that and so it feels a little bit more like they're page building essentially yeah exactly but the API still sees them as models so what you have to do for a page query is the following you actually say Okay I want all the basics for the page but then I want on the components I want my editorial um component and in editorial you can have other components you can have a card you can have a CDA and I for them I want all the fields you know what I mean so there's a product highlight component that connects to a whole bunch of other things as you can see and so that's the thing with graphql you see exactly or you you say exactly what you need but sometimes it can be slightly repetitive so this will basically generate the whole structure of your page that's the idea and that's where we will find a challenge at one point wait let me just I made a mistake I have to remove one curly here because what that means is this editorial will be a component we built inside our new code right CTA will be a component hero will be a component but we don't know when they will end up because when or where because a Content edor can just switch them up and so we need to figure out how to dynamically create a component call it and put it in in the code well it's not that sense that difficult yeah it does make sense yeah it's essentially what story block does but behind the scenes yeah exactly no I think I already have an ID but we'll get to that later yeah um I can show you later on in um next how that would work or in few more anyway so we have a huge query here and we do it for the home let me so that's basically we're going to fetch the homepage now yeah slug is home so we fetch the homepage and essentially um what if if we just type this get this whole thing inside the playground I'll show you what it looks like that's so nice about having graphql because you just have a little playground so right now the variable for um the slug we can just add this here oh that's interesting you can do that there you can just play and so this basically have the homepage yeah exactly there we go type is the page slug title description OG image and then here are all our components right so we have the hero component then we have the root routine component well if you have a look those are your actual view components hero component exactly routine component and then we get what do we get the product highlight right shop this product blah blah blah that is actually oh that's here shop this product that's the highlight and so these components come back as basically Json object so what we do we Loop over the components object because it's an array exactly exactly and then every time we find a type name of something this is the component that we build in VI or Astro basically you just make big switch case that will tell you hey if you get this name output this component exactly exactly so let's see if we can actually get something on the screen because we now have the query okay we now and so one thing we haven't done yet um let's go back well the Cen we have to do but we also actually have to query it oh yeah makes sense but that shouldn't be too crazy so we import it's called yeah get page or something right exactly get page but it needs a prop and I don't think we've added that yet oh yeah because we just hardcoded in here so that's fine for now oh yeah yeah yeah I know we just hardcoded but later on you would put slug here you get it from the URL right yeah yeah we can do that later when we do Dynamic Pages yeah exactly or on the next whenever probably because it's it's time flies yeah I'm thinking as it's jsx I'm gonna have to do this you could um no jason. pars because string of course you're right sorry right oh it's not liking it though oh it doesn't know what it is yet because we haven't typed anything but we can probably type it by running this code gen thing well you could also well no it's not someone asks if it's technically jsx no it's not it's um it's jsx like so no oh it's jsx like oh boy yeah which is kind of not the same but mostly like it's it's let's let's call it that it's very familiar let's call it familiar I like that um yeah it doesn't um no the C script of course we have to put it in oh man this feels like me coding on a normal daily basis getting half the things it's part of the game I guess definitely oh it actually works first time okay nice well let's have a look in the code what we actually just got from them so there's a graph nice what is in this index so it finds it finds okay what's graphql look it actually found our query and it found a whole here it actually made the graphql function that knows about our query oh so it contextualizes a function even it's not even types only makes this is like proper code generation not just type generation and then here it created this look these are all the things that actually come out of high graphs um yeah because of course graphql is super strictly typed so all this stuff just came out when it does introspection you get all this fun stuff that's why you have such a long file yeah okay exactly because basically this is just whatever um all the stuff like I have a page type you see heroen parent upser with nested we unique input like yes there you go and then we have a bunch of fragments I'm not sure what that exactly is so the these are fragment types okay let's not worry about all of that for now we'll see actually let's see if it now is in fact typed does this so it's still worries a little bit probably because you don't return a type in your get page exactly but maybe let's let not worry as much let's just see if something's on the page oh boy we might need to restart yeah you didn't start the server so all right interesting all righty then okay so it doesn't like something so it return object object you know what let's um do instead of putting it on the page for now let's do it in a console log yes a good move yeah but do it in the front matter do it at the top because that will output surface side so it will output in your terminal not on the page okay so we have to go to the termal then okay and now you can already see what it does it already show works yeah if you go back into your vs code yep oh there it is and it's also in your vs code yeah because I installed this thing called it's a really really interesting um tool that actually connects to your server instance and if you do a console log it shows you in here but there you go this is our whole thing it actually works first time as well exact dude this is first time we have 20 minutes left to do something but guess that we probably want to use something oh go ahead well no this is console log driven development yes this is old school it it what it same you see even the youngers do it Al righty so we have the data here so why does it give me any some trouble when we actually put it in since you didn't have a type returned so if you hover over data it will probably say any or unknown um the data like where you define the constant it's the variable yeah no so it doesn't know so what we could do is probably we could import the type from your graphql um file thing so could we just do something like this probably but now not page from asro of course no but we can probably do a quick fix now and then say oh it only wants it from asra that's interesting so what is this no this is not yeah that's yeah that's not that um wait we could try and locate the type but probably that will be very hard yeah likely right H yeah especially if your page yeah page is a little too uh oh wait type page ah smart uh space there we go exactly so export type page where from graphql okay I think we don't actually have to do from graphql I think could just import the type from um the the folder itself since it's in the index exactly that's what I thought so import typ oh boy page from probably level level up yeah exactly okay and now let's check that works it doesn't like it oh wait no no no no that should be fine we could always try and do slash and then the graphql maybe it does it export it yeah it did export type page yeah interesting well it could also be your your typescript um TSC that you have to you know what Happ happens all the time for me and then sometimes I just do this and reopen it and then suddenly it all works oh you have a shortcut for it you know if you do I are you on a Mac yeah you are command shift B yeah and then you can type and then you can just restart type scripts and after you have used that like twice you have to be in a CS file and then it will work oh really that is so much better yeah yeah it it goes really fast okay cool um it's doesn't exactly like it oh you see it found it it found the type so that's basically what we did page query is not a s that we just oh it's a page query query exactly yeah there it is now you have type data so what if we did this m data. page. title wow what we even could do now is extract everything okay I just wanted to see it on the screen just once we're good all right so what we could do now is try to build the page like um we could destructure the page from the data and then we have our page object and then we can work from there yeah could we just do it like this oh no yes yeah we go so you just remove data and instead yeah exactly do it like that then page like this right yeah exactly this is much nicer so then we have some Basics and so and that's why you use typescript instead of JavaScript exactly I I really like I'm like I said I'm a bit old school and so I had to get used to the typescript a bit because it's just years and years of just writing good code so it doesn't really break but not knowing why and now that I'm in the typescript stuff it's just well it's it's not only just writing good code and and stuff but it's also just intelligence now you know that you have exactly for sure we could do this right that's what we want because this this title here this is just like some OG Tech related stuff that is basically yeah and says it on the page you see it on top there home this one there it is that works perfectly great okay so I think with the remaining 15 minutes what would be cool is we we have to two options or we do something clever and kind of do this switch case to make these components work or we maybe just grab the first component out of the list which is the hero right and we make a few component that we make work inside Astro which of the two would you prefer well probably it's easier to show The View component working in Astro and how it works yes with that we are at least successful in the Stream for a bit I was going to say because if you have that the switch case isn't that big of a deal anymore because it's just copy and pasting different components and working with exactly I can I can show you a quick way how I did that specific thing actually in next uh we go to a composable use page oh you do it in composes yeah oh no so this is only the data bit okay so I think I have a components list yeah so this is what I do I have a little component mapper function H can I just click on this I used to certainly not ah uh component mapper should be here that's interesting doesn't matter what this does it just Imports the components and exports them again as hero is hero but then the thing that is hero is the imported thing right right and so what you can then do when you get that stuff you can just do component is and then whatever your type name is and then then it grab the imported one makes that an is and then you bind whatever props it had so this is a super few way of doing this that is some some view magic yeah this is pure black magic that is few and if you don't have to doe don't you know you could actually do the same in Astro but it would require some more um type scripts scrip in the time of Astro 2 I did this with as yeah it is possible exactly it was a hack it was a full hack I I asked some friends and like dude don't do it no exactly you can you can do comp how is it called I think it's Dynamic components um exactly the same as what you can do on react all the time right even more yeah basically you just set you um how do you call it like you import all of your components and then you just render the tag but instead of it being the tag title it's just a a variable yeah the name yeah yeah and this is why it's black magic in few because yeah when when somebody sees this in four years they're like what the heck is this you know so that's why it works like it's that's so nice about n all the magic happens below the surface so you don't really have to know but if it goes wrong you're calling Daniel row you know what I mean yeah yeah exactly which luckily I can do but everybody has that privilege right true any well to be honest if if you publicly tweet he'll probably say hey Will hop I know he he will this guy is amazing public about that yeah yeah exactly so let's let's jump back into it and actually install few and we're just going to grab where were we yeah here we're g grab the hero and just render this thing in Astro sounds good oh and do should we just render the few component and then not do next image but something else y cool so just you copy this whole file and then we'll migrate over okay and then I'll tell you how just going to grab it here to my code and do I make a components folder yes and then capital letter no doesn't well that's it doesn't have to be but you can do whatever you want Oh I'll just not do it you'll you'll have to put it inside of the source folder but oh oops that doesn't matter for now yeah just put it in there okay and now we have that view component right exactly but we don't have view yet so now we have to run npx add Astro add view if that's it that's insane that's it npx Astro add view oh there we go magic mm so exactly the same like we did with tail basically I'm just looking at F4 but that's Astro F4 so yes F4 doesn't exist yet soon probably yeah Daniel is giving a to at cdjs about n for as well I saw that I'm like what the heck already Okay so we're adding some jsx magic that's it yeah I'm just going to turn it on again okay so let's have a look at what we got in our config then oh just it's so simple isn't it it's just love well you could you could give extra options inside of that object have there but of course we don't need that for now no our component is so simple we don't need it exactly so if you go back to the page it does work still okay so now import the hero let yeah go ahead go ahead we're still good oh yes yes Daniel I'm also giving it talk at cdjs by the way what will it be about Astro yeah nice CJs London yes I love CJs yeah I did a talk I'm not going this year though oh nice no yeah like this is sometimes like I had so many conferences lined up and then sometimes some like family related things happen and cannot go and I hate saying no while I've already said yes but it had to happen so um well sometimes is not super happy yeah sometimes things take priority and that's understandable okay so now we have our hero component so import it oh wait I have to import I'm not used to that because no does it for me actually the I think the Astro one will do it as well but sometimes it might not so now you go back yeah to the components and then just hero. view as you're used to it and you have to change the tag from lower to okay of course capitalize yeah exactly and then can I do it like this no okay that's fine oh it actually should be possible oh probably it's because it's lowercase you have to write the tag itself with an uppercase otherwise the AST compiler wouldn't know if it's a native component or maybe it's um web component exactly possible to in few you act that's my main main reference you have to tell it then oh don't do this one as VI right whatever exactly that makes sense so now it won't work yes that's that makes sense because we have props and we have some stuff going on of course yes so if you go back to um exactly the um hero component we're going to remove some stuff for now we can just comment that out so in the hero component we have there the next image well this we're not going to do for now yep and now open it back up the the website I mean yep so it's says okay split where do you oh yeah I know we're not we're not giving it we're not giving the title prop at all okay so now we're going to do that so now you just type your props like you would do do you see that also Intellis senses really of course oh this is fancy I love it okay so okay and we have to do it this way right because this is the J jsx type yeah let me see what what I had in here just to be safe because I I did some fancy well don't forget that we also have to grab the hero component from page because right now oh we haven't done that yet we are still on the page level yeah yeah so for now let's just do it like this and see if it actually works so then we have description also um for now we're just going to go static I think we don't need another another description image yeah we comment we can always check exactly you commented that out so that's not needed okay now it should do something if it works W yeah Tailwind everything does and the thing is that we actually didn't change anything in the component except for that NX image thing yeah sure that's it so shall we just bind it yeah let's bind the dynamic stuff yeah go ahead how do we do that though are we just going to go nasty like the following I think so yep components and just grab the zero yes I know this will work but it feels like I need a [Laughter] shower um does it no this does not accept on typ oh probably it seems like the editorial is first that is interesting and what is editorial that's that's yet another component okay that is interesting let's see is that just some basic info that you always get or something or is that just like a different component yes I think it's just a different component let me just put this in like that and see what this does oh you see it's actually correct so the typescript error just grabs some other data oh because it probably doesn't know which component we're referring to since that's exactly yeah so it doesn't know it exists on the type yeah okay for now let's not worry too much about that I just want to see if this works well it will I'm pretty sure it does there we go yeah there it is and so let's do the image m so that's bit more difficult well it will be hard because we have to Define all of this as an upper layer and put it into Astro so make a new component called hero. Astro okay okay all right then all of the template that you had put it in there you mean well actually no don't yeah um you know what we're going to do um the props we're going to write in Astro so at the in the the Heather there you just do interface props with a capital P oh sorry yeah that makes sense yeah and now just write the the props that you are expecting which is title description um and image so then yeah you just make it um how do you call them double Point yep exactly goon I think but the image is actually I think it has a little bit more let's quickly check in our playground so that's harder yeah let's see if it's a URL we could do it oh wait it's just that I think then it's doable because we could just take the URL sounds good so so we just call it string we just grab the URL yeah exactly yeah because in here it's just image URL okay yeah because we have a bunch more Fields okay yeah yeah that makes sense so I'm thinking on how we best approach this so delete the um just ah how are we going to do this import the hero component into hero. Astro like we going to pass the the hero are you understanding me like what I want to do not yet but I'm I'm excited it's it's going to make sense in a second so import the hero mhm oh yeah hero VI view yeah and then put that on the page for now like that component we might have to recall it yeah we might have to recall it to Hero view but that that's possible because of course it's the it's a name it's not a named export so you can just import hero view from hero. View and the problem that that it's actually generating is because your file in asro is also called hero and then theile get exactly exactly yeah is fine exactly so now if we go back to the index page and we just change at the top there import um The View component we just import from the Astro component so change the extension to Astro oh wait I don't have to that can be yeah that can be hero and now if you go back to the page that will still work oh yeah it will call the image because we don't have an image ah yeah it's it's it wants the image it's required yeah so that should still work oh we're not passing the props down to the view comp makes sense but for now we just how do we actually do that from here then we have to actually no we have system here yes so we have them in that her. asro component so now um yes in the front matter you just type const and then you destructure um title and description from Astro doprs oh you oh yeah exactly whoa whoa whoa whoa whoa whoa whoa and then equals yeah you just use equals Astro with the capital. props yeah I've done that one before yeah cool and now we can even use short hands so you can just do open the parenthesis and then just use title description oh and Tim is gone I guess I'm live oh no h they'll probably join back in a minute are we still here what happened yes there you are I don't know we we are still live we're good we're still alive yes somewh you are the host for a second but we're back I apologize everyone okay so actually I think this should work all right on the page and and if it doesn't I know what's wrong okay then you just have to use them both separately so title close parenthesis and then description parenthesis like this yeah you can do that yeah that that will work let's do it for now so it's it's at least we have it and remove the comma as well whoa whoa whoa whoa yeah I saw the coma yeah let me fix that too don't worry okay so now we have actually the same now down exactly prob but what we want to do is render the image here so what we're going to do is if you go to hero. view you have like a top section which is section and that stuff copy all of that to the to the hero component in Astro and then close that section and now we can use our image so just um right oh I get it now sure do you see what we're trying to do yeah yeah yeah sure so now um let me think of on how to do it so be before the hero view um component be before that we want to render the image so so we have to kind of remove this section though yes you have to remove it there yes true but that's all right because if we if we render the hero still rendering it yeah and it's also a single root still so we're kind of safe yes and the next image you have to of course um well that we're going to replace now let's do this right yeah don't forget to add it in the index as well oh here right now we're just going to do it like this yes we don't want our accessibility thing to start screaming yeah just do it like that four now but if we check it will work now I don't think we send are we sending the oh yeah yeah just write image there there it goes uh yeah sorry the few is still so much in my almost there we're almost there this is what we need yeah all right right let's check that so what does it Rend if we check it's not happy yes if we check the source so it does give you the El oh the source is just not doing anything not there so oh is it isn't it URL oh my God is that it probably yep yes that's it that's it but now you're just using a basic image component so if you want exactly exactly then we have something called Astro assets so if you go back to your ASTRO File then you import image which is a component with capital I what from s yeah just Astro aset with a lower no it's actually um with a column so Astro lower case and then colon instead of a slash and then image is a yeah is not a default export so you have to put it in between the parentheses oh it is it is like this then yeah uhuh and now you just change your uh thing and now look at it again now it will say image height yeah and that's something that you can infer later on but now it will also output that automatically will become a webp image exactly let's just try this because interesting like I I want to see what this does because if it makes this a webp from high graph it can also be a web PE already but also something else based on your browser so I wonder what this image Tech will do do let me see what's what Brian is saying yeah how next image works exactly um we can actually have in high graph you can actually query with graphql the sizes and the differences that you want you can even do like give me a big one and a small one in the graphql query but that you don't always want to do that but that's an interesting approach so let's see what this image tag gives me so the section is what we made and it so it didn't do that much load yeah there is a reason why we don't do that we treat all external images as being unsafe exactly but we can add it to a safe list so media. assets.com will add to a safe list and that you can do for instance in that asro config um oh oh there we go so now you just go into your config yep and then um if you go image exactly yeah um it's um domains ah of course this is so close to react to next I like it yeah it is and that's it why not right well if it works it works exactly like and now when you will it it will not do that now but if you will build a page then it will output that ah let's do that because that's all right so now on build it will download it from the external Source yes puts it in you have to build yeah that that's the whole thing about like generating as being static will see that probably oh typescript oh crap damn it because I have to go like in a minute I know oh I thought like five minutes ago though yeah I guess I'm I'm five minutes late probably can I do something nasty like this um no but you could be even nastier and just just um don't um expect typescript to work if you go into TS config and just delete the extends uh at the bottom yeah and then just comment that extends out there oh yeah yikes nobody saw this I tell you yeah I don't think that now will yeah it runs still Astro check that sucks um okay we can get around that we can get around it if you want like if you go and remove in the script the Astro check in the package of Json file yeah exactly so just it's not intended to work but yeah then it just never checks all of your types which is unsafe by the way don't do this at don't don't there just in the build script oh of course sorry don't do this at home GS yeah don't don't but you see that actually now fetched everything and that's yeah so now mpm run preview and that will give you um the build page and that should actually work so this is an interesting approach that I would personally maybe not have taken when you work in like super um High scale work because I'm actually working with a customer now that I cannot mention obviously and but they do they but they don't have Astro they still have um what's that static side generator 11 no another one in react that net I bought the one yeah so they do Gatsby and Gatsby image that's the same thing yeah but they build one website has a thousand pages and they have 500 websites and they all have images and their build just fails because there's so many hanging threats of build of compiling this with Gatsby image and so it's in our case we can do it parallel well not for also but they have that many it's just not happening so at scale those kind of choices to do file system stuff like that is worries me but the thing is we don't have to use it oh but it didn't do it though now no it didn't do it and I'm wondering why probably because it doesn't know that the image is coming from that endpoint since it's a dynamic um yeah but that's something that's not really for this stream we're cool like this is something we can figure out I'm actually quite excited by this and and actually it was really easy to be honest dude it was so easy we are actually successful and we did like lots of like graphql queries typ actually was just setting up everything else will now basically be copy pasting um components and then just optimizing the way you're using them yeah and so what you were saying before we're doing the stream like this is kind of the approach right you grab the view file you put it in you make it work and then over time you might say let's go to Native Astro right is that is that a good approach that is the way I typically approach that yeah for instance if you're migrating over react application you just take components and then it will already work on Astro and from that point on you can start component migrations to Astro native files and then you will get increasingly more performance over time that you're working on the migration but it will work out of the box exactly because a build will be faster if it's native Astro versus exactly react and VI in the same thing right yeah and you will output more HTML instead of more JavaScript yeah exactly all right dude I've have taken you 10 minutes too long I'm this so much you taught us a lot about how simple it is and how good the docs are and the CLI just works and it has amazing looks on the CI I don't know why that's important but apparently I like it no it is it is thank you man yeah no worries I'm like if you ever meet me again and want to work further on this project or you hit me up personally or I come on stream again um probably because we will release this starter kit as an astro project so I want to have it fully checked that every everybody likes that this how the Astro is built and the approach we're taking so that's cool and if I don't see you sooner then I'll see you in Amsterdam at yes exactly yeah we'll see each other there for sure cool cool thank you man before you go is this your Twitter yes that's me everybody who wants to follow alen follow him there and there's one more banner I have to make just one sec before we go go ahead let me edit people please go this is my CTA because we want to um build our community up do a bunch more and follow us here and go for it um thank you for everybody who was watching um this was the first one of the year we kind of had to you know Feel The Vibes luckily we started with friends so it's easy right those those are always the best streams so thank you alen and um don't worry see you soon everybody byebye byebye