Building with SvelteKit and GraphQL

So let's get started with building with SvelteKit and GraphQL. So just a bit about me, as the usual thing you need to do when doing any sort of talk. My name's Scott Spence, you can get me as at Spences10 on most of the social networks. I'm a developer advocate at GraphCMS currently. Help organize the Svelte London meetup. I've been honored with being able to help out with the Svelte Sirens site. So yeah, I've helped out with the Svelte Sirens project. So Svelte Sirens is a women and non-binary and allies community which has been built inside of the Svelte community itself. It's run by Britton Postma, Steph Dietz, and Jen Ashley, and I'm forgetting someone, Willow, who we know as Ghost. So it's a great initiative there. I've done this workshop a couple of times now, Jamstack Conf, GraphQL Galaxy, and I've also done a Jamstack Explorers mission, which is a bit of a shorter version of this workshop. And I'm also a cat dad. I'm really sorry I haven't got any pictures of my cats to show you, but they are adorable, I guarantee it.

Okay, so let's just quickly go through the agenda here. And I hope everyone has got the link for the workshop material we're going to be working through. There is a link in both the Zoom chat and in the Discord thread. Can I say hi on Discord thread as well? I think it'd be good to just manage it in one place. If you have any questions, then I think you can raise your hand or just ask. Everyone's got their microphone available, and everyone's muted at the moment. So thank you all.

Right, so let's just quickly rattle through the agenda and what we're going to be doing today. So we're going to be building a small blog with a GraphQL backend, and we're going to be using SvelteKit for the front end. This is a good example because it goes through several things which are sort of pertinent to SvelteKit. But we're doing that, we're writing some GraphQL queries in GraphCMS. We'll be querying the data we've written with those queries in Svelte, we'll be retrieving information and displaying it in our project. We're going to take a look at Svelte directives, Svelte routing, and endpoints in Svelte. And then finally, we're going to deploy it to production. So we've all got a nice little project at the end of it.

Okay, so let's talk about Svelte briefly. And when I say Svelte, I really mean SvelteKit. SvelteKit is, I mean, Svelte still has, it's still used in a lot of places, but SvelteKit is like the, like it's going to be the one-stop shop for creating any new project in Svelte with the sort of functionality we're going to be looking at today. So what is Svelte? Svelte's a component framework that allows you to create components for your projects as reusable components, much like all the modern frameworks we've got these days, React, Angular, and Vue. The main difference between Svelte and technologies like React and Vue, let's say, is Svelte's a compiler. So what that means is you write your declarative code in your text editor, and what it produces at the end of that, once it's built through the compiler, is plain JavaScript, HTML, and CSS, which can be used by the browser. So there's no virtual DOM, there's no diffing. Svelte is clever enough to do all of this up front before it's built. And Svelte, I mean, it's relatively new. The V1 was released in late 2016, around November, I think. So what is SvelteKit? As I said, it's going to be the one-stop shop for building Svelte projects. Has modern web development best practices baked in, like root splitting and other things I can't think of right now. You can use HTTP endpoints. We'll come on to those later on. Uses file-based routing. And from giving you that description, you can probably guess it's very similar to Next.js or Nuxt. But it uses Svelte instead of ReactorView. I have heard Rich Harris actually saying that Next.js was, you know, like the inspiration for SvelteKit, and they took a lot of their design direction from Next.js.

Okay. So let's go straight into it. I haven't got many more slides. So I'll just try and go through some of the concepts we'll be covering in the workshop. And then we can start building. So Svelte, without getting too much into this, you can use reactivity pretty much as you would with, let's say, vanilla HTML and CSS and JavaScript, sorry. But I mean, the code here looks very much akin to like HTML file. And in fact, Svelte is like a superset of HTML. So anything you can do in HTML, you can most likely do in Svelte. So with this little snippet here, we're just creating the classic increment count. So the function is declared here, and we're just incrementing count, and then we're using the on click on our button here, and then we're just calling the function. So let me quickly go over here. Okay. Sorry, I thought someone messaged me on the Discord here. Okay. So let's crack on with this. So it's JavaScript, so that function could just be put into an inline function, and even more inline, you could just do it as like an inline function here. Great. We could go through some of these examples in the Svelte REPL later if you like. But for now, let's just go through the rest of the slides, and then we can get on to building.

Okay. So again, here, we're just using the on click inline. So we've got declarations here. So this is the funky bit, which a lot of people who are like first see Svelte for the first time, they're like, ooh, what is that? And that is this dollar and the colon here. So this is valid JavaScript syntax, and it's used as a label in JavaScript. So you could use it as a go to in JavaScript. But in Svelte, because it's a compiler, we can do what we want with it. So in this case, it's a reactive statement. So we're saying that the doubled variable here, so this is both declared in here. So this could be just let doubled, and then we could have doubled equals count times two there. But you can do it inline here. And I'm using another function just to increment the count here. And then again, we're just incrementing it with our on click. Yeah. We could also use if as well. So the curly braces here, this is just to tell Svelte that there's going to be a directive used. In this case, it's going to be if. And then if we create a zero, then we're going to hide this P tag. Otherwise, we're going to show it. So we can conditionally render elements on the page. And unlike with React, it's not hidden. It just doesn't render it to the page. Or there's just no element there for it. And I've got the else statement as well. So we can have something in place of that element. And then we can take a quick look at each. Each directive here. So we've got our speakers object. Sorry, speakers array here with objects in it. And then we're using the each directive to loop over each speaker here. And we're also incrementing this with this I variable. Which can be pretty much anything you want to call it. But the standard is I. And then we're just going to render out an unordered list item with an A tag with the speaker name and a link to the speaker on Twitter here.

One thing we need to cover is the reactive nature of Svelte. This means that if you have push and pop and like array functions, sorry, methods like this in JavaScript, you doing this reactively won't actually give you anything.

This means that if you have push and pop and like array functions, sorry, methods like this in JavaScript, you doing this reactively won't actually give you anything. It won't react because there's no event to it. So what you could do is just say numbers equal numbers. But that's a bit of a repetition we don't really need. What we can do instead is just spread it into the array here. And we've got our reactive sum here. Which we are using to display that on the screen to the user. And I'm just going to click through that.

Okay. So learn Svelte.dev. I'm not sure if anyone follows Rich Harris on Twitter. But there is going to be a learning resource for this. There is Svelte.dev. And I think there is kit.svelte.dev for any information you want to learn about Svelte kit. And with Svelte, there is an interactive tutorial. It's great. I advise everyone to go through it and learn that. It's really handy. And this here, learn Svelte.dev is for Svelte kit. Still really early stages. But it's really useful.

Okay. So let's talk about props in Svelte or properties. So in like most modern sort of component frameworks, you want to pass information down the render tree or to a component. And with Svelte, it's no different. You can do that. How you do it with Svelte is you use export let. And I know a lot of people will be thinking that should export something. It exports it for that component. And it may seem a bit funky. This is it's in the documentation. I think the words in the documentation are just roll with it for now. It will become second nature. And for me, it is. So have I got any clicks in here? Okay. So I'm importing this child component into let's say the index file here. And I'm giving it the name world. And then I'm passing name over to the child component here. This is receiving it and rendering out hello name. Svelte has some of the syntactic sugar where it can shorten this further. If the component being passed in is the same, then you can just wrap this in the curly braces here and, you know, lose a prop equals prop when it's the same name. That's a nice bit of syntactic sugar there from Svelte. And there's also default props you can pass in to a component. So over in our component here, we're saying that the default is world. So the... Where have I gone with this now? Oh, my clicks.

Okay. So the first component here is gonna just render out hello world. And the second component is gonna say hello you. Let's take a brief look at styling in Svelte. Excuse me. So styling in Svelte is pretty much as you would do in a HTML file. You have your elements in your file. And then you have your style tags, which would wrap any styles you wanted to use in that file. With Svelte, the styles are scoped to the component. So there's no cascade outside of that component. So if you want to do global styles in Svelte, there is the... What is this down here? The colon global. So in this here, we're saying any P element in this file, we're gonna have it as cornflower blue. And I think... Oh, I've got an example here. So this is the Svelte REPL, by the way. This is great for just quickly scaffolding out something in Svelte, just to test something. Use it all the time. So this is pretty much what I have just gone over in the slides here. We have our component. And we're saying hello from child component. It's an H1. So it's colored C green. The P doesn't have any styles being applied to it. So it's taken on this cornflower blue from this global declaration here. Where do I get past this page now? It's just... Yeah, I'll go to page 28. There we go. There's also a style directive in Svelte, which means that you can use style directly in your elements. So this is a bit of a contrived example. This is gonna be adding the style transition directly to a div. This div is just a red box, which is gonna spin around every one second, one degree at a time. And a great resource for this, which I found, is a guy called Jeff Rich. I think... Yeah, I know. He's a Svelte core team maintainer now. So really good source of information for that sort of thing. Check out that post there for more information on style directives. And that's it. So very brief overview. I'm gonna start building now. I'm gonna pop out my terminal. So I'm hoping everyone has got the Notion document, which looks like this. And I've shared the link.

So what you can do... We've got the readme here. And then we're just gonna go through each one of these steps until we've got a project at the end of it. So if you get stuck any way through what we're doing, you can refer to this, or you can put your hand up and speak up, and we can try and do it together.

