Let's Checkout... Directus 9

In this episode we are going to take a look at another headless CMS that is very similar to #Strapi.
So I have been using #Directus 9 for a few weeks now. And actually my new website is made using Directus 9 and #Nextjs, I'm going to show you that setup near the end of the video.
Now, I know I told you in one of the videos that I'm using October CMS for the backend of my site, but I decided to change it because it was very slow when I put it online. I thought it was because of October CMS, but it turns out it was not.
Actually the problem was with the Image component from Next.js, but by the time that I found that out, I already migrated my backend to Directus 9.
This was a good thing in hind site, because since Directus 9 is a Node.js app, just like Next.js, and because of that I was able to put both backend and frontend of my site to the same Digital Ocean Droplet, without much trouble. Doing the same thing with the backend that runs on PHP would be much more difficult, at least for me, since my DevOps skills are very limited. So this turned out pretty nice all in all.
So as you can already guess I'm going to be talking about Directus 9 in this edition of "Let's checkout..." series. And also I'm going to be comparing it with Strapi... like, a lot... since they are very similar applications.
So Directus 9 has a pretty interesting history, and that is why I'm calling it Directus 9, and not just Directus, because Directus 8 and versions before it, where entirely different applications, ... I mean, they did the same thing but they were written in PHP - Zend framework to be exact, and Directus 9 is a Node application.
Since Zend framework got depricated, Directus team decided to port it to Laravel framework, and also they wanted to test it out in Node as well. Node version turned out to be pretty fast to build, and it showed great promise. Main thing being that API responses were 10X faster than the PHP version.
As far as I know they are still developing community driven Laravel-PHP version, but Node version is the official API version for the platform, and that is the version that we are going to be focusing on.
Ok, first of all what is Directus 9. Well it's just a headless CMS, like Strapi that we covered on this channel. That means that you only get the CMS part, that will serve your data through an API, but you need to build the frontend yourself, with something like Next.js, Nuxt.js, React, Vue or even use it as an API for your mobile apps.
As I've said, I will be comparing it to Strapi since they are very similar applications, but I will tell you right of the bat that I like Directus a bit more. Main difference from Strapi is that is a bit more technical, but not too much, and editing experience is for the most part very nice.
Also one difference is that for self hosted version of Directus 9 you get everything free, but for Strapi you have to pay $29/month to get up to 30 custom roles, even on self hosted version.
----------------------------------------------------------------------------------------------
⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here: bit.ly/3qdjIc5​...
------------------------------------------------------------------------------------------------
You can support my work on Patreon
/ watchlearn
Follow me on Social Media
Github: github.com/iva...
Twitter: / ivan_doric
Instagram: / watchlearntuts
Facebook: / watchlearntutorials

[@uenmedia4528]

Thanks for the video. Really can’t wait to watch other directus 9 videos.

[@WatchandLearnTutorials]

They are coming 😀

[@amjadiqbalkhanniazi]

Happy to see you on directus 9 , can't wait to follow your series on it with next.js

[@WatchandLearnTutorials]

Glad you like it 😀

[@stanleybonhomme7811]

Directus 9 seems very elegant and pretty good to use. Can't wait to follow your series on it.

[@WatchandLearnTutorials]

I like it too 😀. And there will probably be a series about it.

[@Pix3lmate]

I'm so happy you checked Directus this is my default go to when I need an API, can't wait it to be released officially

[@WatchandLearnTutorials]

It really is great, I'm glad I tested it, and currently using it for my site.

[@srujangurram]

Wait !? It's not released ?

[@WatchandLearnTutorials]

@@srujangurram AFAIK it's still not official, but you can use it. However they are adding new stuff all the time. So if you have production critical project maybe hold of on it for a little while.

[@jatmikoherjati6348]

Finally, directus gets some love ! Cool

[@WatchandLearnTutorials]

😀

[@dmxd]

Wow, how your English has improved, it's amazing.

[@WatchandLearnTutorials]

Ummm, ok... thanks I guess 😀

[@joaocason]

Awesome Demo! can't wait to use in one of my projects, thanks for this excelent content.

[@WatchandLearnTutorials]

Glad you like my content and thanks for watching 😀

[@MinhazurSarker]

Please make a tutorial series about direct us as like your October cms tutorial series

[@WatchandLearnTutorials]

Maybe I will. Thanks for suggestion.

[@makrdev]

Great one! Looking forward to see a tutorial on deployment with NextJS 😇 Edit: I would love to learn nextAuth integration as well.

[@WatchandLearnTutorials]

There will be a video about deploying both next and Directus to the same Digital Ocean droplet. I have NextAuth in a backlog for some time now, maybe I will show how to use it with Directus.

