Building Frontend CMS within Directus

Speaker 0: And we're back with another episode of the community hotline. Welcome. Today, we have Wylus, Wylies. Sorry if I get the name wrong. Welcome to the community.

Glad to have you, friend. Alright. So our question today, is building a front end CMS within direct as possible? So we'll tackle that in a moment. Let's read the rest of this.

Good day, gurus. I'm looking for a powerful tool to support the following. SaaS, hosting multiple tenant within one project, creating pages if possible, but how could I render it within Directus? I saw tutorials, but only using Directus as a back end. How can we make this work potentially?

Alright. So first and foremost, right, Directus is set up to be a headless CMS and back end. So that paradigm is very important to understand. WordPress is, has a headless option, but it's ideally a monolithic kind of solution where you've got your CMS, and you've got your front end, and the templating, and all that is mixed together. Whereas, Directus is headless and that's the way it's designed.

So you can, send that data to multiple sources. Maybe you've got a a front end, maybe you've got a mobile application, maybe you've got a kiosk or a display that you need to send data to or fetch data, from a back end. Directus is great for that. When it comes to building a front end CMS within Directus, basically, you're talking about the Directus App Studio. Right?

I can not only just add my own team members to this, but I could potentially create a multi tenant CMS out of the data studio itself. So, if you take a look at our CMS starter, this is available, you know, through the website. If you go to directives.io, you hit this command line, or the script here. Just pop this into your terminal, select the CMS option, or if you go to our cloud, log in, you spin up a new project inside cloud, just pick the CMS template and you can get access to what I'm gonna show you here today. Right?

So this comes out of the box. This is a a CMS. It's exactly what you would expect out of a CMS. We have pages, we have posts, etcetera. Now if I wanted to make this multi tenant, how would I go about it?

Well, first, I would create a tenant collection. Maybe that's sites or, properties or whatever we wanna call it. And then for each collection within this, I add a relationship, many to one, back to that site's collection, back to that tenant collection. And then within our access policies, you've got everything you need to basically scope access down. So you can filter based on the site, so that one tenant cannot read the, data from another.

Now, there's an specific episode of 100 apps, one hundred hours where we cover this exact thing. So just look for multi site. That mission is season three episode two. You can follow right along with this and see how to set up a multi tenant CMS using Directus. Now to your other question.

Right? How can I create pages or render within Directus? Now Directus itself is extremely flexible, and this is where our extensions come into play. And a good example of that, if we just go to directus.io and we look at our sandbox demo, there's a little extra module in here that is not, baked into directus core. This is just an extension that we built to give you a welcome page that does get rendered inside Directus.

Now this is coming from a separate Directus instance, but again, all of Directus is modular and extensible. So this is actually a module extension. But if we just go to our docs, we look for our guides, we go to the extensions section, You can learn all about extensions. So you can customize the way that you interact with data inside the forms. Those are interfaces.

You can control the way that data is displayed in the different layouts throughout the studio. That is a display. You have layouts themselves, so you can control the listing of these items. You know, they think tables or kanban, views or maps, whatever. We can add panels to the dashboards and kind of the overall level where you've got total control over what gets rendered on the page, you have a module.

So if you want flexibility on how things are rendered inside Directus, Maybe you wanna add some extra pages to it or you just want something, a blank canvas where you could totally experiment with whatever you want. Custom modules are what you're looking at. So, with that in mind, I hope that is enough to answer your question. Wireless. Wireless.

Sorry. Again, I hate if I get it wrong. But that's it for this episode of Community Hopeline. If you want me to answer one of your questions on the next change log or or on the next community hop line, make sure you hop into the Directus community, community.directus.io, and I'll see you around.