Okay. So in the prerequisites, I asked for the link to be shared. I don't think it was. If you have got the link, I'm hoping you've got a Node environment on your machine and an integrated terminal of some sort and a text editor. I use Windows. I use WSL. So it's pretty much Linux. And where am I going with this? Oh, yeah. So I've got Node. Let's open up the terminal. And bring it over here. And I'm just gonna blump up the font size. And I have Node 16.15 installed. And I use NPM for installing all the things. That's 8.55. Okay. So we're gonna NPM init svelte a new project. I'm gonna be going through the steps I've got over on my Notion doc here. So use NPM init. And we're gonna call this building with SvelteKit. And GraphQL. Okay. Start on that. Just initializing some random people. It should be Svelte. So we get the Svelte CLI will prompt us here for what we want to get out of this CLI here. So I'm gonna start off with a skeleton project. I know I put the level at this workshop as just familiarity with HTML, CSS, and JavaScript. So I'm not gonna go into TypeScript on this. But I'm gonna use type checked JavaScript. So there will be some errors we'll see when we go through the project. What we're gonna use is just JavaScript doc notation for those. And the only reason why I'm using type checked JavaScript rather than none is so I can get some of the TypeScript features out of it, basically. So if you want to use TypeScript, feel free to pick these options. But for the workshop, I'm gonna be covering anything which is in this sort of configuration. So I'm gonna say no to ESLint. I'm gonna say yes to Prettier. I need to take a drink because my voice is going. 20 minutes in. I know I can't talk. Not good. I'm not gonna add playwright for testing. Okay. So it's just saying that NPM is updating here. So we'll get some output from the CLI here. So I'm using type checked JavaScript, using Prettier. And then we'll come on to this shortly. This is actually just open it up here. Let's get a browser tab going. Let's click on this. So this is the Svelte ad project. Super handy for adding all these things here. So I'm guessing 3D is Svelte cubed, is it? Let's take a look. No, just looks like it's 3D. Okay. Slightly on a tangent here. What we're gonna be using is Tailwind CSS. There's also MD Svex, which is allows you to use markdown in your Svelte projects. Really like that. And you can see there's a whole host of other things here, which are, these are supported. And then these look like external integrations as well. Come on to that in a bit. Let's go back to the terminal. So let's CD into the project here. And then follow the rest of the instructions from this, which are NPM install. I'll be using PMPM. I'm using PMPM just because it's a whole lot faster. And then what else have we got here? I'll try and we'll do a commit at the end of each section we've got. So then we can sort of refer back to stuff after we've done it. So I've got a video call sharing my screen. So this might take a little while. I'm going to check the chat. I'm doing this. Okay. So let's go initialize this. And I'm going to open up my text editor, which is VS Code. So one thing I'll just cover quickly is you might see me just putting in shorts, like aliases, because I'm lazy. And I've just got a whole lot set up on my ZSH terminal here. I use ZSH and OMRZSH. All of the documentation I've put together, I've made sure it works in ZSH and Bash. So if you have any issues, just put your hand up. Okay. So we've got projects. Did I open up VS Code? I didn't open up VS Code. So let's just do a quick tour of the project. Oh, oh, dear.

Sorry. We've got to watch my videos have been stored now as well. I do apologize. This is a good opportunity for me to get some walk-off play.

All righty. So it's opened up on my other screen. And we've got the main release of VS Code. Okay. So let me just quickly go through my build set up here. So this may look a bit different. It's VS Code, super configurable. I prefer to have my Explorer on the right. I've got all my action bar hidden. And this bar down the bottom, this doesn't help us with what we're doing. So I'm going to hide that. And let's just quickly take a look at the extensions I have installed. So what I'd recommend for this workshop is, not view. So VS Code, this is the supported syntax for VS Code. I also used Svelte 3 snippets. So you'll see me just type out a short code and it will pop up some, like a code shortcut for me. I'll go over that when I get to it. And there's also Svelte IntelliSense. I use this. I'm not entirely sure why it does. It looks like it gives you the click-through option on your components here. That's handy. And I use CodeSpellChecker. So when you see like a blue lint underline, that'll be a spelling lint error. And also, AutoCloseTag and AutoRenameTag are handy for when you're putting on your markup in your components.

Okay, so I'm just going to hit reload there because it looked like everything wanted to update. Okay, so let's do a quick tour of the project. And let's just check out the font size here. Let's just bump up this a bit. I hope everyone's okay with that. So let's take a look at the, what should we do, top to bottom, bottom to top. Take a look at the Svelte config here. This is what we can use to configure the project at a high level. This also has, Svelte uses Vite, which I didn't cover, but Vite is a build tool which just helps ship all of the plain HTML and CSS and JavaScript for you at build time. Super handy tool, insanely fast. One of the main reasons why I was instantly sort of in love with Svelte kit when I first started using it, it's super fast. One thing I will actually mention as well is in my settings, I have edit a format on save and then this auto save delay is half a second. So this is because Vite is so quick that you can, it looks like you're sort of coding in real time. So you'll probably see me like typing out some stuff and if we get it in split view where we've got the text editor and like the browser, you might see stuff blow up and it's just where it's trying to save and it doesn't recognize stuff. Come on to that when we actually start doing some coding.

So we've got the read me, the basic read me for the create Svelte project. We've got the package JSON here, which has got some really handy scripts in it. Mainly we'll be using dev. We can build and preview the project locally. And we've also got like type checking here and then we can watch it as well. We'll be using that. We've got a linter and we've got a format. So format prettier comes as default, no it doesn't. Prettier comes as a configuration option and that installs these additional two dependencies here. Otherwise we'll just have Svelte adapter auto, Svelte kit, Svelte itself and the two options here. And that's got TypeScript on here. This is just so we can do the type checking. Don't worry too much about that at the moment. Okay. So did I install the dependencies? Let's just check. I've got, yeah, my node modules are here. So just for purposes of this workshop, I'm going to be using my preferred prettier config. We're going to get into tabs versus spaces, but I don't need to send me a single quote where I can. And I have main reasons just for this print width so we can get it all onto the screen while we're looking at the code. We've got the NPMRC file. This is, helps with, what does it help with? It helps with the engine strict and there's a couple of options you can pass in here. Nothing we need to worry about for this workshop. We've got our GIT ignore file and we've got a static assets file. At the moment we've just got the Svelte favicon. And then there's configuration files. The majority of the workshop is going to be happening inside this source folder here. We've got the app.html file. This is where everything gets built into at build time by Svelte. So in here we've got some standard head information. We've got some metadata information for the viewport width, I think. And then this is the Svelte head API. So with Svelte you can use Svelte head inline and you can add in like a page title and you can also add in meta information for your project. Say you want open graph images, you can put it in there. I recently released a package which I'm going to find now and do some shameless self-promotion here on GitHub. And everyone in the Svelte community likes to start their projects with SVE. And I've called this one SVE as Svelte and head. So this is just a component which you can pass any of your information to if you need to have on any of your pages. We're not using that. We just want to make you aware of it. So that's the head. And then the rest of the project is built into the Svelte body here. And Svelte assets in the percentage signs here. This is relating to the Feather column which is in our static folder here. Okay. So we've got a TS.DS file for the definitions. This is for the JS type doc checking which I covered when we started initializing the project.

And then we've got our old landing page here. So now we've installed the dependencies. Let's look at getting this spun up. So where is... Here we are. Okay. Right. So if I go to my terminal and do PMPM run dev, you can see the IntelliSense brought up an option here for the port. And there's also one to open a new browser tab. So here's the mockup from the terminal here. Sorry, our index page here. So let's move these around so we can see them together here. What else do I need to cover on this? Right. I'm just going to format this. With the dev server, the dash O is just dash dash open. And then you can also specify a port. It's going to open up in port 333 for us. I'm just going to use the default which is 3000, I think. 3000. So I'm just going to put the terminal down here. I hope it's not too crowded for everyone. I'll just be hiding this side panel here like this. Okay. So let's just look at where we are on our documentation here. So we've gone over the optional flags. Right. So a bit of a contentious point now. Going back to how we do styling in Svelte. So we could go in and add a style tag to each element on the page you want to be doing. And styling it this way. But I'm not going to be there. I'm going to be using Tailwind just for the speed at which it allows us to scaffold stuff out and do the adding the classes to the elements in line. So I'm going to start installing some Tailwind bits. So I've got my dev server running here. I'm just going to cancel this. And going to use Svelte add which we took a look at just a second ago. And it's an MPX command. And you can see I've got it here for MD specs. I want Tailwind CSS. And I also want the typography plugin which is dash dash typography added to the project as well. So the typography plugin, it just gives you nice defaults for all of your typography. So as and when we need it, I'll be using that rather than spending time styling out bits of the project. So just going to wait for Svelte add to install that. And it's done that. So if I pop out the sidebar here, you can see from the last commit, we've got some stuff being added and updated. So what I'm also going to do is talk about Daisy UI briefly. So Daisy UI. I can't believe Daisy UI is not in my history. Daisy UI is just a super nice set of defaults you can use with Tailwind. So this is a plugin for Tailwind. We've got MPM installed, Daisy UI. Actually, what I didn't cover was in the package JSON here, you'll notice that they're all dev dependencies. And that's because it's a compiler. So everything is done as development dependency. There's no need to install just plain dependencies. Don't think you get any issues if you do. But I have seen the occasional one here and there. So what I'm going to do is install as a dev dependency Daisy UI. And because I didn't run PMPM from the MPX configuration script for Svelte add, it's also going to install those dependencies for me as well. So let's just close that. And let's pop out the Explorer tab again here, or panel, and take a look at what has changed. So I've now got a Tailwind config file. And I'm going to want to use Daisy UI as a plugin here. Please just ignore the warning in the bottom right-hand corner. That's my Tailwind IntelliSense complaining. And you'll notice that the blue underscore, as I mentioned, that's the spelling extension I have because I mistype stuff all the time. So I'm just going to say add Daisy UI to the workspace settings. If you don't use this extension, then there's no need. But just so you know, if there's a blue underline, then it's just for my extension getting in the way. So apologies. So now I've got Daisy UI being imported. I can use it as a plugin after the Tile Prography plugin. And it's important to note that. Let's just close, clear those. Yeah. So we've got Tailwind config. We've got the Svelte config, which was updated with the preprocess here, which is part of the Tailwind configuration. We've also got a PostCSS config file. We won't be touching that. Jazz config. What was that? That was just where I formatted it. And Prettier RC, that was where I put in my preferred config. So what else has changed is we've got our app.css file here now. And you'll notice that this code is screaming at me. That is for. Where is it? I've got it. Yeah. It's not valid CSS. So I'm just going to put in the settings here. The CSS validate false.

