Jamstack Explorers

Building with SvelteKit and GraphCMS with Scott Spence

SvelteKit pages and head api

Okey dokey, in this mission, we are going to take a look at creating pages with SvelteKit. SvelteKit uses a file system based router. This means that the structure of your project is defined by the structure of your codebase. Specifically, in the source routes folder here. There are two types of routes, pages and endpoints. For this mission, we'll be looking specifically at pages, we will go into endpoints in a later mission pages generate the HTML, CSS and JavaScript needed for the page. By default, pages are ended on both the client and the server. But though this behaviour is configurable, and we will be looking at this later, let's go in and create an about page now.

And for this, I'm just gonna have a h1 about and a p tag. Save that. And if I hop on over to my terminal, and do NPM, run dev to start the dev server I will be passing the parameters to specify the port. Again, just for reference, if you do open and dash dash, port, I'm gonna be using ports 3333. Again, these can be shortened. In the case of open, it can just be dash o and for port. Dash p, I'm not going to open up a new browser, tab boats, I'm just gonna go Port 3333 and hit enter. Now I'm going to go over to the browser now. Come out of full-screen mode. And in the URL bar, just go to about that's the new page routes created for us.

Let's go back on over to the text editor in VS code. Now I'm going to create a basic header component, which will allow us to navigate between the about page and the homepage. I'm going to create that in the source lib folder, which doesn't exist yet. If we go down to the J s config here, we can see that the lib path has been aliased for us. So this means anything I create in the source folder here under lib, so could be lib for slash components, it will be aliased just to lib for us.

So in here, we're going to create a new file and call it lib forward slash header Svelte and you'll notice the folder was created. At the same time, as I made the header component here. In our header I'm gonna use a header tag, gonna have a nav with an unordered list, I'm going to have a list item for each link. Now just be an a tag, add my href. I'm going to copy this. Copy this for the about page.

Save that so now I'll be able to import this header component into either of my pages here. But rather than copying and pasting the code between the two, I can create a layout file. The layout file will live in routes. And if we just come out of full screen mode here, and put this over to the side along with this one and close my side panel there, you will notice that there's no content on the about page or the home page here. This is because the layout wraps all of the files on the same level as the layout folder. So this will need a slot. You'll notice that's come back. So also in my layout file, I'm going to use a script tag. And this means I can import the header component here.

Wrap this in a main. And there's a cool feature of VS code here where I can specify the component and it will ask me to auto import, which we're going to click Yes. close out this component and then this lib is missing the dollar sign. If I hit save, I've now got my header component, which allows me to navigate between the pages and no need to copy the code between all of the different pages. One last thing I'd like to cover is the Svelte head API. This allows you to add information to the head of your HTML document, like meta tags for SEO purposes. For the case of this mission, I'm just going to add it into the about page here and to the Index page and in here I'm just going to add a title

And I'm going to repeat that on to the Index page here. Now you will see that the Browser tab has updated with the title go to the about page and the Index page. Get rid of the about there. There we go. So we can navigate between the two now and the title will update for each page. Okay, that's it for this one. In the next mission, we will be setting up the back end and retrieving some data with GraphQL. See you in the next one. Bye.


your progress