Get Started with Directus and SvelteKit

Speaker 0: This is a brand new SvelteKit project created using the Svelte CLI. In this video, I'm gonna show you how to use Directus and SvelteKit using the Directus SDK. Before we get started, make sure to actually install the Directus SDK. And once you've done that, run npm run dev to start the development server. Let's set up the Directus SDK to make it accessible globally throughout our SvelteKit project.

So let's create inside of this source lib directory a new file called directors dot j s. To make the best use out of SvelteKit server side rendering, we'll need to use SvelteKit's own fetch implementation. So that's what's happening here. We're importing the requisite functions from the SDK. We are creating and exporting a function called get directors instance, which expects one argument of fetch.

We will pass in fetch there. And if we provide it, then we will overwrite the built in fetch using options with the Sveltekit version of fetch. And if not, then we will leave it alone, and we will use the native fetch option, effectively rendering this optional. But we're gonna do it throughout this tutorial to make the best use of Sveltekit. In order to make this work, we will also need to create a hooks dot server dot JS file inside of our source directory.

It will make sure that the required headers for fetching JavaScript content are returned by the Sveltekit server. Inside of our directors project, we already have a global collection, which is a singleton with 2 fields, title and description. Inside of access control, the public role has also been given read access over all user created collections and the director's files collection. Inside of our routes directory function exported. We pass in a fetch implementation, which means we use Sveltekit's version of fetch.

And then we go and use the Director's SDK to read the global collection. If we modify the page dot Svelte file to the following, we can now use the data which is loaded in that load function inside of page dotjs and access its values inside of the file. In our director's project, we also have this pages collection. Each item in the collection has a slug, which is meant to correlate to the URL path used. So this, for example, would load at slash about, title, and content, where content is a WYSIWYG or what you see is what you get editor.

We get this nice visual editor, but underpinning it is just raw normal HTML. Inside of our routes directory, create a new folder called slug with square brackets to denote that this is a dynamic route. And inside of that, a file called plus page dot JS. In this file, we will load data for an individual page. We will import the read item function.

We will grab the director's instance, and we will use the read item function to grab an item from the pages collection that matches the value of this dynamic piece here. So when this is about, it should load the about item from the director's project. And if that file doesn't exist, if that item doesn't exist, we will throw a 404. Now that this data is available, let's create a new file in this slug directory called plus page dot svelte. Inside of this slug directory, let's also create a plus page dot svelte file.

And in here, just like before, we're going to gain access to the data that we exported out of the load function in the page dotjs file. And, once again, we can just use that directly within our HTML. Now what's important here is that we are using the at HTML piece here. And what this will do is render inside of this div the raw HTML from our director's project. You have to be confident that that HTML is well formed and not malicious in order to use this t m l piece here.

So just note this is only for trusted content. Inside of our directors project, we also have a posts collection containing once again a slug, a title and a content field. Additionally, posts also have an image which is actually a relational field to the director's files collection, a published date, and an author. Author is also a relational field to one of the authors, which at this point only contain a name field. But I'm doing this quite minimally just to show you how to get relational data in just a moment.

Inside of routes, create a new directory called blog. And inside of that, a file called page dotjs. We will load our data inside of here. In this file, we're going to use read items to get all of the items from the posts collection in order to create a blog post listing page. What's important here though is that we're also including a query object with 2 properties.

Firstly, fields. Why are we doing this? Well, we're doing this for two main reasons. One, we don't want to get all of the data in all of the blog posts, specifically the content field. It's a really big text block which we're not actually going to use on this page.

So let's not make the return data any larger than it has to be. Secondly, we want access to the relational data inside of the author collection. So we do it like this. This author is a field that sits inside of the post item and we wanna step through to the relational item, the nested item, and get the name. We're also using sort to ensure that as the data is sorted, the latest item comes first, which of course is quite typical for a blog post listing.

In the corresponding page dot Svelte file, we are going to do a loop through each of the items that came back from Directus, rendering out a new list item for each. There will be a link that goes to slash blog slash slug, showing the title, the publish date, and the author's name. Now take note here that while slug, title, and publish date are all properties of the post object, Author being a relational field is a nested object. So we access the author name through post dot author dot name. To get data for an individual blog post inside of the blog directory, I've created a directory called slug with square brackets because it's dynamic.

And inside of that, a page dot j s file. This again should look quite similar to when we fetched individual pages. So we're using read item. We're passing in the slug part of the URL while we're using read item to just get that individual item. But what's important here is that we're also, once again, including that query object and we're including fields.

What this says is that we want to get every top level item, so every field inside of the post collection itself, but we wanna also get the author's name and we wanna get the images ID and description. The reason we're doing that will become clear in a moment. If this post is not found, we will throw a 404. In order to load an individual blog post page, I have created a new slug directory inside of blog. Once again, in square brackets because this is a dynamic route.

Inside of that, I've created a page dot j s file. Now this should look quite similar from when we created dynamic pages. We are reading a single item from the post's collection, passing in the dynamic part of the URL as the ID, except this time we're using a query object. And we're doing that so we can specify that we want not only all of the post fields to come back, but that we also want the author name and we also want the image ID and description. The reason we're doing this will become clear in just a moment.

We're also not only returning the post, but we are going to return the URL from the Director's SDK. So once again, here, we are saving get director's instance as a variable called director's, and we are going to get the URL out of that and return that to our Svelte template under the key directors. This is an individual blog post page. It's very similar to the page creation except we are now also rendering the blog post image. This is why we wanted to export the URL from Directus.

Every asset in Directus can be accessed with the full image URL, which the SDK automatically adds a slash after when storing it. So there is a slash here, /assets/imageid. And then we're transforming it on the fly so it's only 600 pixels wide. We're using the description held inside of directors for this file as the alt text. And that is how you integrate Sveltekit and Directus.

I hope you found this interesting and we'll see you in the next video.