And make that go away. Okay. But now I've got a topography and Tailwind with topography and Daisy Y plugins installed. Let's spin up the dev server. Let's put this back over here. This back over here. And pnpm run dev. And spin this up.

Okay. So this is the default Daisy UI thing. You can set yourself a default in the app.html file here. And this is just a data attribute here. If it's a data dash theme. And then we'll choose. Any one of the many Daisy UI themes available to us. So just scrolling through the app here. Actually, I'm just going to restart this. Because it should say. Up here. Yeah, we've got 29 themes to choose from. So if you want to reduce this down. You've got a mega bloated CSS file. Then you can use like a Daisy UI config. In the Tailwind file here. Just put it after the plugins. So we can put it in. And we can have like night and winter here. As the two options. Just put that in here. Then you see it refresh here. So let's just use winter. That's a bit more lighter. I'm hoping that it's appealing to everyone who is following along. And I'm going to be using all the themes later. If you get time, we're going to put in like a big thing change object. And we're going to have more in there. So we can play about with them all.

I work at GraphCMS. It's a great product for storing your content. It's a GraphQL first product. And it always has been. And they don't support REST. Because it's a new product. And GraphQL is a great platform for that. I'm not sure the sweets are going to work out. Sorry, everyone.

Okay. So what we're going to do is spin up our backend. So go to app.graphcms. Actually, I'm going to do it in here. I'm just here. Someone has their microphone on. I'm going to find you and mute you. There we go. All right. Where was I? All right. Let's go to app.graphcms.com. All right. So when you come to this page, if you haven't got an account already, you'll be prompted to register, which you can do here with GitHub, email and password if you prefer. I'm just going to log in with my GitHub account. And then this will bring up my dashboard. I can see all of the projects. You can see, delete this. And lots of my demo stuff I've been going through. If you are new to GraphCMS and you haven't got anything set up, you won't have this section here. But you will have this create a new project section. And this is pre-built schemas to get you up and running quickly. So for what we're doing, we're going to be doing a blog, which I'll be guiding everyone through that. There is a developer portfolio and blog example, which is made in SvelteKit and uses GraphCMS on the backend. You can check out the demo, the repo and deploy your own. It uses the same stack as we're using here, SvelteKit, Tailwind and DaisyUI. But for this workshop, we're going to be doing the classic blog example. So this is JS Nation. And we're going to keep the description here. If you want to use this project for something you're doing, then you want to add in your own content. You can uncheck this template content. But for me, just for the speed at which I want to go, I'm going to leave this included. It gives you some placeholder content and I'm going to select my region. I'm in the UK, so I'm going to select London. And also note here that it's for selecting your region. You could have like data concerns, like data policy concerns. So stuff like GPR. So you want to select your region that way. It doesn't really matter ultimately because it all gets distributed via a global CDM. OK, so I'll put in my information here. I'm going to say create project. And I'm going to wait for this to be provisioned for us by GraphCMS. And while that's happening, I'm going to bring up my notes. So hi to people joining. I think we've got someone else who's just joined in.

If you're in the Zoom chat, scroll to the top of the Zoom chat and you can get the workshop material we're working through now. It's a notion page and you can start working through it from there.

So let's take a look at our project now. So we get this landing page. I'm going to bump up this a bit here so everyone can see it. Hopefully everyone is OK with that.

So this is the project dashboard for what we just created there. So you can already see the schema is set up. We're prompted to create content. There's already content in there. So maybe towards the end we'll add some stuff in. We've got to explore the content API. We'll be doing that with GraphQL. And we've got the option to make our API accessible. I'll come on to that in a second. And then also we're going to be integrating our content with the front end. So GraphCMS, we've got the options down the side here. So we've got the schema. This just is like a dictionary of how the data is created or organized. Sorry, not created. And each one of these are a model. So for this, each model has its own field types, and you can create and add field types as you need them for each one of the models.

So we've got our author model here. We'll be using this in the workshop. We've got a page model. So we have a title, a slug. So that would be forward slash about, forward slash info, stuff like that. Subtitle. And the content, this uses rich text. That's an option here. With these options here, we can say, I believe I can say title is a single line of text, but say if I wanted a multi-line of text, I could just change that up here so it could be converted between single line of text, multi-line, markdown, or slug, which is really handy. And we'll be using the post. So the SEO, we're not going to get into. It's like a related model, which has a relation to the author and so this is the post, has a relation to the SEO and the author. So it's just like two-way relations. So each author could have many posts, and each page has the SEO. But we're disregarding that for this workshop. So then we have the content where we can add and remove information for each of our models. So we have two authors here. We've got Ronek and Jamie. Sorry, it's a bit windy here. We've got our doors open. Everything's banging about. So with our content views here, we can search any information. We can filter on information as well. We've got an about page at the moment. So if we go into edit here, and this is where the content for your page will show up. This is in rich text. There's no subtitle at the moment. We can add one in if we need to. I'm just going to leave it blank for now. Then we've got the post model. So we've got four posts here. And each post will have a title, a slug, publish date, an excerpt of that, a cover image. It doesn't look like we've got the SEO linked up here anyway, so I'm just going to gloss over that. And we've got the content and any tags relating to that post. And then the author at the bottom here.

So that's models and content covered. So with GraphCMS here, if we want to add in some new content, let's go back to the post here. I can say create entry and enter in some content here. And then I can save it, save and close, or save and create another. It's handy when you've got quite a lot of entries you want to add in. And there's save and publish. So you can just save it as a draft and create another. Or, yeah, sorry, if you hit save here, it'll just save it as a draft. So it won't be available via your GraphQL API, which we're going to come on to now. So the API, we've got our API Playground here, which is under this play button. And if you've used GraphQL in the past before, this might look familiar. This is called the Graphical Explorer. And from here, this is going to list out all of the. So when we did the project creation, GraphCMS went off and created each, many different queries and mutations for each of the models. And those are all listed down here. So we've got a post and we've also got posts. And then there's also mutations. So we could add a post to it. We're not going to cover mutations in this workshop. We're just going to cover query and stuff. So let's say we want to get all posts. So what you can do in GraphQL is just two curly boys, which means you can start off writing a query. And if you use control space, it brings up all the options available to you. So I want posts. And if I hit control enter, it will also complete that for me. Just puts in the default for the ID. And then this brings us the information on the right here. Everyone OK with that so far? OK, so I'm going to be writing some more queries now. So I want post information. So you can name the queries as well. So if you say query, and I want this to be all posts. You notice in the playground here, it's been updated to all posts. And then from the posts model, I want to get the title.

So you can see the IntelliSense title there. I'm just going to hit tab. I'm going to go to address these. So I want the slug, the date, also the excerpt of the post, and the tags for the post, and the cover image. But I want the cover image URL only. So if I hit control enter again, you can see it's brought back a bit more information. So we've got a posts array here. And inside this array, we've got an object for each post, which are these here. So there's four of them.

OK, that's great. So we've got all posts. What about a single post? Well, we're going to do that in another query here. It's a query. This is going to be post. So the post needs to have, it needs to know what information it's filtering on. So in this case, we're going to open up some parentheses here. And we're going to pass in a variable. And we're going to call that slug. So the variable is denoted with a dollar sign. And then also we can put a colon here. And then denote the type of that variable being passed in. And it's a string. Then again, we start with the curly boys here. And then this is going to be for the post. We're going to filter on the post model where the slug, curly boys. Just putting S, I can also complete that. And put in a colon. It's auto-complete for me, but it needs to put in the dollar sign there. So on the post model, I want to get the title, the date. Again, you notice these are repeating here. We're going to come onto this in a bit. I want the author information. So if I hit Control-Enter, this is going to put in the ID. I want the author name. I want the author title. Ah, I want title. But you'll notice that author title is the same as the post title here. So I'm going to use a label here to say author title. And you just put a colon there to say that's the author title. I want their picture. And the picture here, rather than just bringing back the URL, because it's going to be a very small image, I'm going to be using the GraphCMS transformation API. So I opened up some parentheses here. You'll see we've got transformation coming in. And this means I can transform. Colons in here. Image. And again, colons, curly boys. This is going to be resize. Again, another object. More curly boys here. I want to fit this as a clip. I'm sorry, I want the fit to be clip. I want the height. Because it's going to be a small profile image, I'm just going to put it as 50 and the width as 52. Right. So picture. What else do we need? Let's go back to the notes and content. So for the content, I can have raw, HTML, markdown, or text. It gives you these options because it was a rich text field. Rich text allows you to convert between those. So here we see the content is a rich text field. Let's go back over to the playground here. And I've got a link warning on this. What is this? Too many curly boys in there. It's going to say prettify. So that. One too many. Right, okay. So if I say prettify now. Right, let's just put in the HTML for this. Oh, it's just completely stopped working. Let's just try to take that out for now. All right, so my telecenter just stopped working. Let's just see if I can get in the cover image. I'm trying to do all this in the author. It doesn't exist on the author. So let's just go get that picture back. And content lives outside of that. So what's it say? It's here. Content. I want the HTML. And then I want the cover image for the post. And I want the full size for that. Maybe it's too big. We'll find out. So let's just hit prettify there. You'll see it format the rest of that for me. So now if I run the query, you see it comes back with post null. Now, why is that? Because there's no, we're not telling it what to do. It's not getting any information on what to get.

