Get Started with Directus and Astro

Speaker 0: This is a new ASTRO project created using the ASTRO CLI. In this video, I'm gonna show you how to use the Directus SDK inside of this project. Before we begin, be sure to actually install the Directus SDK like so. And once you've done that, you can run the Astro development server by running npm run dev. We want to create an instance of the Directus SDK that we can use across pages.

And to do that, we're going to create a helper library. Inside of the source directory, create a new directory called lib, and inside of that, a new file called directus.js. To initialize the client, import the create directus and rest functions. Use the create directus function with your full directors project URL and with the rest composable, and export the newly created directors client from this file. We can then later import this file and use the same client across pages.

Here in my existing directors project, I've already created a collection called global which contains a title and a description field. And in this project's access control settings, I've ensured that the public role has read permissions over all of the user created collections and, additionally, the director's files collection. I have replaced the page's index dot astro file with the file. I have imported the default layout that came with this astro project, our initialized directors client, the read singleton function from the Directus SDK, and then I've used the SDK to query the global collection. The global collection is now available.

The data that's returned is now available in this global variable, which we are then rendering into the page as global dot title, global dot description. And the layout that we have here also expects a title prop. So we're also being sure to provide that in here when we use the layout tag. Over in our directors project, we've also set up a collection called pages. And each page has 3 fields, the slug.

And this is meant to correlate 1 to 1 with the URL being used. So if we go to slash about, this is the page we expect to load, a title and content. Underlying this WYSIWYG editor here is just HTML code like so. Inside of the pages directory, create a new file called slug.astro, where slug is surrounded by square brackets, which denotes the fact that it is a dynamic route. Because all routes must be determined at build time in Astro, a dynamic route must export a get static paths function, which in turn will return an array of params and props.

Params being the actual page itself, which will feed this dynamic value here in the file name and props to pass the entire object to the file so we can render values from it. So once we read the page's data from Directus, we then map the values into the shape required, which is an array of objects with the params, that's required, and props, which strictly is optional, but we're going to use it here. And then each page itself will feed in the page value here into astro.props. Then inside of the layout, we're passing up a title again. We are displaying the title, and we are using set HTML to take the HTML in that WYSIWYG field and render it directly.

It's fine, but just bear that in mind going forward. In our director's project, we also have a collection called posts. Just like pages, they also have a slug, a title, and a WYSIWYG content field. But they additionally have an image field, and this is actually a relational field to the director's files collection, a publish date, and an author. This is also a relational field to the author's collection.

Authors at this time just have a name, so I can show you how grabbing relational data works. Inside of our pages directory, create a new directory called blog. And inside of that, a new file called index dot astro. This is the file that will be loaded when a user goes to slash blog. This page might look quite similar to ones we've already created, except this time, we are using the read items method from the Directus SDK.

So we go ahead and read all of the items from the posts collection, but you'll notice there is this second object parameter, which includes some queries. Firstly, fields. Fields is an array that specifies exactly what fields we want to return in this request. We're using it for two reasons. Firstly, we specifically don't want to return all of the data, namely the content field.

That is a huge amount of textual data that we're just not going to use in this page. So let's not return it and make our return data bigger than it has to be. Secondly, we want to access nested or relational data. We have an author field inside of our posts but this is name. So this is how we access that nested data directly within this request.

We're also going to sort the results so we get the latest first. In order to create a list item for every one of the posts, we're going to take the post's data and map it and return a list item. Each list item will have a link to the blog post itself slash blog slash slug, which we'll create in a minute, and data around when it was published and who published it. Take note here that this is a nested object. So post dot publish date is a top level property, but post dot author dot name is nested further because it's a relational value.

To create a dynamic blog post page for individual blog posts, I've created a slug dot astro file inside of this blog directory. Taking note again that there are square brackets because this is a dynamic route. And as with all dynamic routes in astro, we need to export a get static paths function, which will return an array, of items from Directus. But this time, just like before, we can't just return the array as it stands. We have to map that into an array of objects with a params value and a props value.

Then one of these pages will be created for each one of those posts. And here inside the layout, we have the title and we have the content like before. Now just an additional note here, you'll notice there is an image this time. All images in Directus are available using the full Directus project URL slash assets slash image ID. And then here, we are not going to return the entire huge image, but we are resizing it on the fly to 500 pixels in size.

We are also returning alt text, which is the description held in the file in direct Now just take a note here that there is also no slash. The Directus SDK will automatically append a slash to the URL that isn't provided at the time of creating the client. So there is a slash in here. So this is our full project URL slash asset asset slash ID with 500. So that is how you integrate Directus with your ASTRO project.

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