[@makrdev]

@@WatchandLearnTutorials Thanks for sharing! I've tried to implement NextAuth yesterday and the main problem is social login. I created a q&a here maybe you can check and help me if you have some time :) github.com/directus/directus/discussions/7193

[@WatchandLearnTutorials]

@@makrdev I probably can't help you ATM since I never tried NextAuth. Sorry.

[@makrdev]

@@WatchandLearnTutorials It's okay bro :) Please don't make us wait too much for the deployment video :) Thanks again!

[@WatchandLearnTutorials]

@@makrdev Ok 😀

[@vitormelo22]

Directus is amzing, thanks for video.

[@WatchandLearnTutorials]

No problem, thanks for watching 😀

[@WIllL651]

really nice to see you using directus 9 for backend for your website. Will you kindly make tutorials on directus with Next.js maybe?

[@WatchandLearnTutorials]

Of course I will, keep an eye on the channel, there will probably be a whole series about it 😀

[@dragon3602010]

Awesome And how can we add fields to the junction collections created from a many to many relationship like a date for example

[@МаксимШишков-о8п]

Спасибо

[@RobertWildling]

Nice intro! Thank you very much!!! And a very beautiful website that you have there! - Would like to know how you handle things like a newsletter subscription field in Directus?. Is the route protected? How to you secure yourself from spam? Can API files be accessed the same way as in Strapi? If so, what has to be done, when such a newsletter transcription requires updating a relational field (e.g. categories)? Any chance to motivate you doing such a video?

[@WatchandLearnTutorials]

I don't have a newsletter and also didn't know Directus has that functionality 😀. But if I were to have a newsletter I would just use Mailchimp or something similar for that. So I would probably not make video about that. Sorry 🙁

[@RobertWildling]

@@WatchandLearnTutorials The newsletter subscription was just an example. Could be anything else that has a relation that needs update on save or delete. E.g. based on some skills a user is assigned to a group a or b (the user cannot choose the group). So how does the user action call the group action, maybe even do some validation before that? (At least in strapi it needs the proper usage f the before... after lifecycle methods...) Simply said: more complex scenarios where scripting is needed would be most welcome. :-)

[@WatchandLearnTutorials]

@@RobertWildling Ok I will try to do something like that, thanks for the idea 👍

[@leanprogrammer]

Looks really cool🙂 Will you be doing an in depth course on it?

[@WatchandLearnTutorials]

Probably something like Directus 9 + Nextjs, yeah 😀

[@leanprogrammer]

@@WatchandLearnTutorials Looking forward to it 😀 Doing the strapi one now

[@kalib-code]

Can you show custom hooks? I wanted to see how you will update other collections using directus 9 hooks

[@WatchandLearnTutorials]

Ok, I will add it to my to do list. Thanks for suggestion. 😀

[@CodeCoffeeClassics]

Wonderful video, very well explained. You said you are hosting both your backend and frontend on the same droplet, so can you tell me which droplet are you using or how much does it cost you per month?

[@WatchandLearnTutorials]

It's Basic - Premium Intel Droplet, and it costs $12 a month.

[@CodeCoffeeClassics]

@@WatchandLearnTutorials thank you so much for your reply

[@NicoPlyley]

Please make a video or if you can explain here how you run Directus and Next together for deployment

[@WatchandLearnTutorials]

I will 😀

[@adolfusadams4615]

Great tutorial! I hope you do more detailed tutorials on Directus 9. Does it support graphql? If yes, could you show Directus outputs data in graphql?

[@WatchandLearnTutorials]

I will probably mostly use GraphQL in upcoming videos since I used REST for Strapi. So, yes, it supports GraphQL 😀

[@alainbuysse9374]

Thank you very much for your great lessons! Can you teach us how to authenticate and authorize posts with directus and next js... that would be awesome.

[@WatchandLearnTutorials]

There will be an episode about that for sure. However, I just moved houses and haven't set up my office yet, so once I set that up I will start making videos again.

[@ianmcfall9519]

Thanks for pressing the EASY button! Question: how can I get user_created to return the first last name instead of a uuid? 🙏🏻

[@WatchandLearnTutorials]

Take a look at my current series about Directus 9 and Nextjs. kzbin.info/aero/PLUBR53Dw-Ef9ZRA0QkaSKlcpotqbzQSv0 . You have an option when creating or editing a field in the interface tab I think, the option to setup display template, and there you would setup to show the name instead of uuid. Anyway checkout my latest series, I think I show this in the first episode and then also again in the third or something like that.

[@ianmcfall9519]