It's just coming back with nothing. Now, what I should have done is put an exclamation on here to say that the slug is required. So if we try to run it again, we'll get an error message to say variable slug must be defined. So we want a slug. So let's go back over here and get this one here, technical SEO with GraphCMS. Go back to the post. And I'm not sure if anyone's seen the variables panel down here. If you click on that, it pops open for us. We'll put in some curly braces again. If I just type out S, I'll get the intelligence for slug there. And in there, I can paste in that slug. And run that query, and I'll get the information back that I need. So that's pretty much it for the GraphQL stuff on GraphCMS. There's two more queries. There's one for the pages. I'm just going to paste these in here because I am aware of the time. So I've hit that. You can see that it's going to give us the about page details. That's what we have in that model at the moment. And I'm also going to have one for single page, which is going to take a query variable. Slug, and it is about. So that's it for GraphCMS. And we're going to be using these queries now throughout the project, throughout the Svelte kit project. So are there any questions? I understand I was going a bit fast. We have, I don't know if I've got it now, one and three-quarter of hours. I'm confident we can get through the rest of the course, the rest of the workshop in that time. I don't want anyone to feel left out or confused. So if anyone has anything to ask, could you just stick your hand up, ask a question, put something in the chat. If not, we can move on to the next section. I'm just going to have a sip of coffee while I wait. And check this code. Nothing going on in there. Right. So let's go to the get data from the backend into the front end section. So back in the code in now. So let's move this back over here. I've got my dev server running. Yep. And I don't need this tailwind config open anymore. And I don't need the HTML file open anymore. So index.svelte is where I'm going to do the initial. Oh, my God, look at that playground. Oh, boy. Graph CMS isn't fast for my part. So I'm going to do the initial fetching of the data in this svelte.index file. So if I pop out the explorer here, this is in source routes, index.svelte. Ah, sorry, layout file. We didn't cover that. So the layout file here, I should have covered this when we went through the tailwind configuration. This is importing this tailwind. This is what we can add in like additional utility classes for tailwind. And I guess import it into here. Into the layout here. And you might see this slot as well and be wondering what this is. A slot is like children in React. So if you don't know what children in React is, it's basically anything which is passed into that slot, anything which is around it will wrap it. So at the moment, this is like the whole project. So if I get rid of slot here, you notice that the terminal output updated and there's now no project here. So slots are very handy for wrapping like other components and stuff like that. So let's bring that back. So with the GraphCMS, we need to do one more thing before we move on from here. Let's go to project settings. And you may have noticed on the dashboard, if you click up here, make your API accessible was already checked. That is with, where is it? API access. And it's this option here, public content API. So if you're creating your own schema, you can click on create permission. Sorry, there'll be a big button in here. And you can just initialize it with the defaults, which is what these permissions are in here. So concern ourselves with that really at the moment. All we're looking for really here is the content API. That's the GraphQL endpoint, which our front end project is going to call out to, to get the data back from. Okay. Right. And to get that, the API, sorry, that endpoint, what I could do is just call out directly to it. And then like hard coding the API endpoint into my GraphQL client, which is going to be GraphQL request. I'll come on to that in a second. Excuse me. Just sucking my sweet because my voice is really croaky. I can hear it. Right. So if you click on this, and let's just expand this out here, you can see that it's a GraphQL Explorer, and this is the public facing data. So if I go over to my Explorer here, and let's just go for all posts, let's just copy that, copy past it in here, and then run that. You'll also get the four posts. So this is just the publicly available information. Say if there were some content on here, which I don't want to be exposed, then can you save it as a draft? Just trying to do this as quickly as possible. Why can't I pick that? There we go. Okay. Right. I'll just hit save and run this again. Yeah.

I still just get the entries here, but if I publish this, publish, content will be published to the publish stage. Then I go back over to here and hit run. You can see it's down here, but that's a terrible post. I'm not going to have that in here. So I'm just going to go back to content model and delete that. Right.

So I need to use this endpoint with a GraphQL client. So I'm going to install GraphQL request and the JavaScript GraphQL implementation which I can do by stopping my dev server, control C and paste those in here. So we've got installed dev, GraphQL request and GraphQL. Let's get those installed. And I want to use the, rather than have my endpoint hard-coded, I'm going to use an environment variable. And I can do that with Vite with the import, imports.meta.env notation, which is this. And I'm going to want to give it a variable name, which is, no, I didn't copy paste it, which is Vite.graphql.API. So what we're going to do is in the terminal, now those are installed. I'm going to create a.env file, which is.env. And then you'll see that appeared here. In here, I'm going to put in my GraphQL API and I'm going to paste in the endpoint, I can believe is that. Let's just go get it again. Just to be certain, in API access, copy that and paste it in there. So now my endpoint is in a environment variable, which I can access. So how do I access that? Because it's on the server side, I'm going to want to run some code before the page loads. You can do that in SvelteKit with something called a context module. Now, this just runs a bit of code for you before the page loads. So in the case of what we want to do here, we want to run the load function. So each page in SvelteKit will give you a load function, which means that you can run code before the page loads. Let's try not to label the point anymore on that. So I'll use ES6 syntax, so export const. You can do this as export function, but I'm going to use this syntax here. And this is asynchronous. And this is a function. Okay, so in this, I've got Copilot enabled. So I'm not sure if we can actually see what it's suggesting up here. I mean, it's, no, we're not going to use that. Out of the way, Copilot. What we're going to do is create a new client. And it's going to be a new GraphQL client. Right, I'm going to delete all of that. And let's disable Copilot because it's annoying. Oh, reload, right, sorry, everyone. Right. So I want to import GraphQL client, and why isn't my import working? Okay, got to do it like a caveman and say import. I'm just going to put in curly braces here and say from GraphQL request here. And if I go back into the curly braces here, I can pick out the GraphQL client. So client is going to use the import.meta.end for the variable, which I've got already. This, that, then here. So that's the endpoint. So I've got a new client now, which I can pass a query to. So do that in here. So I'm going to need to define a query. I'm exporting it, sorry. It's going to be a query, which is going to use the pql tag. And you can see I can auto import this from GraphQL request. And this takes template literal backticks here. And in here, I can paste in my first query for all the posts, which is this one. So that's that in there. And if I hit save, it's auto formatted for me. So this file's getting a bit big already. We'll come on to cleaning this up soon. Each load function in SvelteKit needs to return an object, even if it's just an empty one for now. I'm going to want to get some data back from the endpoint with the client. So that could be data, and this is going to await the client. And I'm going to request and then pass in that query. So if we go back to the GraphQL Explorer here, you can see that it's going to return data, then posts. So rather than just get out the data, I can actually destructure posts out here and then return posts as props. And they're being returned from the load function. So now for page loads, we've got these posts, but how do I use them in the project here? Sorry, in the page. I'm going to do that by accepting a prop, which is export let, and I say posts. You'll see that this is complaining, component as unused export property posts. So I'm going to use a little snippet I've got, which is a pre-JSON tag in posts in here. You'll see that it's still complaining because it's a type warning. So rather than go through the definitions for it, I'm going to put in this type for any. Is the air conditioning too loud for everyone? I can turn it off if need be. It's making a noise here. So anyway, getting our posts now. So if I rearrange these again and go over to localhost 3000 and start the dev server, we should get the object back, which is the same as, oh my God, it's just the same as what we've got from our query over on GraphCMS. Cool. So we can start working through this now and scaffolding out. Sorry, that is the door. Just bear with me one second. Okay. So what are we going to do now? So I lost my train of thought. Now I've had to get the door. I do apologize, everyone. Okay, so this GraphQL client. So setting up this GraphQL client each time, what I can do is just refactor this out into its own file, just so we're not having to repeat this information in other pages where we're going to want to use it. I'm just going to make a, I'll put in the bash commands into the documentation. So if you sort of copy that, paste it into the terminal, you can do that. I'm just going to go into the source here. I'm going to say new file. So a little tip, if you didn't know about this, I can create, in the source folder here, if I say lib forward slash, I want to use GraphQL as the folder name, and then I want to have a GraphQL client JS file.

So hit enter there. It's going to create a lib folder and the GraphQL folder for me at the same time as that file. So what I want for this file, let's close that, is basically to export this client here. What else do I need? Oh, I need to, pardon me. GraphQL client, I need to export it. So now I can use client throughout projects. I also want the endpoint. So I mean, I could just keep it like this or define it as the GraphQL endpoint. And then use this for here. Oh, over in my index.svelte file here. I don't need this line here. Get rid of that. And then the client, I'm getting a link warning here. I can also import it from source.lib.graphql. So you'll notice that there's an issue with that. That's because I need to add in some path aliases to the config file here. So that goes into the key object. What I'm going to do is just copy paste this in aliases and add them in here like this. I'm going to have an alias for components and an alias for lib. I'm going to stop the dev server and start it again. Then back over on my index page here. I'm going to remove that and import it again. This time it should be with the alias and no linked issues. So save that. And can I find GraphQL client? So sometimes it's just because I have the auto save on. It's going to be hung up. So I hit refresh there. I don't know why it's not finished resolving. But that's that.

