Get Started with Directus and Remix

Speaker 0: This is a new Remix project created using the Remix CLI. In this video, I'll show you how to use Directus and Remix using the Directus SDK. Before we get started, make sure to install the Directus SDK so we can use it in a moment, and then run a development server with npm run dev. We want to create an instance of the Directus SDK that we can then use in multiple pages in this Remix application. So inside of this app directory, create a subdirectory called lib and inside of that, a file called directus.js.

Import the requisite functions from the directus SDK and then use the create directus function to create a new instance of the SDK being sure that this string is the full URL of your directors project. Then export the client which we can then later import in future files. Inside of this directors project, there is already a global singleton collection. And inside of this collection is a title and a description field. In this project's access control settings, the public role has been given read access over all user created collections, as well as the director's files collection.

I have replaced routes index dot TSX with the following. Firstly, we have imported the director's helper that we just created, as well as the read singleton function from the directors SDK. Inside of this files loader, we are going off using the directors SDK to read the singleton collection global. And this will return the object that comes back from Directus which will contain an ID, a title, and a description. This is now available, these three properties, inside of the use loaded data function.

We have destructured that, and we can now just use the title and description inside of the page. Inside of our directors project, we've also created a pages collection. Each item in the pages collection has 3 fields. Firstly, the slug. The slug exists to determine what page this data will actually load at.

So we're expecting this data to load at slash about. They also have a title and a content WYSIWYG, what you see is what you get editor. So we get this nice rich text editor, but underlying it is just pure HTML. Inside of the routes directory, create a new file called dollar sign slug.tsx, The dollar sign denoting that this is a dynamic route. This one is very similar to before.

We import the helper. This time, we import the read item function from the SDK. And inside of the loader, we are gaining access to whatever this dynamic value is. And we are running a read item call here on the pages collection with the value of that URL parameter, slug. That data is once again made available in the use loader data function and we can use it inside of the rendered JSX.

Now take note here that we are using dangerously set in a HTML to replace this div with the raw HTML that was inside of our director's item. This is fine if you can absolutely trust that the information being entered in that WYSIWYG editor is correct and not at all malicious. In our directors project, we also have a posts collection. The first three fields are used exactly the same way as pages. The slug, which will denote part of the URL that this page will load at, title, and content.

But we also have an image, which is actually a relational field to the director's files collection, a publish date, and an author. This is also a relational field to an item in the author's collection. Right now, authors only have a name because I just wanna show you how to get this relational data. Inside of the route directory, create a new file called blog dot underscore index dot tsx. This is the file that will render when the user goes to slash blog.

In this file, we'll use the read items function to query the post's collection. Now you'll notice here that we're also passing in a query object with 2 properties. Firstly, the fields. This specifies exactly what files we want to return from the Directus instance. We're doing this for a couple of reasons.

Firstly, we don't want to return everything, specifically, the content field because it's really large. It contains a lot of data in it, and there's no need to increase the size of the request. Secondly, we are getting relational data or nested data from that author relationship. So in here, we're stepping into that author item and we're going to also return the name. The second property is sort, and it means that the latest item will come first, which is quite standard for a block.

We then use this data that we fetched in the loader in order to loop over each item that is returned and display a list item. That list item will send users to slash blog slash slug. It will show the title, the publish date, and the author name. Now take note here that publish date, title, slug, they are all direct properties. But author, because it is a relational item and nested item, is in a nested object.

So post dot author dot name. To create new blog pages, let's create a new file in routes. We'll call this 1 blog.$signslugdot tsx. Once again, dollar sign means that is a dynamic part of the URL. This should look really similar to when we created dynamic pages.

We're using the read item function from the SDK to go query the posts collection, but just the one that has the specific key of the slug, which is in the URL. This time, though, we are also including that query object to what fields we want to return. We're saying here that we wanna get all top level fields, but we also wanna get the author name and the image ID and description. And where as well as rendering the title and the content, we're also rendering the image. All directors assets can be accessed using the full project URL, which we're grabbing here from the SDK slash assets slash image ID.

And we are transforming this on the fly to only return an item that's 400 pixels big. We're also using the description set on that file inside of Directus as alt text. Now you may have noticed here there is no slash. The Director SDK will automatically append a slash if you don't provide it when initializing a client. So there is a slash in there.

So that's our full project URL/assets/id, and then transformed to have a width of 400, and using the description as the alt text. You now know how to grab data from Directus and use it inside of your Remix application. I hope you've enjoyed this video and I'll see you in the next one.