@@WatchandLearnTutorials Thanks for the response!!! I checked out your other vids: For the directus ui display editing the interface to show "first last" that works fine. However, the json returned from a url query still returns a uuid. I've tried editing both the interface and the display values in the data model, but the url query returns the uuid of a user. Am I missing something?

[@WatchandLearnTutorials]

@@ianmcfall9519 Honestly I'm confused by your question. What does this mean: "However, the json returned from a url query still returns a uuid"? ... I mean if you are connecting to the API and getting JSON you will get API data, "Display template" is just used for the administration part of Directus, not for the actual API response. If I understand what you are asking.

[@ianmcfall9519]

@@WatchandLearnTutorials Goooot it. Yes, thanks for laying out the difference between getting JSON through API and the Directus interface. You hit the nail on the head. What I'm asking is if it is possible to get the name of an author returned(and not the uuid) in JSON when I'm connecting to the API?

[@WatchandLearnTutorials]

@@ianmcfall9519 It is. But since the author is probably connected to your post through relationship you need to define that in your query. If you are using GraphQL that query would be something like: posts { id title whatever_else user { user_id { user_name user_last_name etc... } } } Again please watch the videos from kzbin.info/aero/PLUBR53Dw-Ef9ZRA0QkaSKlcpotqbzQSv0 we are displaying categories that are attached to the post. The same method should be used for displaying the author.

[@blokche_dev]

Do they provide an SDK to deal with the API? Or is it URL based only? I read graphQL was possible somewhere in the documentation but didn't really find how to use it. I should consider digging deeper I guess.

[@WatchandLearnTutorials]

They provide SDK (www.npmjs.com/package/@directus/sdk and docs.directus.io/reference/sdk/) and GraphQL. To use GraphQL as far as I understand it (since I didn't try it yet) you just send GraphQL query to the /graphql endpoint, and in the docs all examples contain REST and GraphQL versions (for example: docs.directus.io/reference/api/query/#examples-2). But I will probably make a video about it at some point, because I'm also interested in that and also REST API can get a bit cumbersome with complicated queries so maybe GraphQL will handle this better.

[@sergiocastillo8888]

your videos are great, could you make an ecommerce with strapi, next, and with payment gateways like paypal or payu?

[@WatchandLearnTutorials]

I don't think Strapi is ready to handle E-commerce. So probably not.

[@sergiocastillo8888]

​@@WatchandLearnTutorials What do you think of a cms ecommerce with laravel and next with payu and paypal payment methods?

[@WatchandLearnTutorials]

@@sergiocastillo8888 I mean if you can create whole e-commerce app with Laravel, then go for it. Laravel is a great framework.

[@CK-us1zi]

Could you create an example with translations and next.js locales routing (static or ssr)? 🙂

[@WatchandLearnTutorials]

Maybe, I'm not sure. Keep an eye on this series: kzbin.info/aero/PLUBR53Dw-Ef9ZRA0QkaSKlcpotqbzQSv0 , if I'm gonna do it it will be done in that series.

[@PierreAtman]

Can you host it on vercel ?

[@WatchandLearnTutorials]

Maybe with SQLite database, but I'm not sure. However if you are using MySQL, Postgres etc. then definitely not.

[@micheljacquot3214]

Great video, thanks :) A question: what is the last example you're showing in the video? (slug.tpx) An extension? A custom endpoint?

[@WatchandLearnTutorials]

It's a [slug].tsx file, that is specific to Next.js. It just means that the route is going to recieve a slug which you can read, and based on that you can filter the specific post from the API, based on the slug you get on your route. nextjs.org/docs/routing/dynamic-routes

[@micheljacquot3214]

Thanks :)

[@andyterry1953]

How would i upload this to my shareed hosting on Ionos and use it?

[@WatchandLearnTutorials]

Don't do that, use something like Digital Ocean, AWS or similar. I tried to do something similar in this video, but it didn't work very well. kzbin.info/www/bejne/m5O6e5WYirlniqM

[@venkatapenumatsa3959]

Is GraphQL available for data extraction?

[@jatmikoherjati6348]

Yes

[@WatchandLearnTutorials]

Yes 😀 you can use REST or GraphQL they both support all functionality.

[@aghilpwilson879]

can you please upload a full series on directus9

[@WatchandLearnTutorials]

That series is currently ongoing, first two episodes are up: kzbin.info/aero/PLUBR53Dw-Ef9ZRA0QkaSKlcpotqbzQSv0

[@nested9301]

compared to santiy who is the best option

[@WatchandLearnTutorials]

No idea, haven't tried Sanity yet.

[@webexpert8797]

Directus content multilang is not comfortable "_)

[@WatchandLearnTutorials]

Yeah it's a bit weird, I will admit that 😀