So let's take a look at a svelte-each block now. So with the posts here, this is an array or an array-like object. I'll be able to iterate through each one of these posts and print them out onto the page. So let's do that now. With svelte-each. So these are coming from the svelte snippets extension I mentioned earlier. So the notation is you have your curly braces, which is to interpolate some JavaScript. And then you have your array-like item, which you'll map it over, and then the item from that array. So in this case, this is going to be posts. And each item in here is going to be a post. Then on here, I should just be able to pre-JSON post and get out the individual posts. But why is my page not stopped reloading here? I'm just going to restart the dev server. Okay. So you probably can't see it on the screen here, but each one of these are now their individual posts. So rather than putting the... Let's just get the post.title out. Curly boys. And then put this into a p tag. Let's move that up there. So we've got each post title here of our four posts. Great. So how are we doing for time? We've got an hour and 25 left. I'm just going to start copy-pasting code. I will put it in there, talk through it, and if you have any issues, just speak up or put a message into the chat, and I'll try to help out. So we're going to want to have a section for each one of these posts. What? Copy-paste a fail. Right. Let's copy that. Put that in here. Save. And now I've got a post with an image and a title here, and this is a link as well. Let's just go back to the code here. So each section has got an image, and then after the image, everything underneath that, I'm wrapping it in an a tag. Forward slash posts is a root which doesn't exist yet. And then the post.slug is what we're getting from our API here. And then that will help us with routing later on. Let's go back to the code. I'm just going to check on the Zoom chat. Everything fine. Oh, Dennis, I'm glad you're enjoying the workshop. Anyone else have any issues? I'm hoping the documentation is helping out a lot. It's helping me. Okay. So what else we can do in here? We're going to come on to styling this and make it look a bit less bare bones than it is at the moment. What else we can do is the Svelte. So you can see each post has a tag, and it's somehow more than one tag. So with that, we can use an if condition and then use another each inside it. So wherever I put this, put it after the post title. And then it's over here to format it nicely. So if there are post tags, which is just a Boolean, if there isn't any, then it's just going to skip over this. Otherwise, we're going to say for each post tag, there's tag, and then we're going to put each one of those tags into a span. So I didn't have the page scrolled up. So it's just, yeah, so you see we've got SEO now, union types, on the channel, and GraphQL and schema. Okay. On to the next section. So we haven't covered components yet. We're going to do it now. We're going to cover quite a lot. So we're going to start making some Svelte components now. Right. So if you didn't catch the slides earlier, that's what we're going to be doing. We're going to be creating a couple of components. So first up, this component here, although it's inside a loop here. So if I wanted to have a forward slash posts page and have that as the index, but also have a couple of posts on the index on the landing page here, which is what we're going to do. I don't want to have this code repeated. I just want it in one place. So if I copy that and make a components folder in my lib file here. And maybe it's if I could. For components. And then in here, this is going to be what I called it. That's the documentation. Post, postcard, postcard. Yeah. So one thing I'll mention is my naming convention. This is a preface for me. You can use the same naming conventions as you would use in React. So you could use capital P, capital C. For various reasons for me in the past, I stick with this naming convention just for issues with Git and stuff like that. But the naming convention, which I think is preferred, is capital P, capital C for components. So I'm just letting you know now that I don't want my bad habits to become your bad habits. Okay. So let's close this side panel here. And let's take this card over here. So I want this whole section here to be a component. So I'm just going to cut that and paste it in here. And you'll notice that Lintz is complaining straight away because post doesn't exist. So I need to have a prop for this, which is posts. Sorry, post. My bad. And then also again, the Lintz is complaining because he's trying to type check it.

But we're not going to deal with that. Okay. So I've got this post here. I can import it, the component. And it's in plain. So I'm just going to say that. Again, postcard auto import from components. So I'm doing, sorry, control space there to bring up the IntelliSense. And you'll notice it's brought up here. But it's complaining because it's not assignable to. I think that's because it's expecting a post. So what I mentioned earlier is I could say post and put in the post variable here. But if I hit save, you'll notice that VS Code has just removed the post equals there because the nice thing which Svok does, this like syntactic sugar, if the variable is the same as the expected prop, then it was just going to wrap it in some curly braces. So now, and you'll also notice that the postcard got moved up here. And I think that's just a Svok prettier thing. So now if I go back on over to localhost. And make this a bit bigger. We can see that we still got the same result, which is what is expected. OK, so I think what we can do now is now we've imported that. Take a look at the styles for the layout for the project. So at the moment, this looks terrible. What we're going to do is in the layout file here, we're going to wrap this slot in a main tag. We're going to put in a, this is a Tailwind container. We're going to say the max width is 3xl. We're going to put margin auto and we're going to put a bit of padding on it as well. So looks a bit better now.

I want to add in some, this is a mixture of Daisy UI classes now and Tailwind classes. So what did I just do there? Copy that. I'm going to go back on over to the postcard here. Just paste this in. And if we take a look at the card class here from Daisy UI, and I put in some hover styles, but I don't know the way this looks. So feel free to remove that. The hover style here, let's just go back on over to this file. Let's put it over here now and hit save here. We've got a group hover on the badge and the P tag here just so it will change color, but you can take this off. It's also got a transition on it. Feel free to do what you like with it. Sorry to bump the microphone. But let's just go through exactly what's in this class, in this component now. So I've added in the Daisy UI cards class. So this just gives us some nice default styles for that. Use the background base, which is the Daisy UI background color variant again, which is, what's it? What's this? 2W background opacity. It's doing it via this number amount here. So I think this goes up to 300. Yeah. And as it's changed, changed color in line with the base color, which I believe is this white color here. Put a shadow on it, a bit of a margin, and we're using the group for the group hover on this span for the tag and then the P tag. And these are all wrapped up in an anchor tag, which I have moved to wrap everything in that card. So when we hover over this, we'll get this hover effect. If I click on it, I've just got a 404 because the root, which is hosts, technical SEO, graphs, CMS doesn't exist yet. So I've just got this called. Christina. Oh, hi. OK. OK, so. Totally sidetracked now. Right. More components. That's what we're going to need. So we took a look at Daisy UI earlier in the components here. Control K. And there's several navbars to choose from. I'm going to pick this one here. So. For what kind of documentation is just an adaptation of that of this here. You can pick out any of these ones you like and start using them. But for what we're doing, we just want a simple nav. So with this here. I want to put in the components over here. A. Nav. So. And I'm just going to paste this in. Because we've got an hour and 10 minutes. So. OK. Daisy, why classes for most of this. And it's got a pretty nice nation to it, too. And I don't like how. Does this formatting. Just have a closing. There we go. Cool. So I've got a navbar now. And at the moment. It's pointing to an about page, which doesn't exist. That's also make one for posts. And. It doesn't exist. So we only need to create that in a bit. So that was there. And it's persisted across all of the different routes, which is only one at the moment. But we're going to make the F1 shortly. And the way to persist anything across. A project in socket is to use the layout file. So here you can import the nav. You can see the intelligence is helping me out here. Close that. And we've got a nap here. So really simple. And I've got two about. So second one is posts. Cool. Well, we want to create. So sorry. Just finishing my sweet. Okay. So. In our index file here. It's going to close. Everything just open up the index. File on the roots. I don't need this anymore. So. This pre pre taken and just dump out the variable, which you're like. Having this props on the page is quite way to debug.

You know, any data coming to the page. It's going to give me that. But these this introduction either. So we've just got our four posts on an index page. Right. So also on our index page. You'll notice that this query. Takes up a lot of information on the page, like a lot of vertical real estate. So. What I do is like I did with the client. It's going to abstract out into its own file. So. I'm going to. What's this project called building this Falcon graph. It's going to open up a new. Slides. Right. We're going to start pasting in the bash commands. I've put onto the documentation here. So this is going to create a graph. Your queries. File in this graph your file here. Let's go paste it in there. And then in the graph your queries here. Pretty much want. The. Queries I've got on. On here. So there's this all posts query. So. I want to. Copy that for now. And I want to export this. From here. And it's going to be. All posts. And this is going to use the. The. I'm going to import that from graph your request. And then just paste it in there. So now I can export. Posts. And have a bit more space. On this index page here. So query is doesn't exist anymore. So get. It all posts. Did I call it. Yep. All posts. And you see that it's also here. It's safe. I got rid of GQL tags that use it anymore. So. Freedom a bit of space now in this load function. And. I post you still load here. Which it does quite. Okay. So I'm also going to want to have. The query for. A single post to. So. What could do is just copy this from the documentation. And. Actually. That's. Excuse me. It's going to be flicking between windows quickly. So all posts and post here. Copy this. And. We want that back over there. That for you. And it pastes this in here. Get post. Oops. That's. GQL. But here. I'm just going to zoom out. Zero for now. So notice that's the all posts query and the post query. They've got repeated information title. Date. And tags. And cover image as well. I believe. Yep.

So. With GQL, you can use a fragment. Which means that you can reuse that piece of. Graphical in other queries. So. I'm going to do that now. But rather than you watch me type it out. It's going to copy paste it in. So. This post fragment. We're going to take the title. The day. The tags. And the cover image, which we just went over. And then. We're going to use them as a fragment. In our graph. Well query. So because we did this in JavaScript. We've got to put it into like. Template literals and then use a. What are these query things called? This is so you can pass a query into a template string literal. So we're passing it in here. We're doing that for both. Both the. Get all posts. And just get a single post query. That just needs to be get post. We know it's a query. And yeah, sorry. We're spreading those in to each one here. So hit save. There should be spaces. After that, I believe. Anyway. I'm just going to roll that for now. So get all posts seems fine. Yep. Okay. So. We put in. The ones for. Posts and page. Posts and post. I'm also going to put them in for the pages here. And we have time. We've got an hour. I think we can finish it all. So hopefully we'll have something nice to take away with us. So this is. Pages and page. Which we went over in the. API playground for graph CMS. Let's go back over to localhost. Come to these shortly when we do routing. Just take a second to gather where I am. And bump up this font size. Right. So a graph to our queries. I think we're done with those. We don't need to worry about them anymore. We'll soon find out if there's any issues with that.

