[{"data":1,"prerenderedAt":485},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"tv-stack-up":121,"tv-stack-up-seasons":131,"tv-stack-up-episodes":142,"sales-reps":233},{"items":4},[5,29,49,69],{"id":6,"title":7,"url":8,"page":8,"children":9},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",null,[10,15,20,25],{"id":11,"title":12,"url":8,"page":13},"fcafe85a-a798-4710-9e7a-776fe413aae5","Headless CMS",{"permalink":14},"/solutions/headless-cms",{"id":16,"title":17,"url":8,"page":18},"79972923-93cf-4777-9e32-5c9b0315fc10","Backend-as-a-Service",{"permalink":19},"/solutions/backend-as-a-service",{"id":21,"title":22,"url":8,"page":23},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":24},"/solutions/product-information-management",{"id":26,"title":27,"url":28,"page":8},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus",{"id":30,"title":31,"url":8,"page":8,"children":32},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f","Resources",[33,37,41,45],{"id":34,"title":35,"url":36,"page":8},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":38,"title":39,"url":40,"page":8},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":42,"title":43,"url":44,"page":8},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":46,"title":47,"url":48,"page":8},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":50,"title":51,"url":8,"page":8,"children":52},"d61fae8c-7502-494a-822f-19ecff3d0256","Support",[53,57,61,65],{"id":54,"title":55,"url":56,"page":8},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":58,"title":59,"url":60,"page":8},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":62,"title":63,"url":64,"page":8},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":66,"title":67,"url":68,"page":8},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":70,"title":71,"url":8,"page":8,"children":72},"49141403-4f20-44ac-8453-25ace1265812","Organization",[73,78,84,88],{"id":74,"title":75,"url":76,"page":77},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About","/about",{"permalink":76},{"id":79,"title":80,"url":81,"page":82},"b84bf525-5471-4b14-a93c-225f6c386005","Careers","#",{"permalink":83},"/careers",{"id":85,"title":86,"url":87,"page":8},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":89,"title":90,"url":8,"page":91},"8d2fa1e3-198e-4405-81e1-2ceb858bc237","Contact",{"permalink":92},"/contact",{"items":94},[95,101,107,113],{"id":96,"title":97,"url":8,"page":98,"children":100},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",{"permalink":99},"/cloud-policies",[],{"id":102,"title":103,"url":81,"page":104,"children":106},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License",{"permalink":105},"/bsl",[],{"id":108,"title":109,"url":81,"page":110,"children":112},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":111},"/terms",[],{"id":114,"title":115,"url":81,"page":116,"children":118},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":117},"/privacy",[],{"description":120},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"id":122,"title":123,"logo":124,"cover":125,"tile":126,"announcement_text":8,"description":127,"slug":128,"one_liner":129,"card_text":8,"status":130,"sort":8},"a4a62fc4-fdc7-47ae-8b47-190abc5cfde9","Stack Up","52209927-17f2-4634-9f37-9a68548313a2","f0339cde-4b60-4d45-a030-f8a11b87938b","fcc131d2-1a51-4f6b-8a6b-fa6b7c3700bd","Each episode of Stack Up is the same getting started project with Directus, but with a different framework. Our goal is to show you the nuance of working with the Directus SDK in these environments so you can get started quicker. ","stack-up","Get started with the Directus SDK and your favorite framework.","published",[132],{"id":133,"number":134,"show":122,"year":135,"episodes":136},"c9653ab5-c084-48ce-b5ce-5195ccbc09a2",1,"2024",[137,138,139,140,141],"ab41049a-0090-4568-ad0d-5a31892ae7c6","b55b2706-5a8e-4205-9a30-66beae51d6b2","8a72cda0-83ae-42ee-8bbf-87685e3021fd","56c91fbe-bb18-480b-b28c-92ec339de085","fafde41d-17cb-49bf-b139-a8ad11e50ae1",[143,162,180,198,215],{"id":137,"slug":144,"vimeo_id":145,"description":146,"tile":147,"length":148,"resources":8,"people":149,"episode_number":134,"published":153,"title":154,"video_transcript_html":155,"video_transcript_text":156,"content":8,"seo":8,"status":130,"episode_people":157,"recommendations":159,"season":160},"nuxt","909728011","In this video, you'll learn how to use the Directus SDK with a Nuxt application.","478b00b9-1d18-4ea4-82a2-52008c71d301",12,[150],{"name":151,"url":152},"Kevin Lewis","https://directus.io/team/kevin-lewis","2024-02-07","Get Started with Directus and Nuxt","\u003Cp>Speaker 0: This is a blank Nuxt project created using the Nuxt CLI, and in this video, I'm gonna show you how to integrate directors with this NUXT 3 project. Now over here in the terminal, the only thing we need to do is install the Directus SDK like so. Before we continue, let's spin up the development server using npm run dev and we can just leave this running throughout the length of this tutorial. Create a new directory called plugins, and inside of that, a file called directus dot JS. Import are required functions from the Directus SDK and then initialize an instance of the Directus SDK, making sure to provide your full Directus project URL and including the rest composable.\u003C/p>\u003Cp>Then define a new Nuxt plug in, providing our directus instance, our read item, and read items functions to our entire Nuxt application. In my existing director's project, I've created a collection called global. This collection has a title and a description. In this director's project, the public role has been given read access over all of the user created collections, and additionally, the director's files core collection. Replace Nuxt welcome with Nuxt page to use file based routing, then create a new directory called pages, and inside of that, a new file called index dot view.\u003C/p>\u003Cp>Inside of index dot view, create an empty template, which we'll populate in a moment, and create a script setup. We can now import this direct us and read items, function from the plugin, that's why they have the dollar sign in front of them, from use Nuxt app. And then we're going to use async data. We are going to return directors, dollar sign, dot request, and inside of this, we are going to run read items once again with the dollar sign global, and that is because it is the name of the collection. So we will be reading the global collection.\u003C/p>\u003Cp>Out of this, we will destructure the response from this, the returned value from this, and we will get the access of data. We will get the property of data available. So if I just put data in here and I go back to the browser, we will see data coming back from directors which is great. Let's clean this up just a little bit. We are going to firstly provide the name of this because I don't like data.\u003C/p>\u003Cp>I think that's not very descriptive. We will rename this into global and we will put in here h one global dot title and a paragraph tag global dot description. Going back to our browser, we now see that we have a page with our header and our description directly from Directus. Inside of our directors project, we also have a pages collection. Every page has a slug.\u003C/p>\u003Cp>This is the unique ID for this collection, the primary key. It is a manually entered string, and this correlates with the URL that we're going to load this data at. So this will be a slash about. They have a title and they have content. This is a what you see is what you get editor which means under the hood is actually just storing HTML.\u003C/p>\u003Cp>Inside of your page's directory, create a new file called slug dot view where slug is surrounded by square brackets because it is a dynamic route. This is very similar to when we used our global data with some notable differences. Firstly, instead of using read items, we are using the singular read item function. Because we only need the specific item for any given page, that matches this dynamic value. How do we get that value?\u003C/p>\u003Cp>Firstly, we are going to utilize the use route composable provided by Nuxt. Then, inside of the director stock request when we run read item, the first argument is the collection and the second one is the specific ID of the item we're grabbing. We can now, because we have, created a use route instance here, we can use route dot params.slug. If we head to slash about, we see that data is loaded in correctly. We see it's mostly an a string of t m l, but we also have the slug and the title.\u003C/p>\u003Cp>Let's improve the way this looks. Firstly, we're going to once again have an h one with page dot title. We're also gonna use a div with v HTML as an attribute, and that value will be page dot content. This will render out the HTML directly. Just a note for from a security standpoint, you have to know that this content is safe in order to use the HTML.\u003C/p>\u003Cp>If only you are the author or all the authors are trusted, then this is a fine approach. We now see this page is being properly rendered with all of the correct HTML tags. The last thing we want to do is ensure that if a page does not exist in Directus that we successfully throw a 4 zero four not found error. So we can add this code in the bottom to achieve that. Our directors project also includes a posts and authors collection.\u003C/p>\u003Cp>Inside of a post, just like before, we have a slug, a title, and a content field. But there are some extras. Firstly, an image, which actually is a relational field to the director's files call collection. We'll see how this works in a minute. A publish date and a relational field to an author.\u003C/p>\u003Cp>Our authors just have a name for now because I wanna show you how relational data works. Inside of our pages directory, let's create a subdirectory called blog. And inside of that, a file called index dot view. This is the file which will be loaded when someone goes to slash blog. In order to load a list of blog posts, we're going to use read items.\u003C/p>\u003Cp>Inside of read items, we're going to query that post collection. But this time, we're using some of Directus' inbuilt query, properties. Firstly, we're using fields to specify the specific fields we wish this request to return. This is important for a couple of reasons. One, we don't want to return the entire blog post itself because that is a large amount of data that we're not actually going to use on this page.\u003C/p>\u003Cp>Secondly, we want to access a kind of property of that relational author value. So, here, we're getting the slug, the title, the publish date, and the author's name. Remember that this is held inside of that author's collection, not inside of the post's collection. We're also using a sort to make sure that the newest post comes first as is typical on most blog posts. To actually render the list, we're gonna fall back on our view fundamentals.\u003C/p>\u003Cp>We're going to create a loop. And for every item in the loop, we're going to render a list item which contains a link that goes to slash blog slash and then the dynamic slug will render the title, the publish date, and the post dot author dot name. So that's a nested value there. And in our browser, we now see a list of blog posts latest first. Now, if we click on one of these links, we actually get a 404 and that's because we haven't yet built the blog single page.\u003C/p>\u003Cp>But take note that this was sending us to slash blog slash and then the slug for this individual post. Back in our editor, inside of this blog directory, create a file called slug dot view where slug is a dynamic route. At this point, hopefully, you should start to see some patterns. Inside of an individual blog post, we are using read item and the route param slug once again. Except this time, we are also using the fields query, parameter.\u003C/p>\u003Cp>So here we have, an a wild card that says, give me give me every field related to this blog post, but I also want to grab some relational data. I once again want the author's name. And out of the image, I want the ID and the description of that image. And if nothing comes back, if this post does not exist, once again, throw a 404. I'll move this down so it's a little more readable in in all.\u003C/p>\u003Cp>Once again, we're just putting in the post title and the post content using the HTML with once again a note that you have to be able to trust this content in order to use the HTML and not otherwise sanitized content. And then we have an image tag. This is where we're using director's files. So in here, this is a long string, which, which does the following. Firstly, grabs the URL from our initialized directus SDK in the plugin.\u003C/p>\u003Cp>So this value here is equal to this value here. The SDK automatically adds a forward slash if there isn't one present. So this is equal to our project URL slash assets slash ID of the image. And instead of returning a huge image, we're just returning one with a width of 6 100 pixels. It will resize that image on the fly for us.\u003C/p>\u003Cp>And then it will utilize the description as the alt text for this image. If we head over now to our individual blog post, which we got to from the listing, we have the image. Following the image, we have the h one, and then we have just all of the HTML from the content, what you see is what you get editor inside of Directus. And that is a summary of how to integrate Directus and Nuxt. You have created a Directus plug in and used it to query data.\u003C/p>\u003Cp>You have used a singleton collection for global metadata, dynamically created pages, as well as a blog listing, and post pages. If you want to change what is user accessible, consider setting up more restrictive roles and only accessing valid data at build time. If you wanna build more complex dynamic pages out of reusable components, we have a guide in our docs for doing this. I hope you found this video interesting and have fun with Directus.\u003C/p>","This is a blank Nuxt project created using the Nuxt CLI, and in this video, I'm gonna show you how to integrate directors with this NUXT 3 project. Now over here in the terminal, the only thing we need to do is install the Directus SDK like so. Before we continue, let's spin up the development server using npm run dev and we can just leave this running throughout the length of this tutorial. Create a new directory called plugins, and inside of that, a file called directus dot JS. Import are required functions from the Directus SDK and then initialize an instance of the Directus SDK, making sure to provide your full Directus project URL and including the rest composable. Then define a new Nuxt plug in, providing our directus instance, our read item, and read items functions to our entire Nuxt application. In my existing director's project, I've created a collection called global. This collection has a title and a description. In this director's project, the public role has been given read access over all of the user created collections, and additionally, the director's files core collection. Replace Nuxt welcome with Nuxt page to use file based routing, then create a new directory called pages, and inside of that, a new file called index dot view. Inside of index dot view, create an empty template, which we'll populate in a moment, and create a script setup. We can now import this direct us and read items, function from the plugin, that's why they have the dollar sign in front of them, from use Nuxt app. And then we're going to use async data. We are going to return directors, dollar sign, dot request, and inside of this, we are going to run read items once again with the dollar sign global, and that is because it is the name of the collection. So we will be reading the global collection. Out of this, we will destructure the response from this, the returned value from this, and we will get the access of data. We will get the property of data available. So if I just put data in here and I go back to the browser, we will see data coming back from directors which is great. Let's clean this up just a little bit. We are going to firstly provide the name of this because I don't like data. I think that's not very descriptive. We will rename this into global and we will put in here h one global dot title and a paragraph tag global dot description. Going back to our browser, we now see that we have a page with our header and our description directly from Directus. Inside of our directors project, we also have a pages collection. Every page has a slug. This is the unique ID for this collection, the primary key. It is a manually entered string, and this correlates with the URL that we're going to load this data at. So this will be a slash about. They have a title and they have content. This is a what you see is what you get editor which means under the hood is actually just storing HTML. Inside of your page's directory, create a new file called slug dot view where slug is surrounded by square brackets because it is a dynamic route. This is very similar to when we used our global data with some notable differences. Firstly, instead of using read items, we are using the singular read item function. Because we only need the specific item for any given page, that matches this dynamic value. How do we get that value? Firstly, we are going to utilize the use route composable provided by Nuxt. Then, inside of the director stock request when we run read item, the first argument is the collection and the second one is the specific ID of the item we're grabbing. We can now, because we have, created a use route instance here, we can use route dot params.slug. If we head to slash about, we see that data is loaded in correctly. We see it's mostly an a string of t m l, but we also have the slug and the title. Let's improve the way this looks. Firstly, we're going to once again have an h one with page dot title. We're also gonna use a div with v HTML as an attribute, and that value will be page dot content. This will render out the HTML directly. Just a note for from a security standpoint, you have to know that this content is safe in order to use the HTML. If only you are the author or all the authors are trusted, then this is a fine approach. We now see this page is being properly rendered with all of the correct HTML tags. The last thing we want to do is ensure that if a page does not exist in Directus that we successfully throw a 4 zero four not found error. So we can add this code in the bottom to achieve that. Our directors project also includes a posts and authors collection. Inside of a post, just like before, we have a slug, a title, and a content field. But there are some extras. Firstly, an image, which actually is a relational field to the director's files call collection. We'll see how this works in a minute. A publish date and a relational field to an author. Our authors just have a name for now because I wanna show you how relational data works. Inside of our pages directory, let's create a subdirectory called blog. And inside of that, a file called index dot view. This is the file which will be loaded when someone goes to slash blog. In order to load a list of blog posts, we're going to use read items. Inside of read items, we're going to query that post collection. But this time, we're using some of Directus' inbuilt query, properties. Firstly, we're using fields to specify the specific fields we wish this request to return. This is important for a couple of reasons. One, we don't want to return the entire blog post itself because that is a large amount of data that we're not actually going to use on this page. Secondly, we want to access a kind of property of that relational author value. So, here, we're getting the slug, the title, the publish date, and the author's name. Remember that this is held inside of that author's collection, not inside of the post's collection. We're also using a sort to make sure that the newest post comes first as is typical on most blog posts. To actually render the list, we're gonna fall back on our view fundamentals. We're going to create a loop. And for every item in the loop, we're going to render a list item which contains a link that goes to slash blog slash and then the dynamic slug will render the title, the publish date, and the post dot author dot name. So that's a nested value there. And in our browser, we now see a list of blog posts latest first. Now, if we click on one of these links, we actually get a 404 and that's because we haven't yet built the blog single page. But take note that this was sending us to slash blog slash and then the slug for this individual post. Back in our editor, inside of this blog directory, create a file called slug dot view where slug is a dynamic route. At this point, hopefully, you should start to see some patterns. Inside of an individual blog post, we are using read item and the route param slug once again. Except this time, we are also using the fields query, parameter. So here we have, an a wild card that says, give me give me every field related to this blog post, but I also want to grab some relational data. I once again want the author's name. And out of the image, I want the ID and the description of that image. And if nothing comes back, if this post does not exist, once again, throw a 404. I'll move this down so it's a little more readable in in all. Once again, we're just putting in the post title and the post content using the HTML with once again a note that you have to be able to trust this content in order to use the HTML and not otherwise sanitized content. And then we have an image tag. This is where we're using director's files. So in here, this is a long string, which, which does the following. Firstly, grabs the URL from our initialized directus SDK in the plugin. So this value here is equal to this value here. The SDK automatically adds a forward slash if there isn't one present. So this is equal to our project URL slash assets slash ID of the image. And instead of returning a huge image, we're just returning one with a width of 6 100 pixels. It will resize that image on the fly for us. And then it will utilize the description as the alt text for this image. If we head over now to our individual blog post, which we got to from the listing, we have the image. Following the image, we have the h one, and then we have just all of the HTML from the content, what you see is what you get editor inside of Directus. And that is a summary of how to integrate Directus and Nuxt. You have created a Directus plug in and used it to query data. You have used a singleton collection for global metadata, dynamically created pages, as well as a blog listing, and post pages. If you want to change what is user accessible, consider setting up more restrictive roles and only accessing valid data at build time. If you wanna build more complex dynamic pages out of reusable components, we have a guide in our docs for doing this. I hope you found this video interesting and have fun with Directus.",[158],"69653a15-3fe2-453e-a04d-28108391575d",[],{"id":133,"number":134,"show":122,"year":135,"episodes":161},[137,138,139,140,141],{"id":138,"slug":163,"vimeo_id":164,"description":165,"tile":166,"length":167,"resources":8,"people":168,"episode_number":170,"published":171,"title":172,"video_transcript_html":173,"video_transcript_text":174,"content":8,"seo":8,"status":130,"episode_people":175,"recommendations":177,"season":178},"astro","912196620","In this video, you'll learn how to use the Directus SDK with an Astro application.","6f358086-b9de-43fe-a57a-1bab749d0924",9,[169],{"name":151,"url":152},2,"2024-02-14","Get Started with Directus and Astro","\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>I hope you found this interesting, and we'll see you in the next video.\u003C/p>","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.",[176],"718b9029-76dd-4b7f-a19f-d9f6cfdc7dc9",[],{"id":133,"number":134,"show":122,"year":135,"episodes":179},[137,138,139,140,141],{"id":139,"slug":181,"vimeo_id":182,"description":183,"tile":184,"length":185,"resources":8,"people":186,"episode_number":188,"published":189,"title":190,"video_transcript_html":191,"video_transcript_text":192,"content":8,"seo":8,"status":130,"episode_people":193,"recommendations":195,"season":196},"sveltekit","913399729","In this video, you'll learn how to use the Directus SDK with a SvelteKit application.","5b126eef-f2fe-495a-ae0d-89346aa616e8",11,[187],{"name":151,"url":152},3,"2024-02-21","Get Started with Directus and SvelteKit","\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>I hope you found this interesting and we'll see you in the next video.\u003C/p>","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.",[194],"35f81b7f-e6e3-41b6-b071-944933765a41",[],{"id":133,"number":134,"show":122,"year":135,"episodes":197},[137,138,139,140,141],{"id":140,"slug":199,"vimeo_id":200,"description":201,"tile":202,"length":167,"resources":8,"people":203,"episode_number":205,"published":206,"title":207,"video_transcript_html":208,"video_transcript_text":209,"content":8,"seo":8,"status":130,"episode_people":210,"recommendations":212,"season":213},"remix","913408766","In this video, you'll learn how to use the Directus SDK with a Remix application.","262209d6-8df0-48ef-8a94-6241735fdcae",[204],{"name":151,"url":152},4,"2024-03-13","Get Started with Directus and Remix","\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>","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.",[211],"448399a2-6b59-4f6a-acf4-b9472674a650",[],{"id":133,"number":134,"show":122,"year":135,"episodes":214},[137,138,139,140,141],{"id":141,"slug":216,"vimeo_id":217,"description":218,"tile":219,"length":220,"resources":8,"people":221,"episode_number":223,"published":224,"title":225,"video_transcript_html":226,"video_transcript_text":227,"content":8,"seo":8,"status":130,"episode_people":228,"recommendations":230,"season":231},"next","925880204","In this video, you'll learn how to use the Directus SDK with Next.js","10282be9-8051-4fb8-9684-aca9cddf4829",10,[222],{"name":151,"url":152},5,"2024-03-20","Get Started with Directus and Next.js","\u003Cp>Speaker 0: This is a brand new Next JS project created using the Next CLI. I've deleted all of the files inside of this app directory here, so we can start from scratch. And before we get started, also make sure to install the Director's SDK. We want to create and share a single instance of the Directus JavaScript SDK between multiple pages in this application. Create a new directory called lib and inside of that, a file called directors dotjs.\u003C/p>\u003Cp>In this file, we will import the required functions, create a new instance of the directus SDK, and export it so we can later import it in our future files. We can now go and run-in our terminal, npm run dev, and this will spin up a development server that we can use throughout the length of this tutorial. In my existing directors project, I have a global collection with a title and a description. And in this project, the public role has been given read access over all user created collections, and additionally, the director's files system collection. Inside of the app directory, create a new file called page dotjsx.\u003C/p>\u003Cp>First, we will import that shared helper that we just created, as well as the read items function from the Directus SDK. We will then create a get globals function that will make a request to Directus to read the global collection. We will then create a default function which uses the get globals function, getting the data from directors, and rendering the title and description in the page. In the director's project, we also have a pages collection. Every page has a slug, which is the primary key for this collection.\u003C/p>\u003Cp>It's a manually entered string and it correlates with the URL. So we want this page to load whenever a user visits slash about. A page will also have a title and a content field. The content is a WYSIWYG, a what you see is what you get editor. And what that practically means is underneath this nice UI here is just raw HTML.\u003C/p>\u003Cp>Inside of the app directory, create a subdirectory called slug. Notice these square brackets. And inside of that, a page called page dotjsx. The square brackets in slug means that this is a dynamic route. This page will load when someone goes to slash about, slash hello, slash anything else.\u003C/p>\u003Cp>This page will then be loaded. Once again, we are importing that shared helper from the directors file. We are also importing the read item, notice singular, function from the SDK. And we're also importing the not found function from the next navigation package. The get page function will accept a slug and will then use the Director's SDK to read the specific item in the page's collection with a primary key of the slug.\u003C/p>\u003Cp>If the page is not found, we will then use the not found function which will throw a 4 zero four error. In the default exported function, we will destructure params from the argument, and this will include the dynamic value in the URL. So we can then grab the page by calling the get page function, passing in the slug, which is this dynamic part here. In this case, slash about. It will then get that page data from Directus and render it into our page.\u003C/p>\u003Cp>Now take note that we are using dangerously set in HTML here. And what this will do is take that HTML and directly render it into our page. This should only be used for trusted content. But with this, we do now have a dynamic page. In the director's project, there is also a posts and an authors collection.\u003C/p>\u003Cp>Now, the posts look quite similar to the pages. There is a slug which is used in the URL, a title, and a content WYSIWYG. But there is additionally an image, which actually is a relational field to the director's files collection, I'll show you how that works in a moment. A publish date and an author, which is also a relational field. Authors only have a name.\u003C/p>\u003Cp>It's a very simple author, data model, just so I can show you how relational fields work. Inside of the app directory, create a new folder called blog, and inside of that, once again, a page dotjsx file. Once again, we import the helper. We import read items from the SDK. And then we use read items to grab the data from the post's collection.\u003C/p>\u003Cp>What's interesting here though is that we're passing in this object which allows us to use Directus' powerful query parameters to change the data that we get back. Firstly, we're specifying what fields we want to return. We want to return the slug, the title and the publish date. Note that we are not returning the content because we're not going to render it in this page, so there's no point increasing the size of the payload that is returned. In order to get the relational author name, we include an object with the name of the field and then the name of the nested field.\u003C/p>\u003Cp>So this will return the name from the linked author. We are also using sort in order to sort the returned data latest first. Inside of the returned HTML, we are going to loop through each of the returned posts and render a list item. The list item will have a link to slash blog slash slug. It will show the title, the publish date, and the author name.\u003C/p>\u003Cp>Now take note that this is nested data. Whereas post dot publish date and post dot title are direct properties inside of post, the author is nested inside of an author object like so. So this is our rendered blog listing. You will note that all of the titles are there. It is sorted latest first and we see the author name.\u003C/p>\u003Cp>Now, if we click on one of these blog posts, we should get a 404. And that is, of course, because we haven't yet built the individual blog post page. Inside of the blog directory, create a new subdirectory called slug, once again in square brackets, and inside of that, a page dotjsx. Rendering the individual blog page should now feel quite familiar. We're importing the helper, readitem, and not found.\u003C/p>\u003Cp>We are creating a get post function that will use the SDK in order to fetch a single item specifying the fields we want to return. What's specifically important here are these nested fields. And if this item is not found, we will throw not found. Inside of the returned HTML here, we once again are showing the title. We are using dangerously set in a HTML to render the value of content, but we also have this image field.\u003C/p>\u003Cp>All files inside of your director's project are accessible from your director's project URL slash assets slash image ID or file ID. Now you'll note here that there is not a forward slash here. The director's SDK will automatically append this to the URL if it isn't provided when initializing the client. So this full URL is, stackup.directors.app/assets/id, and then note here that we are using the built in image transformation to just provide the image at a width of 600 pixels. If you don't need a larger image, why would you send a larger image down the pipe?\u003C/p>\u003Cp>We are also using the image description held within Directus as alternative text. And that is how you get started with directus and next JS. I hope you found this tutorial interesting and we have more planned. So expect tutorials around internationalization, authentication, and setting up live preview. But that's for later.\u003C/p>\u003Cp>Have a fantastic day. Bye for now.\u003C/p>","This is a brand new Next JS project created using the Next CLI. I've deleted all of the files inside of this app directory here, so we can start from scratch. And before we get started, also make sure to install the Director's SDK. We want to create and share a single instance of the Directus JavaScript SDK between multiple pages in this application. Create a new directory called lib and inside of that, a file called directors dotjs. In this file, we will import the required functions, create a new instance of the directus SDK, and export it so we can later import it in our future files. We can now go and run-in our terminal, npm run dev, and this will spin up a development server that we can use throughout the length of this tutorial. In my existing directors project, I have a global collection with a title and a description. And in this project, the public role has been given read access over all user created collections, and additionally, the director's files system collection. Inside of the app directory, create a new file called page dotjsx. First, we will import that shared helper that we just created, as well as the read items function from the Directus SDK. We will then create a get globals function that will make a request to Directus to read the global collection. We will then create a default function which uses the get globals function, getting the data from directors, and rendering the title and description in the page. In the director's project, we also have a pages collection. Every page has a slug, which is the primary key for this collection. It's a manually entered string and it correlates with the URL. So we want this page to load whenever a user visits slash about. A page will also have a title and a content field. The content is a WYSIWYG, a what you see is what you get editor. And what that practically means is underneath this nice UI here is just raw HTML. Inside of the app directory, create a subdirectory called slug. Notice these square brackets. And inside of that, a page called page dotjsx. The square brackets in slug means that this is a dynamic route. This page will load when someone goes to slash about, slash hello, slash anything else. This page will then be loaded. Once again, we are importing that shared helper from the directors file. We are also importing the read item, notice singular, function from the SDK. And we're also importing the not found function from the next navigation package. The get page function will accept a slug and will then use the Director's SDK to read the specific item in the page's collection with a primary key of the slug. If the page is not found, we will then use the not found function which will throw a 4 zero four error. In the default exported function, we will destructure params from the argument, and this will include the dynamic value in the URL. So we can then grab the page by calling the get page function, passing in the slug, which is this dynamic part here. In this case, slash about. It will then get that page data from Directus and render it into our page. Now take note that we are using dangerously set in HTML here. And what this will do is take that HTML and directly render it into our page. This should only be used for trusted content. But with this, we do now have a dynamic page. In the director's project, there is also a posts and an authors collection. Now, the posts look quite similar to the pages. There is a slug which is used in the URL, a title, and a content WYSIWYG. But there is additionally an image, which actually is a relational field to the director's files collection, I'll show you how that works in a moment. A publish date and an author, which is also a relational field. Authors only have a name. It's a very simple author, data model, just so I can show you how relational fields work. Inside of the app directory, create a new folder called blog, and inside of that, once again, a page dotjsx file. Once again, we import the helper. We import read items from the SDK. And then we use read items to grab the data from the post's collection. What's interesting here though is that we're passing in this object which allows us to use Directus' powerful query parameters to change the data that we get back. Firstly, we're specifying what fields we want to return. We want to return the slug, the title and the publish date. Note that we are not returning the content because we're not going to render it in this page, so there's no point increasing the size of the payload that is returned. In order to get the relational author name, we include an object with the name of the field and then the name of the nested field. So this will return the name from the linked author. We are also using sort in order to sort the returned data latest first. Inside of the returned HTML, we are going to loop through each of the returned posts and render a list item. The list item will have a link to slash blog slash slug. It will show the title, the publish date, and the author name. Now take note that this is nested data. Whereas post dot publish date and post dot title are direct properties inside of post, the author is nested inside of an author object like so. So this is our rendered blog listing. You will note that all of the titles are there. It is sorted latest first and we see the author name. Now, if we click on one of these blog posts, we should get a 404. And that is, of course, because we haven't yet built the individual blog post page. Inside of the blog directory, create a new subdirectory called slug, once again in square brackets, and inside of that, a page dotjsx. Rendering the individual blog page should now feel quite familiar. We're importing the helper, readitem, and not found. We are creating a get post function that will use the SDK in order to fetch a single item specifying the fields we want to return. What's specifically important here are these nested fields. And if this item is not found, we will throw not found. Inside of the returned HTML here, we once again are showing the title. We are using dangerously set in a HTML to render the value of content, but we also have this image field. All files inside of your director's project are accessible from your director's project URL slash assets slash image ID or file ID. Now you'll note here that there is not a forward slash here. The director's SDK will automatically append this to the URL if it isn't provided when initializing the client. So this full URL is, stackup.directors.app/assets/id, and then note here that we are using the built in image transformation to just provide the image at a width of 600 pixels. If you don't need a larger image, why would you send a larger image down the pipe? We are also using the image description held within Directus as alternative text. And that is how you get started with directus and next JS. I hope you found this tutorial interesting and we have more planned. So expect tutorials around internationalization, authentication, and setting up live preview. But that's for later. Have a fantastic day. Bye for now.",[229],"fa9bfca1-4cb7-463c-9374-bf7a553dce7a",[],{"id":133,"number":134,"show":122,"year":135,"episodes":232},[137,138,139,140,141],{"reps":234},[235,291],{"name":236,"sdr":8,"link":237,"countries":238,"states":240},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[239],"United States",[241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290],"Michigan","Indiana","Ohio","West Virginia","Kentucky","Virginia","Tennessee","North Carolina","South Carolina","Georgia","Florida","Alabama","Mississippi","New York","MI","IN","OH","WV","KY","VA","TN","NC","SC","GA","FL","AL","MS","NY","Connecticut","CT","Delaware","DE","Maine","ME","Maryland","MD","Massachusetts","MA","New Hampshire","NH","New Jersey","NJ","Pennsylvania","PA","Rhode Island","RI","Vermont","VT","Washington DC","DC",{"name":292,"link":293,"countries":294},"Michelle Riber","https://meetings.hubspot.com/mriber",[295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,272,483,484],"Albania","ALB","Algeria","DZA","Andorra","AND","Angola","AGO","Austria","AUT","Belgium","BEL","Benin","BEN","Bosnia and Herzegovina","BIH","Botswana","BWA","Bulgaria","BGR","Burkina Faso","BFA","Burundi","BDI","Cameroon","CMR","Cape Verde","CPV","Central African Republic","CAF","Chad","TCD","Comoros","COM","Côte d'Ivoire","CIV","Croatia","HRV","Czech Republic","CZE","Democratic Republic of Congo","COD","Denmark","DNK","Djibouti","DJI","Egypt","EGY","Equatorial Guinea","GNQ","Eritrea","ERI","Estonia","EST","Eswatini","SWZ","Ethiopia","ETH","Finland","FIN","France","FRA","Gabon","GAB","Gambia","GMB","Ghana","GHA","Greece","GRC","Guinea","GIN","Guinea-Bissau","GNB","Hungary","HUN","Iceland","ISL","Ireland","IRL","Italy","ITA","Kenya","KEN","Latvia","LVA","Lesotho","LSO","Liberia","LBR","Libya","LBY","Liechtenstein","LIE","Lithuania","LTU","Luxembourg","LUX","Madagascar","MDG","Malawi","MWI","Mali","MLI","Malta","MLT","Mauritania","MRT","Mauritius","MUS","Moldova","MDA","Monaco","MCO","Montenegro","MNE","Morocco","MAR","Mozambique","MOZ","Namibia","NAM","Niger","NER","Nigeria","NGA","North Macedonia","MKD","Norway","NOR","Poland","POL","Portugal","PRT","Republic of Congo","COG","Romania","ROU","Rwanda","RWA","San Marino","SMR","São Tomé and Príncipe","STP","Senegal","SEN","Serbia","SRB","Seychelles","SYC","Sierra Leone","SLE","Slovakia","SVK","Slovenia","SVN","Somalia","SOM","South Africa","ZAF","South Sudan","SSD","Spain","ESP","Sudan","SDN","Sweden","SWE","Tanzania","TZA","Togo","TGO","Tunisia","TUN","Uganda","UGA","United Kingdom","GBR","Vatican City","VAT","Zambia","ZMB","Zimbabwe","ZWE","UK","Germany","Netherlands","Switzerland","CH","NL",1773850416734]