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/ivandoric
Twitter: / ivan_doric
Instagram: / watchlearntuts
Facebook: / watchlearntutorials
![E-commerce with #Directus and #Nextjs - [01] - Next, Directus, Tailwind, React Query, GraphQL](/img/d.gif)
Пікірлер: 82
Please make a tutorial series about direct us as like your October cms tutorial series
@WatchandLearnTutorials
3 жыл бұрын
Maybe I will. Thanks for suggestion.
Happy to see you on directus 9 , can't wait to follow your series on it with next.js
@WatchandLearnTutorials
3 жыл бұрын
Glad you like it 😀
Thanks for the video. Really can’t wait to watch other directus 9 videos.
@WatchandLearnTutorials
2 жыл бұрын
They are coming 😀
Directus 9 seems very elegant and pretty good to use. Can't wait to follow your series on it.
@WatchandLearnTutorials
3 жыл бұрын
I like it too 😀. And there will probably be a series about it.
Awesome Demo! can't wait to use in one of my projects, thanks for this excelent content.
@WatchandLearnTutorials
3 жыл бұрын
Glad you like my content and thanks for watching 😀
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
3 жыл бұрын
It really is great, I'm glad I tested it, and currently using it for my site.
@srujangurram
2 жыл бұрын
Wait !? It's not released ?
@WatchandLearnTutorials
2 жыл бұрын
@@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.
Finally, directus gets some love ! Cool
@WatchandLearnTutorials
2 жыл бұрын
😀
Wow, how your English has improved, it's amazing.
@WatchandLearnTutorials
2 жыл бұрын
Ummm, ok... thanks I guess 😀
Directus is amzing, thanks for video.
@WatchandLearnTutorials
2 жыл бұрын
No problem, thanks for watching 😀
Awesome And how can we add fields to the junction collections created from a many to many relationship like a date for example
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
2 жыл бұрын
Of course I will, keep an eye on the channel, there will probably be a whole series about it 😀
Great one! Looking forward to see a tutorial on deployment with NextJS 😇 Edit: I would love to learn nextAuth integration as well.
@WatchandLearnTutorials
3 жыл бұрын
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
3 жыл бұрын
@@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
3 жыл бұрын
@@makrdev I probably can't help you ATM since I never tried NextAuth. Sorry.
@makrdev
3 жыл бұрын
@@WatchandLearnTutorials It's okay bro :) Please don't make us wait too much for the deployment video :) Thanks again!
@WatchandLearnTutorials
2 жыл бұрын
@@makrdev Ok 😀
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
2 жыл бұрын
I will probably mostly use GraphQL in upcoming videos since I used REST for Strapi. So, yes, it supports GraphQL 😀
Looks really cool🙂 Will you be doing an in depth course on it?
@WatchandLearnTutorials
3 жыл бұрын
Probably something like Directus 9 + Nextjs, yeah 😀
@leanprogrammer
3 жыл бұрын
@@WatchandLearnTutorials Looking forward to it 😀 Doing the strapi one now
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
2 жыл бұрын
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.
Can you show custom hooks? I wanted to see how you will update other collections using directus 9 hooks
@WatchandLearnTutorials
2 жыл бұрын
Ok, I will add it to my to do list. Thanks for suggestion. 😀
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
3 жыл бұрын
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
2 жыл бұрын
@@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
2 жыл бұрын
@@RobertWildling Ok I will try to do something like that, thanks for the idea 👍
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
3 жыл бұрын
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.
Спасибо
Please make a video or if you can explain here how you run Directus and Next together for deployment
@WatchandLearnTutorials
2 жыл бұрын
I will 😀
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
2 жыл бұрын
It's Basic - Premium Intel Droplet, and it costs $12 a month.
@TheProfessorWisdom
2 жыл бұрын
@@WatchandLearnTutorials thank you so much for your reply
Great video, thanks :) A question: what is the last example you're showing in the video? (slug.tpx) An extension? A custom endpoint?
@WatchandLearnTutorials
2 жыл бұрын
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
2 жыл бұрын
Thanks :)
Could you create an example with translations and next.js locales routing (static or ssr)? 🙂
@WatchandLearnTutorials
2 жыл бұрын
Maybe, I'm not sure. Keep an eye on this series: kzread.info/head/PLUBR53Dw-Ef9ZRA0QkaSKlcpotqbzQSv0 , if I'm gonna do it it will be done in that series.
Thanks for pressing the EASY button! Question: how can I get user_created to return the first last name instead of a uuid? 🙏🏻
@WatchandLearnTutorials
2 жыл бұрын
Take a look at my current series about Directus 9 and Nextjs. kzread.info/head/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
2 жыл бұрын
@@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
2 жыл бұрын
@@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
2 жыл бұрын
@@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
2 жыл бұрын
@@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 kzread.info/head/PLUBR53Dw-Ef9ZRA0QkaSKlcpotqbzQSv0 we are displaying categories that are attached to the post. The same method should be used for displaying the author.
your videos are great, could you make an ecommerce with strapi, next, and with payment gateways like paypal or payu?
@WatchandLearnTutorials
3 жыл бұрын
I don't think Strapi is ready to handle E-commerce. So probably not.
@sergiocastillo8888
3 жыл бұрын
@@WatchandLearnTutorials What do you think of a cms ecommerce with laravel and next with payu and paypal payment methods?
@WatchandLearnTutorials
2 жыл бұрын
@@sergiocastillo8888 I mean if you can create whole e-commerce app with Laravel, then go for it. Laravel is a great framework.
Can you host it on vercel ?
@WatchandLearnTutorials
3 жыл бұрын
Maybe with SQLite database, but I'm not sure. However if you are using MySQL, Postgres etc. then definitely not.
can you please upload a full series on directus9
@WatchandLearnTutorials
2 жыл бұрын
That series is currently ongoing, first two episodes are up: kzread.info/head/PLUBR53Dw-Ef9ZRA0QkaSKlcpotqbzQSv0
How would i upload this to my shareed hosting on Ionos and use it?
@WatchandLearnTutorials
2 жыл бұрын
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. kzread.info/dash/bejne/l5aLrMSbhbeahKQ.html
Is GraphQL available for data extraction?
@jatmikoherjati6348
2 жыл бұрын
Yes
@WatchandLearnTutorials
2 жыл бұрын
Yes 😀 you can use REST or GraphQL they both support all functionality.
compared to santiy who is the best option
@WatchandLearnTutorials
Жыл бұрын
No idea, haven't tried Sanity yet.
Strapi looks good from outside but from inside, its worst. I integrated strapi with MySQL and what i found was that it don't delete tables when you delete from admin. The database structure was so childish like it saves each field on new table wtf. Also rest api is not so good and graphql is also immature. Although Strapi + Nosql may be good i didn't check that out.
@WatchandLearnTutorials
2 жыл бұрын
Maybe they fixed those bugs in the newest version. It could be worth checking out.
@ankit.chaurasia
2 жыл бұрын
@@WatchandLearnTutorials I followed your video and i think directus also has lot of bugs. I get forbidden error while creating component, and sometime component won't get deleted. Apart from this everything is perfect. Can you tell me stable version of directus?
@WatchandLearnTutorials
2 жыл бұрын
@@ankit.chaurasia github.com/directus/directus/releases
Directus content multilang is not comfortable "_)
@WatchandLearnTutorials
3 жыл бұрын
Yeah it's a bit weird, I will admit that 😀