Okay. So. Penultimate section now file based routing and endpoints in Skelton. So. You can utilize HTTP methods. In Skelton endpoints. So that means any HTTP methods. Like get put. Delete. Patch. They can all be used in a. JS or TS file. In a Skelton project. One thing to note with delete. It's a reserved word in JavaScript. So it's DL. I think. It's a bit of a shame if you're going to make. HTTP method. In an endpoint for that. Anyway. I digress.

So let's make our first. Endpoint. So over in my roots folder here. Let's close the components there. And the graph QL. If you've been committing to get. As you've been going along. Congratulations. I'm sorry. I haven't been. So it looks a bit messy at the moment. Do apologize. Let's just. We just did that now. It's conventional commits. So I can just. Go through this quickly. Okay. Yeah. Graphical data. From endpoint. Refactor. Client. Into. With. Queries. I'm not going to publish this. I'm hoping that the documentation I provided for this. Is going to give you everything you need to go through this in your own time. I spent quite a bit of time just making sure. Everything in there. Casper you're asking shouldn't it be inside lib or next to it. What are you talking about. Okay. Already solved it. Brilliant. Okay. So. Where was I. We're going to start talking about endpoints now. So. Like I said you can have HTTP method. In a route. So it has to be inside the. Roots folder here. So if I want to make one for the index file here. I could do. Index.js. And then put in a get method into that. What I want to have is like a forward slash posts route. Which if we close this side panel briefly. Actually let's open up the postcard. You can see I've got forward slash posts here. And in the post slug. I'm going to have it post slug. So. I'm going to create. A post directory. And. A index file for that. So posts. And then this is going to be. Index.json.js. It doesn't have to be. Json file. But this means that you don't have to. State that the content type of the return. Is is Json because it's denoted in the file extension here.

So I've just got a discord message. I'm not sure if I need to tend to it. Oh. No. I do apologize. Right. Right. So let's just do this quickly. So. I'm just going to copy past the code here and talk through it. So. Import our Gothiel client. We're going to import our. All queries. Sorry. All posts query. Now we're going to create our. Get HTTP. Get HTTP. And we're going to do that. We're going to import our. Gothiel client. We're going to import our. Posts query. We're going to create our. Get HTTP method. Which is asynchronous. And then we're going to try to get the posts from the client request. And passed in your posts query. If we get a valid response, then we're going to get 200. I'm going to return the posts. So the reason why I'm doing it as a dot Json file here. Is so I can go posts. Jason. And have it returned as a Json object here. Which is quite handy for when you're just trying to. When you're sort of building out an endpoint and you're trying to fill around. You know where information is coming from. It's a good way to visualize it. So that's the only reason why I did it as a dot Json file. I think now. If I say posts. It's going to get a 404. But if I change this from. Jason to.js. It does the same thing. So I'm not sure if that notation is needed anymore. Because it's returned exactly the same thing. So. What I will say is that if you want to have. Let's say a sitemap. It's a good example of this. And you want to build like an XML sitemap. You can put in an endpoint. And you can manually build up your XML file. With JavaScript. But the endpoint will be returned as like an XML format. So it's still. It's still a good reason to use that. But in this case, we've just got the post endpoint here. Okay. Moving on. So. Let's take a look at shadowing. Let's just go to the documentation for this actually. So shadowing points mean that we can. That we can skip a lot of the boilerplate code you get when accessing an endpoint. So in here. Let me just move this over a sec. You see that we're using fetch. Which has been. It's part of the context in a. So you can destructure out the browser fetch. Sorry. The. Fetch. Which I believe is just the same as browser fetch. But it's used. So aside here. And then we're going to fetch from the post endpoint. And this is pretty much the same as what we've done in the endpoint here. So. All of this goes away with the shadow endpoint method. You just. Have the prop coming in. And you can access it that way. So. With that. Janky explanation out the way. Let's move this again.

And. Let's. I've already renamed this to JS. So I just want in posts now. A. Index dot. Svelte file. And. And. And. This should have updated. Okay. So now it's rendering out the. The Svelte file. And in the Svelte file. I can import the car. Just close that cycle. So in. It takes here. Oh boy. And. I have the posts. Which is being returned from this endpoint here. Coming in as a prop. And I'm going to need to do the type. This is a type any. About that. Right. We get the same as before. So. What I should do is in the post here. It's doing each. So each. And each. Posts as post. Use the postcard. Yeah. Post. Self closing tech. So. Pretty much the same information now across two routes. So we've got post through here. And then we've got. Not post Jason Scott, the index file. These are the same now. So what we're going to do on the index page. Is. We're going to have the first two posts in the blog. And then we're going to have a bit of landing text as well. So for the graph query. In graph CMS here. For all posts. I'm going to pass in a limit. Which is a dollar sign. To denote it's a variable. And this is going to be an integer. And in this case, it's not required. So I don't need the exclamation mark. And on posts. Oh. We didn't cover was. The ordering of the posts. They don't play order. So I'm just going to quickly put this in here. Order by. And I want to take this ending. That one. And then I'm also going to have the first. Which is takes in a number. And it's going to be the limit. Limit. So this should now take in a limit variable. And if I just say one. And then close that curly boy. Unknown argument first. Oh. Fist. That's the amount you want in there. So it's one post. And we'll have this as two. And again, we should get. That's two posts. Which we do. Brilliant. So let's copy that. And put that into our code. To the GraphQL queries section. Which is all posts. So I just really need to replace this bit here, actually. Let's put that in there.

Hit save. And now on my index page. Source, roots, index. In here. I can pass in. Some variables to get all posts. Which is going to be the limit. So I'm just putting some curly boys here. And. Limit. I'm going to say two. And. Local host. Undefined. Maybe I need to restart the dev server. Or start panicking. Because it's not working. All right. I didn't pass in the query. The variable. Into here. Which just became apparent to me as the dev service finished. So I need to pass in the variable. Because at the moment there's nothing being passed into it. There. Stop complaining. Right. Let's try to back this. Expected. But found name. Not 13. Right. So. Oh, I didn't put in. Ending curly boy. Starting curly boy. Right. I do apologize. Right. That's what happens when you do copypasta development. Right. So on our landing page now. We've just got two posts. But. We want a bit more descriptive information. So. Just going to. YOLO. Copypasta some of this information. From. The next page here. So we're going to have a bit of detail here. And. You'll notice that these don't have any styles applied to them. But you'll notice that I'm using the tailwind pros class here. So that's just done all the formatting for us on that. That's why I installed it. Basically decided I have to mess about with. Setting tailwind classes for. You know, a lot of copy. Not that you should because we could possibly just get most of this from. The CMS. But because we're just working with a predefined template. I thought we'd have a bit more information on here. So. Less of me rambling. More of me talking about. Spell kit prefetch. So in that example. Which is in the workshop material. There's also this a herafe. Which is just linking off to the. Posts. You probably can't see it. In here, but we've got. Posts, which is, which is what it's linking to. And this felt good prefetch. This will call the load function. Of the end point. So that page. So for post here. Let's pop out the Explorer. Posts has an index page. But it doesn't have a load. But it has got this end point. Which is essentially. A gap. So I haven't tested this. But this should. Go off and get the information from that end point.

And load it up for us. So what we're going to do is pop out the dev tools here. And. This font size over here. Over to the network. I'm not saying it here is right. Okay. And from. The index page. I'm going to hard refresh. Control shift. R. And clear. All of the information there. I'm going to hover over this link. And you see that it's gone off and got data. Jason. All of the posts. So. It's preloaded. All this information for us. So now if we click on a link. On this. You should just load up instantly. So. One of the really good features of. It's also featuring. Next.js and gets me. And I think next as well. So it's a cool feature. And when you integrate stuff like this. With other clients. The graph core request. It's really basic package. And I think it fits well with the sort of length of workshop. We've got 45 minutes left by the way. Is that. You know if you if you use the prefetch with a client like. Kik you well. Which is specifically designed for Svelte kit. All this. All this. It's almost instantaneous when you sort of. Navigate between page routes. Anyway. Less of me gushing about that feature. Let's crack on with. Adding some adding some roots. So. An individual post at the moment. Click on here. We get a 404 page. So. We want to have an end point. For this. So. Over in the Explorer here. We're going to post. We've got index at the moment. I'm going to use. The slug. Slug. So. Notation here. And. But I have a. Context module here. And this is going to be a. Load function. How do I do a load function. Like that. This is the. Right here. A. Page has a. Has. Has context passed to it. This is why I use that spell check. Come. Come. Come. Come. Come. Come. Come. Come. Come. Jay's. Context.

Context. But. As is context. Pass into it. So. Let's try not to. Leave it anymore. Let's just look at the contents. Of context. And remember. Each load function. Is to return an object. So this is going to. Complain if I don't have an. Empty object here.

Just to explain what's going on here. I'm going to have the console open. And then navigate to all these routes there. And. Oh, that's a nice error message. I'm hoping that. Your hash is inaccessible from load. Let's go back to where we were. This is usually CTX. Trying to get out the contents of context so I can talk about it. Yes. Where's that doc type? Right. Where are we going with this Scott? Come on, mate. This is. Where am I going with this? Just trying to. I said. I just realized I haven't used any JS documentation here. But. It's complaining here. Right. I want to go to this room. Refresh. I'm just trying to get out the contents of context. So we can see what's in there. Right. Just bear with me a second. Everyone will try to work out what I'm doing here. You know what we're going to do? Just take. Just take that. And there. So I'm not sure if I can. CTX. Return. I'm going to see what is in. CTX here. So if I go to. That now. All right. I did want to just go through. All the stuff we've got with context here. But I can't say. What I'm going to do instead. Is. You've got the individual post route. And the square bracket notation. Is. You haven't seen it before. It can be quite confusing. I remember when I first saw it in both next year. And I think Gatsby do as well. Is that it's just in between those square brackets. It's like a virtual file name. Or virtual path. So the slug. Which is in. Let's just go back to. Is it just totally stop working now. Right. So yeah. So. Rather than have a. Like a file for connecting multiple platforms. And then another file for. You know graph your scheme stitching. It's just a dynamic way to generate those files. They're all going to be the same. They're all going to be the same. Yeah. Make up of a file. So. That's just the way to dynamically generate those. Endpoints. I am. I've just listened to myself talk and it sounds a bit.

I've just listened to myself talk and it sounds a bit confusing. Does it make sense on dynamic endpoints? Sorry, dynamic file routes. It's the same sort of concept with Next and Gatsby file routine as well. I think I've got sidetracked a bit. Let me just go back to documentation where we were with that.

So, I think I've gone over the shadow endpoints already. I can do the same again, just do another get, use the client, and get the same information. Pretty much the same information as what I've got in this get. But I also want to get the slug. So in my posts here, I'm going to create a new plug-in point. It's going to be a JS file. In here, it's going to be pretty much the same as the index file. Let's close this side panel. It's in here. And let's just talk through this. So bring in the request here and we're just destructuring out slug from the request.params. That slug is what I'm using to pass into the post query, which is expecting a variable. So this is like superfluous. I could just pass in the slug here like this, which is fine. So with that being said, now if I click on one of these, I should get to the endpoint. I don't. So what are we sitting here? This should be slug.js. That should be fine. Get post query doesn't like about this. Oh, just get post. This has turned out to be fun. Okay, so this should be giving me the endpoint information. So is it because this is here? It is. Right. So, in sorry, everyone. I'll go through and explain exactly what's going on. Let's go back to here. Right. Okay. I was. Let's just go back to the Explorer and let's just delete this for now. Right. And let's. So I click on this, I want to get the input information like we did in the earlier section. So this should just give me. There we go. Right. So it's the from our endpoint. So now passing that slug into the Svelte file should give us the same result.

With that being said. Now, if I click on one of these. I should get to the end point. I don't. So what are we sitting here? This should be. Slug.js. That should be fine. Get post query. Doesn't like about this. Oh. Just get post. This has turned out to be. Fun. Okay, so this should be giving me. The end point information. So is it because. Because this is here. It is. Right. So. In. Sorry, everyone. I'll go through and explain exactly what's going on. This is go back to here. Right. Okay. I was. Let's just go back to the Explorer. And let's just delete this for now. Right. And let's. So I click on this. I want to get the input information like we did in the earlier section. So this should just give me. There we go. Right. So. It's the. From. From our end point. So. Now. Passing that slug into. The. This felt file. Should give us the same result.

So. Before. Slug itself. And. Copy past today in here and explain what's going on. So. It's having. A. Post variable as a prop. And of the structuring. All of the things. Out of that post variable. I'm using the. Sorry, this felt. Head API here. Just passing in the title. And then. Let's just put this as. A. Creation. So. When I'm ever going to all these. Yeah. That's the time that. Just taking out the cover image. Which is here. Using. You know, someone using the. Tell when. Pros stars on. H1. I could just wrap it all in. A div and then add the pros class to it and pros Excel. But. It doesn't look great. So I've just taken out. Some bits here just to have some nice form in around the. The instructor. The. The author's avatar and stuff like that. You'll notice as well. I close this side panel here. This text is. Truncated. It's not the full width. And that is a. Tell wind. Typography plugin. Constraint. So. This is in the documentation. To tell when config. And. For the topography before CSS. Max width. It's set to 60 characters or something. Just taking it off here. Back on over to localhost. And. And you don't need refresh button. Yeah, we've got the full width on this now. Anyway, back to that file. Let's close that. So this slug that's felt. So we're wrapping up our. Date file, which is saying data string here. JavaScript one. JavaScript method. We're doing a nice. If expression here for the tags. If there's any tags, we're just going to render out a. Badge class from Daisy. Why? One thing I didn't cover was this. HTML. HTML. This will. Let's just take this off. For now. I go back to the post. You know, something. Is. Has HTML tags in it. So HTML just helps. Format and. Show us the correct. Formatting money for it. So with this, there is a warning, which is make sure that you trust the. The source of the HTML. Because it can be. You can do bad things with it.

But we do because we know that it's what we're putting on our. In our CMS. Okay. So. Firebase routing. We've pretty much covered that. So there is one thing. To note in the documentation provided. The API for Firebase routing could be changing. There is a discussion which was created by Rich Harris. Which basically means that if we have. Like say in our roots here we had a an about file. We do have an about endpoint. But let's just human me for now is to say about. Without caps locks on. And we go over to. About on. About. It's an empty page. So. But this is the about page. So. With the discussion and the suggestion in there. What was suggested is that anything which doesn't have. Basically. Everything needs to have its own file. So this would be. The file. And then the file. And then the file. And then the file. And then the file. And then the file. And then the file. And then the file. So. Everything needs to have its own file. So this would be about. And it would be. Index. And this would go away. And then it would be like. New Apple page. So it would be like this. So that's just one thing to know. So I just thought quickly. Go over that.

Okay. Where are we? So. We've got half an hour. And we are very close to the end. Just let me check. The chat. Hey, chat. How you doing? Ah, Juan. Great. Glad you liked the workshop. And goodbye. Thank you for all your questions. And thank you all so much for hanging out with me for so long. It's been long. And I've been talking nonstop. So I do apologize. I've got a super sore throat. I'm just going to crack open a sweet. So if you hear clattering or me coughing, it's because I'm trying to soothe my sore throat. Okay. Any questions? Anyone before we go on to the last couple of bits? So what we're going to do in the last section here, if you're following through with the documentation, we're going to talk about the Svelte error page. We're going to talk about using the Daisy UI themes to switch through the themes. And then last of all, we're going to do dynamic nav bar. So you'd see earlier on where we had in GraphCMS, we had the page, the pages query. We just had like one page. So if we were to go into our content page model here, and then let's just say we will have. So you'll notice as well is that in here, this slide has to be entered manually. It's not the case anymore. I believe I can change that. So if I go to the page here, I say edit field and changes from a single line text, which is what it is at the moment, changes to a slug. This should be generate slug from the template. And I just want this to be. What do I want this to be? Just the title, right? Yeah, title. Then it hits update. And if I go back to the content now. And. Oops. Leave me alone. Right. Yeah, I want to leave the page. Thank you. Right. Go create a new entry.

And I'll put in the title now. What's another typical page you get on our website about FAQ. You can see which we generate here. That should be lowercase. So. Let's go back to the page again. Back to slug. Lowercase. Right, so go back to the content. Go back to the page. Yes, I'll leave that for now. And go to this one. For about, I can say regenerate. It gives me the about slug. And. Publish that. And we'll do an FAQ page. So. Thank you. You can see it's already been entered for here. For you. Right, so if I say save and publish on that. Save and publish. And go back on over to the API. Actually failed, not successful. What? What's happened? Save, publish and close. That should be published. Publish. I don't know what happened there. I should have published that straight away. So if I go back to the pages now, run this. Now two pages. So if you want to have like a dynamic navigation bar, this is a simple way to do it. A more complicated way is to use the new feature of GraphCMS, which would be components. You could have like your own living. Like you could create it with relationships and have all of your slugs and pages in one big model. Anyway, that was a super long tangent. And. Let's go back to. Interesting stuff, which is. Let's take a look at a Svelte error page. So. At the moment, about shouldn't exist anymore because I deleted it, right? Thank you. If I refresh it, I get this for it for. This is kind of OK. What we can do is have. Much like the same. Notation as the layout file, you can also have one for error. So it's a underscore underscore error. This is felt for. You do the same sort of thing as you would do with that file. You know, the error has gone away. That's because. It's bringing some information. So if my mouth says disgusting, I'm just trying to. Stop my voice from croaking up. Or two in three. So before the page loads, we can get the error and the status and the path name, which has been visited on this page. And then it's going to Yolo copy past in the rest of this year. It's going to bring in status and pathway along with the error. Can update the head with the status, which is going to be for a full script. That's where it is. Yeah. For a full title here. I'm going to display your message and then the pathway. So it looks like about doesn't exist. It doesn't maybe go back to the page. Just a nice way to handle 404s. Let's move on to the theme change. This is very important for modern web development. It's having a theme. Over in my terminal. Oh, here we go. Stop the server. And install. Oh, boy. I see here. Theme change. Theme change is just a really simple tool, which just changes the data theme attribute, I believe, for you. It's made by the same person who does Daisy UI. So it's going to install this as a dev dependency. And while it's installing, we'll take a look at how to implement it in the layout file, because you want the theme to wrap the whole project. The layout file does that. So in here, we're doing 20 minutes. Let's go back and run the dev server. Bring this over here. I'm in the layout file. Let's do the homepage. Should have our two posts button to go to the post page. Okay, cool.

Right. In our layout file here. Let's close this up. On mount. So on mount in Svelte basically runs the code after the page is loaded. So I want to on mount. And this is a callback. This is going to want to use the theme change. I'm hoping I get some intellisense on that too. So I'm going to have to import theme change from theme change. Pretty sure I installed it, mate. Okay. You can see it's complaining here. I'll just do a hard refresh on that. That is fine. So now I can start using this project. So to change themes, remember, there are 29 themes we can use. So what we could do is go back over to Desi Y and check out themes here. So what you can do is just restrict what you want to use. In this example, we're going to use them all. We're going to use every one of them. So over in the project here. And I'm just going to close. It's got a ton of files open there. I want a theme switch. And this is a Svelte file. And it's going to be a select HTML element. And basically I'm listing out each one of the themes as a data attribute here as a select option. So when this data choose theme, we have it for each of our themes in here. So this is not a contained div. It is. So I'm going to put this into the nav bar here. So let's have it. What have I got in here? I've got it outside of this unordered list. Select theme switch. Up here it's been imported for us. So if I go back on over to localhost, you can see I've got the theme here. But nothing much is happening. It's because we still have a hard refresh. Now picking a theme, it should change all the themes for us. Halloween's quite a funky one. So you notice that the text update. Let me find Synthwave. Where is it? There it is. Oh, yeah, that's update. Yeah, there's a whole load of like additional styles you can add in to the Tailwind typography plugin. I thought we'd need to go into that, but we don't. Okay, so after we've got our theme installed now, we don't have an about page at the moment. We've got a post page, but no about page. So did I cover that? I didn't cover it. Okay. So for the posts here, sorry, these pages, not posts, this just gives us the flexibility to be able to have, let's say, like content editors, content creators on GraphCMS. So if they want to add in like a new page and we just want to do it dynamically, they could do it via the content model here, add in a new page, and then we could say forward slash X. Or what we could do is, like I mentioned earlier in my sort of semi ramble about it, is get all the pages we've got available to us and then list them out. So let's do that now with, like, by getting, right, so in the navigation here, we can't use a load function inside a Svelte component. So what we need to do is have the information passed in as a prop. So the best place to do that would be in the layout file here. And if you want to get information before the page loads, you want to do it in a context module. So do that in here. What did I just do there? Context. Just do it like that. Right. So, yeah, I want to have a load function. Let's just copy this in here and talk through it. So in this load function, I want to use the client. So let's import that now. And I also want to use get all pages, so import that. And I want to return those pages, but I don't want to return them to the layer here. I want to give them to the nav. Let's put them in there like that. And the pages will need to be exported to here. And I'm going to need to stop JS doc complaining. Just give it the type any. So we see that nav is complaining because it doesn't take pages. So let's go over to here. We're on the Internet at the moment on here. Just got them hard coded in. So let's go use a svelteach to inside of our UL here. We're going to have these hard coded in. Choose the pages and we're going to structure the title and the slug. And we're going to prefetch them again. So it's just going to run the load function on either the about or the FAQ page we had. We're going to put in the title. So save on that. Go back on over to localhost and maybe hit refresh here. What have I done? So I got an error with, what to do with, right, query, I think it was. Okay. About doesn't exist. FAQ, not found. They don't exist yet because we don't have a slug for them.

So we've passed the information to the nav bar. We don't actually have a file for them in the roots folder here. So what we could do is have a slug.svelte file like that. And we could also put that into a folder. So we could have an in here, index.svelte. Whichever way you like. I haven't checked up on that discussion I mentioned earlier. But if it does go the way Rich Harris has mentioned, then this would be the sort of default way to do this sort of thing.

So I've got 10 minutes left. Let's just YOLO paste this in. So, again, using load function, we're taking the params slug here. I'm using the slug to pass into the page query. And then that's going to return us the page. So what I could do is create another shadow endpoint for this. Just going to do this in line for this. But I guess that does lend quite well with the new intended like file structure. If I wanted to put in like a shadow endpoint here, it would just be index.js inside the slug file. So I'm quite leaning towards that idea now. Anyway, so in our slug file here, we've taken in the page as a prop. We're going to display the title in H1 and then the content in HTML. I guess I could also get out the what was it called, the subtitle? Where's the content? What was it called? Yeah, subtitle. Let's see if I can just wrap this in a p tag. So here we go. Oh, undefined. Right. So let's quickly debug this. Pre-json tag here. And that was in the page object. Oh, I'm not querying for a subtitle. So let's quickly go over to the queries. And title, subtitle. So now we should get the FAQ as well here. FAQ. Cool, cool, cool. Okay. So we've covered that too. So one last thing is page transitions. So if you will humor me for just a bit longer, we can take a look at that while I quickly try and explain in the next 10 minutes what is going on.

So let's create a page transition component. And we're creating this because we're going to use the swap transition fade here on the div that is wrapping this slot. And I'm going to say if this key, which was being passed in. Oh, so if the key changes, basically, so it's key is right key expression, key blocks, destroy, recreate the contents when the value of an expression changes. Yeah. So passing in a refresh prop here and it's just going to recreate this each time inside of this block. And we're going to use this page transition on the layout file here. And just go wrap everything in it. Page transition. Close that. But we need something to tell the page transition that the route has changed. So what we're going to need to do is get the URL, which is being passed into, which is not being passed into our load function yet. We want to destructure the URL. So any time the URL changes, we want to use that as the key. And we have the URL path name here. We want to pass that into our page. So this is going to be of type string. And key. It's not used yet. So let's just put the key here. And see what we get when we go to project here. Fine. That should be, yeah, forward slash about. And if you go to, yeah, we got that. So any time that changes, which is when we click it around here, that will trigger the reload of that component in page transition. So we're going to need to pass that into our page transition. This is expecting it to be called refresh. And let's go back to the layout. This is going to be for the key. Let's try changing routes. Oh, that looks terrible. Maybe I shouldn't use the key. Anyway, that is a way, I would say, to try and do that sort of thing. Maybe just don't use fade. Maybe use fly or something instead. Let's try that. Try fly. That looked terrible. Transition. Oh, hang on. Let's fly. Yeah. Maybe don't use that. Let's move that now outside, maybe. That looks terrible. It looks a lot nicer when I was doing it earlier, when I was proofing the notes. Anyway, that's the way I have, you know, used. I've used it quite successfully on other projects. I don't know why it looks terrible on this one. So I do apologize. Maybe just have a play about iteration on that and see how that works. I'm not sure.

Okay. So we've got six people left. Thank you, everyone, for hanging about. Are there any questions just before we wrap up here? Nothing from anyone? Okay. We haven't got time to cover deployment. I'm so sorry. I use Vercel. So if you use Vercel yourself, it's just a case of Vercel and the adapter also, which we looked at in the Svelte.config file. I should just push it all up for you. And then after that, you would need to use the environment variable in there. I feel bad. I feel bad. Let's just go over it quickly. Right. So MPMP and RunDev. So what we can do now, actually, we don't need that now. Let's just go to this. What we can do now is check out the built version of the site. Where was that? Yeah. I'm still going to update because the dev server is not running. So I'm going to build this project. I'll just kill it, actually. I'm going to run PMP and run build and then run the preview, which comes with SvelteKit as well. So now once this is finished building, we should have this on Locos 3000. And this is our built site. So everything works as expected here. Yep. Cool. So to get this onto Vercel, we use, let's go to Vercel CLI. We can globally install the Vercel CLI. MPM install global-g to install globally. Which is why I've got it installed here. So we do dash dash dash V. So within the project, I can just say VC here. And this will ask me to set up and deploy the site. So let's do that. I'll use it under my own account. Things for existing project know. What is your project name? Call it that. So I'll just say which directory is the project located. It's in the root. And I'll wait for it to set up this. And it looks like it's going to upload it. So if I go over to my Vercel page, to my dashboard, we can see that it's not uploading yet. It should be. It's stuck. It's taking a lot longer than expected. I don't know why it's taking so long, to be honest. It shouldn't. It should be quite fast. Maybe it's because I'm on a Zoom call. And it doesn't usually take this long. And it's saying it's only taking five seconds, which is not right. I was just about to kill it. I'm going to check my internet, actually. Yeah. I think it's my internet connection. So can everyone still hear me on the call? Who's here still? Okay. I'm going to kill that. I'll try again. So I'm just going to go through all the defaults again. All right. Did it that time. So it's going to ask me for a default setting. It's going to say no. Right. So you'll see here, this is, it's linked to the project here. It's created a file in here, a Vercel folder. And this is just the project information. That shouldn't be exposed, which I just have done. And so I'm going to have to delete this project after this workshop is finished. But that's how Vercel sort of keeps it in track with the current project you're working on. You'll notice again in the gitignore file, it's basically ignoring that Vercel folder. Anyway, if I click on this inspect, it will take me to that page on Vercel for this project. And I'll have the deployments. And it's basically that project we just looked at there. Took 29 seconds to deploy. I can go visit it. And here it is over on Vercel app. And I should have the same, oh, there you go, the same functionality. I should be able to navigate around all of the pages. And that transition looks better. I'm not sure. Yeah. That should not be. Oh, yeah, because it's empty. So I need to do a conditional render on that because on the about page, there wasn't any sub title. Okay. So there you go. One last thing to note before I leave you is that this works.

This project all works. But the way it was deployed, it deployed the environment variable as well. If you connect this to a GitHub repository, like in the overview here, and you say connect git repository, what it will take from git won't have the.env file because it's not committed to git. So in the settings, you need to go to environment variables and then put in the environment variable name, which is this. Put that in there and then put in the value as the URL, which we looked at earlier. Add that. And then any time it builds from the source control provider, which would be what we've got as options, GitHub, GitLab or Bitbucket, it will use the environment variable when it builds it.