---
title: "Add multi-tenancy to a Headless CMS"
description: "Hygraph's Lo Etheridge and Tim Benniks deep-dive into setting up multi-tenancy inside Hygraph using the SKNCRE starter. Can two brands live in one project? Yes! Find out on the stream. Ask us any questions in the chat and join the community:"
date: "2024-05-31T18:28:16.000Z"
url: "https://timbenniks.dev/videos/live-hygraph/016-m5xamvlqh1g"
youtube_url: "https://www.youtube.com/watch?v=M5XaMvlqh1g"
playlist: "live-hygraph"
image: "https://i.ytimg.com/vi/M5XaMvlqh1g/maxresdefault.jpg"
tags: ["composable-architecture", "cms", "cloud-infra", "frontend", "devrel"]
---

# Add multi-tenancy to a Headless CMS

Hygraph's Lo Etheridge and Tim Benniks deep-dive into setting up multi-tenancy inside Hygraph using the SKNCRE starter. Can two brands live in one project? Yes! Find out on the stream. Ask us any questions in the chat and join the community:

Watch on YouTube: https://www.youtube.com/watch?v=M5XaMvlqh1g

## Transcript

[Music] that is such a fancy intro I know I'm was like looking at the intro and like oh I have to speak in like two seconds but here we go we're live yes we are the music is great it reminds me of um I play this game called astroneer and it's like a space game where you're an astronaut but the music is very ethereal like almost Interstellar like and it sounds like that I was like yeah exactly I was like look my hat was going like this when I looked at the anyways um we're here with a bunch of people and we're already marveling at ourselves let's maybe tune that down just a little yes anyways um um we have Brian here saying he likes the intro me too yes and for the people who have watched before look the overlays are a little bit rounder now because our brand folks said it's too Square anyways here we go so we are back with another live stream and I have a fantastic guest with not really a guest because we are colleagues we work together we we talk all the time so low is supposed to be on here anyway so Lo why didn't you take away take it away and say who you are what you do all the things awesome so hi everyone um my name is low and I am deel at high graph um I like to talk a lot about the sort of editor and developer um relationship and how they can work together to build sort of you know the ideal not only content model but a CMS that works for everyone um I specialize in front-end Frameworks I was previously um a front-end engineer at a large Public University where I managed their web presence and before that I was a social worker doing lots of community work um in our physical world what a lovely crossover and Bridge to being death right this things work I used to be a nurse working in Psychiatry and it's like all these kind of soft skill stuff that comes together and B yeah it really comes in handy like my social work training and just being able to talk to people and relay information really comes in handy with deel things exactly so now let's see if when we say this that people start understanding multi-tenancy in headless CMS because that is yes pretty technical I can tell you but the simple idea is well Lo what you made slides right I want you you go for it like without me taking it okay let's get into it a little bit and I'll try to break it down so it makes it you know digestible so when we talk about multi- tendency before I get into the definition here I just want to give a little bit of background multi- tendency has sort of been around historically for a very long time it goes back to the days of when we had mainframe computers that took up a whole room and inside of those large sort of Mainframe pieces of Hardware you had all kinds of apps and users and all sorts of things going on behind in that architecture so that's sort of where it stems from right and then that quickly sort of evolved into things that we would readily recognize now which which is sort of hardware virtualization so that's talking about like virtual machines right so inside of a physical piece of Hardware you can have virtual machines and those virtual machines can host a wide range of applications but all of those applications are sort of sharing this infrastructure of that piece of Hardware or that server right so just to give you a little bit of background there but for our purposes today we're talking about multi-tenancy as sort of a single piece or instance of a piece of software application that serves multiple tenants right and those tenants could be customers entities or Brands so the piece of software we're talking about today is a CMS so if we think about a CMS we're talking about we have one CMS and it serves a wide range of needs that could be multiple brands that could be customers it could be all sorts of things so let's see and so if we get into sort of the difference between a single tenant and a multi-tenant single tenant is basically when you have all separate instances right so let's say from a CMS perspective every time that you had a new brand or a new entity you would spin up a new CMS it would have its own individual sort of infrastructure but in a multi-tenant configuration you might have um one database right that serves as sort of a hub for all of the different front ends that you're going to spit out and they share resources together and maybe a bunch of different teams can all utilize that space to create what they need to create essentially would you agree with that Tim yeah yeah I'm just listening intently but yes and so we've seen this in like when I worked at agency we saw this stuff all the time because especially when it wasn't yet a hatless CMS but we had architecture like really proper servers we had to work with it was always a discussion are we just going to add configuration and just add two things in one instance or are we going to wrap at all this stuff on another machine and then back that up and work with it and so it's it's always a discussion of how you move these things around and especially when you have separated Brands but with similar data structures and stuff like that it becomes a super interesting thing to do yes and so that's basically what we're going to look at today exactly so in other words from what Tim and I and I are talking about you can really sort of think about in um as a metaphor multi-tenancy is kind of like an apartment complex so an apartment comp in an apartment complex you have multiple apartments right and people who live live in those apartments they do varying different things in their Apartments their style totally different um they have they lay out their space differently but the common sort of thing about all of these apartments is that they share the infrastructure of the building for instance so all of the central piping um for like water the electrical grid um that is all shared amongst the apartments a lot of times and there's a lot of sort of there might even be in modern complexes common space right so we have a common we have apartments and then we have a common space and everybody sort of us utilizes these common spaces maybe there's a common space for co-working or a common based like a computer lab or something all kinds of things right so that's sort of the general idea behind multi-tenancy we have various entities coming together to share resources and so along with that sort of thinking about well why would a company or someone want to utilize multi-tenancy um and there are wide range of benefits that you can get from using multi-tenancy one in particular is that it allows you to not have multiple cms's you can use one CMS because I think a lot of times at least from what I've seen as being just you know a developer in my past and not a devil is that sometimes you will see a company and maybe they have multiple brands or multiple entities that are responsible and each one of them sort of has a separate CMS and they're completely sort of siloed away from the next and it makes it hard to sort of have visibility um when everything is separate because there is probably some shared resources that everybody um could benefit from and almost always isn't it the most more mature you get as a brand the more or Brands you're going to allow how you do that right so you have a bit of centralized stuff and then you give people guard rails and then they just go off with their whatever they need but quality is only assured when you share certain things right exactly um and so and with that sort of what to Tim's point is sort of this scalability idea right if you create an environment where you are sharing resources and the only thing that changes is that you're adding an addition additional tenants if you will that allows you to scale and even though this scale like it might require more work on the front end what you end up with is a workflow and a system where no matter how many entities you acquire or how many Brands you acquire there is a process and a framework and a model to use um that they can then take and go off and create what they need to create and this works to sort of decrease your overall cost right so decreasing your everybody wants to decrease overhead costs and hosting cost if you have one CMS um that can greatly decrease your cost in terms of the you know your hosting cost what you're putting out there and also your overall maintenance cost in terms of having to manage more than one CMS or more more than one um hosting space and then that's really interesting right when you look at like more scale because I personally worked on like a multi-tenant thing for a company called L'Oreal they like the L'Oreal group I think they have like they must have 50 Brands and we work at least yeah we did the the I think the Cosmetics part and the luxury part we had like 15 Brands but these 15 Brands before we came in they had like 3,100 different websites all in different coding languages all with different creative agencies with different front ends it was a basically a pit of money right a black hole and so yes we had this we had two ways of multi tendency in here so the first one was in the mind the multi- tendency would be we will make one technical stack that they all work in they all get the components that we deliver are so good that they can reuse them and customize them they're all in the same CMS with the same front end stack with the same kpis for performance accessibility all that stuff but then it got so big we went down from like three and a half thousand websites or a bit less to like 800 but you cannot do 800 websites in one CMS yes especially back in that time when it wasn't in the cloud yet and so the second multi- tendency thing was okay we have a Europe CMS and then we have a US CMS you have an Asia CMS and yes in there you had a few hubs and then we would just say okay these four brands with these language variants go in there and the other ones go in there and so at scale it all gets harder and it felt expensive for them but now looking back many years back they spend a lot but they gained so much in quality website performance SEO benefits all that stuff that they must have made a a crap ton of money actually having done that investment off the multi- tendency idea and that so exciting right yeah and like in a situation like that where you're talking about you know you're not just talking about a company you're talking about a huge conglomerate exact you know of Brands it makes sense that you would then once you get to that sort of scaled point that you would start thinking about okay how's the best way to sort of divide this again in a way that makes sense with what we already have by region makes totally sense take makes total sense yeah but we had this problem from like scale always give you problems because yes we were the agency building the thing like I was in charge of all those points that you saw here for front and related things and then talking to people making them understand and then building it but then maintenance we didn't do so we would build an MVP and then do some updates along the way later on sometimes but then the team would go to another brand and build that project and then we gave the maintenance contract to to another company and they of course had to also understand the multi-tenancy and the reusability and all the things and just deal with it but when you're talking 800 websites like I had a team of 120 developers it's ridiculous so there is always skill gives you things that are hard it does but it gives you other problems to solve too right but this is where and we'll get into this a little bit more later but this is where things like making sure that you have a good sort of transition plan a good maintenance plan and good overall objectives that are documented right because multi-tenancy is the type of thing that works really well when you anticipate all of these issues ahead of time and you can and plan for them exactly and we're going to show some of this stuff soon by the way just to let you know it's not just slides today we we actually made like a full brand to show you in a second yeah and it's really cool I'm super excited to get into it we just have a lot of fun together anyways so um and then so I won't go through all of these yet I'll just cover sort of the my last final point about the benefits when you have sort of a centralized location you can create sort of a Content Hub right and that helps you improve collaboration not only between your editors but also it increases sort of develop productivity because what you're looking at is if you have sort of shared resources in terms of these are based content models that we're all going to use and we're just going to focus on transforming um sort of the content right you can create these nice sort of repeatable patterns that work for each you know work and you can plan those and create them in a way that works for every brand that comes or every entity that comes later yeah exactly so I think now we're g to get into just a quick practical example and then we will move on to um showing what some of this actually looks like right so here we have six movies right um we have Marcel the Snell um fantastic movie if you haven't seen it uh Lighthouse past lives Midsummer everything everywhere all at once and Uncut so what these movies all have in common here is that they are all made by the production company a24 a24 makes a lot of movies um they tend to focus on sort of independent art housee films but where the multi- tendency comes from in this example is every time the a24 pumps out a new movie it is basically a new brand they need to provide a marketing campaign they need to provide information about the film information about the actor the director there's also merch um associated with each of these movies that are available to the per um the public to purchase so in a sense like that where you have a clear model of services that you are going to do for every movie that you produce and put out you would want to have a shared sort of vision and content model for every movie to come so this is an example of multi- tendency in the movie world but there are lots of different sort of multi- tendency examples out there um Tim just shared one about L'Oreal you can think of like a music record label um every time they put out and sign a new band They also that is essentially a new brand and they have to you know do all the things that they've done with the previous bands for that that so having a centralized content hub for that in that regard makes this overall process easier instead of spinning up an entirely new thing every single time they create a new movie or have a new band exactly so I think we'll stop for there and maybe let's get into an actual use case that we're going to demo yeah so we have this starter that I made a while back um not that long ago actually which is called Skin Care so I'm just going to put it on here so like I just said I worked with L'Oreal a lot and all these kind of Cosmetics Brands and I felt like there are so many companies um working with this cosmetics and they have this luxury fbe to it so I thought why not make a starter kit that looks like that so this is our skincare starter you can find it here it's on for sale um there's lots of documentation on this thing on our website and also in our community so you can actually join us here in the community and talk about all this stuff when you try it when you clone it all that stuff so CTA is out of the way essentially this is a relatively simple Commerce website that gets its product information from an external API because of course we thought hey what if this scales and we have multiple Brands where does the the data come from for these products well in this case it comes from Federate this which I Won't Go In Too Deep right now but we have built Federate this as basically a static repository API that you can use as a developer to just try out things in high graph so we have a bunch of different things and the skincare products are actually in here and you can see it's a graphql query to get all that so that's how this product stuff comes in here and so this brand is kind of sleek looking it's modern it's open it's like um very specifically targeted to the luxury Market it's very expensive and so the story goes that we just came up with for this demo is the fact that they actually do they it's a small brand like they have four products right three three products in a bundle and they're doing so well that they figured what if we use the same Factory to make the same products but a slightly different packaging but it's the same cost essentially and just look at a completely different Market where we are sure this is going to sell and so we came up with this another F fictitious brand that goes into like a sub niche of a certain genre of people that would probably love this brand and so look shall I show that brand or should we talk about all the multi-tenant stuff first I'm guessing to show it right yeah okay so like Nikki is saying this is basically the economy of scale exactly n right you're just gonna Rebrand the thing that you already have spend the same money but give it to different people so we go from Skin Care to goth skin goth skin yes right because this brand discovers and give fabulous Gods what they need Goths I have to say it with my dut Jackson right because everybody has skin and everybody needs skin care everybody needs exf and especially people that deal with lots of makeup and all that this is goth skin and so we came up with this brand and I and because we used High graph I spent one hour with my colleague Nikki who was in the chat to figure out how to do this and then after that I built this website this morning with the same building blocks so we built like a literally another website another brand inside hgraph in the space of probably two three hours in total of course I had all the building blocks like you can see this Hero has different colors different fonts and things like that but it's relatively similar it's the same yeah exactly because we're reusing just within different front end like this is a routine component here well we have a routine component here as well and this is a product highlighter well that's this one and so I just like Photoshop AI a whole bunch of things to make these lovely images and of course that actually the design of the the create the creative work took the most effort because these things exist and you can see that the the face cream has like a little filter at CSS on it so it looks like a different product but in effect it's the same and so actually I'm using another component that we already have in skincare on this page as well to like explore the range that's not on this one because we could do it it's it's probably on another page right so because these kind of um projects they have they are component driven so component based science means you have a whole bunch of different puzzle pieces that together make a puzzle and you can but you can switch them up right so what's your opinion on how that works what what do you have there and I think like you know this is sort of this stock contrast that you see between sort of the more luxury presentation of skincare versus goth skin really shows like sort of the beauty of multi- tendency right you can make some really radical Transformations while having a centralized service of components that everyone is using every brand is using um and really multiple targeted on yeah fantastic because this these components they're already good so I just made a new brand and like I know Nikki you said hey it's only like one or two hours yes it's that short of course I'm a relatively fast developer and I didn't have to go through the whole process of asking a design creative agency to build me this of course I did it myself myself I just did a quick thing but it's just to show you right and so now that we have these two Brands this not just the front end that counts you know what actually counts a lot more almost is the people working behind the scenes to make this happen content editors need to feel like they can actually deal with this thing in in an easy way without being distracted by complications right we have set up hgraph in a way that we can have multiple users and multiple brands in one project and using permission system now um certain users that in a certain group cannot see let's say skincare but only gos skin or the other way around and so you can make new stuff with the same content models with the same data structures with the same asset selection everything but due to your permissions you can just not see the ones from the other brand but you can use the same structure does that make sense if I say it like that L yeah and then and the great thing about that is like sort of you can create and tailor um like you said that editorial experience where the editors for instance for goth skin only need to focus about you know the brand that they are taking care of which is gokin so they don't their View and their experience is not muddled by content from any other brand they are isolated in that sense yeah and that governance bit is actually very important and so we've come up with I'll just go into high graph now to actually show you some stuff oh refresh to update I'm live I'm just gonna click this let's do it yeah why not we're good we're live anyway as with that as on the side so we want to just show you how we did this in HRA and so there are of course always many ways to do this and we came up with one that might when you dive in there are certain complicated bits but multi teny always has that so we're not saying hey it's harder in high graph than in sitecore or whatever it's always hard however we came up with one that was done with just configuration which can scale because you can actually add another brand or a bunch of other editors and just assign them and it starts working we can make 10 brands in 10 minutes if we want to right and that's the key right like you can configure multi- tendency in a WI variety of ways but doing it in a way that allows you to easily add more as you need is where you want to head yeah and so I wanted to just put this on the screen so to give you a little bit of the visual before we dive into interfaces right so we have multiple Brands and these Brands they have Pages attached right and so I'm just looking at Nik Nikki's comment what is he saying and set and forget approach to mul tennessy exactly yes exactly we'll show you in a sec why this is Saturn forget because it scales like really well so the idea is we have multiple Brands and a brand is a is a data model essentially and it can have a bunch of things attached to it so pages of course because each website has different pages and there can be sub Pages like home about and a PDP means product detail page and later on when this this demo expands it can has search Pages list pages but also like certain data models that are super specific to a brand like the product highlight all go into the page right or below the page and then the brand also has a connection to the brand editor connection data model which has a bunch of editors connected to it which means for one brand I have a bunch of pages and there's a a model that says these editors belong to this brand and so with that in mind we add a bunch of per permissions in the hgraph system so these editors are in a certain role and they can only see the brand that they are attached to right and this is how it was set up and so now I'm actually logged in as the admin so I can see everything because I wanted to first show you all the things and then we go through maybe adding some some content or changing it up yeah so you want to take a look at the schema a little bit and we talk a little bit about that so shall we start with just a brand schema here yes so let me just okay so a brand has a name that's relatively obvious and so we've made it in a way that you have a bunch of different pages and a page is actually a a schema for us so a page is has a slug a title a description OG image and a bunch of components components yeah and we'll show you what components are in a bit and so so we have a brand two-way reference so this page belongs to a brand and in the brand you can see which Pages belong to it so we can have multiple pages per brand and then there's also a record for a brand editor connection so to figure out this brand is connected to this connection model that has a bunch of editors connected to it so that's like this you could almost see it's like a a connection table in SQL not sure I'm supposed to say that in hatler CMS territory but that is the data model idea and then pdps are product detail pages and we also have something called Product folky and so we have a a schema that's called a product Focus that is connected to the Federate this external API that gives you a product we won't go in too deep now because we will lose ourselves in data models and whatever we'll just going to show you in a sec so when we actually have a look to this brand editor connection here here we see there's the name of the connection the brand that's connected to it and all the editors so there's one brand to multiple editors and um that's about it so do you wanna did you w to add something here well just that like so I think even though traditionally like yeah we were just talking about SQL um what we see here is this editor sort of reference that's happening is happening with the users table right so these are users that you assign to the project so that is very similar um one thing is important though like these users that we have we can actually go to our settings and then look at our team members you see so with Tim low we have Nikki who helped us and also me and so we have different like we have brand editors and admins and so um the interesting bit here is that high graph as a system we don't really expose the user objects to interfaces like this wait let me yeah and so yeah we've had to do like one trick with basically our API playground to do a certain query to connect the users to this model so when you doing yourself right sorry it's a mutation right exactly so we we we add this connection as a mutation through the playground through the API and if you were doing this yourself or you have some ideas just come in slack or and just you know just come here and ask us how we did that it's a little too deep for this stream to like do all the queries and find the IDS and all the things that that's a little intense oh and here's Brian and the track is totally possible because the amazing mutations exactly exactly like it's crazy what this playground can do you can look at like different environments different stages there's a lot of stuff you can actually do with this playground that's not this stream but we will definitely do one later yeah I know I use it all the time like no matter what kind of high graph project I'm building it's just such a great space yeah and so let's have a look at like so we have two Brands right so we have the skincare brand and The Goth skin and so we have um and then certain things are just connected to it like and in this case we only have like we have the godkin editors connected and there's no product pages for now just didn't build that yet but we have the we have one homepage which is this one again I didn't spend too long that's why we just have the homepage but we can actually add stuff quite quickly so let me just then now that we we can also look at the skincare one that's a little bit more mature you see it has a bunch of product pages attached has the skincare editors group and a homepage but it could also have an about page and whatever and so now when we look at that brand editor view so we can see that there's an editor for skincare and an editor for godkin and in godkin that's me yes Tim but this is not the account I'm logged in with I'm an admin so I can show you everything but there's um here for example for skincare it's Nikki and so um maybe it's a good moment now for me to log out and log in with that account that is a goth skin editor and then show you what I can see because we are not seeing all these brand fuse and like all this like multiple Pages here you don't see them if you're an editor that's just allowed to go to one place but oh wait before I go there I can quickly but not go too deep show you how it works with these permissions look at the permissions yeah okay beware here we go right this is the absolute power of high graph we have so many permission settings it's almost mindboggling so we let let's not look at let's just get a simple one one let's go to a page page and let's read a page so on all stages which means uh we are in draft or published in all locals so you can do this even per local you can do the French draft version you can do this like it goes that deep and so it looks at the entity of that you know page schema and it checks okay so there's a brand connected to this and in the brand editor condition or the brand editor connection table does my ID that I'm currently at exist in the editor's list of that brand connection of the brand of that page if that ID is there then I can read it right is that maybe the depth we should go to now because if we go deeper like this goes like like maybe yeah I think we should do that and then like now we can show building stuff yeah why don't you show from an editor an editor's view exactly one last thing is so we also decided I did that with Nikki the other day is to add the created by which is me because I could create a page without attaching a brand and then only I can see that and the moment I attach a brand and hit save the other brand editors can also see it so I wanted to do that yeah because that makes sense that you would have a space as a bread edit editor where you first create something and maybe it's not ready to be viewed by the rest of the team or whatever else yeah you need to have like this little autonomy right before it goes somewhere it's it's always really nice as an editor all right let me just log out and loog back in with this this I'm just using my GitHub account here which has different levels of well this is I now a Content editor or brand editor in this project so now when we go back to that project let's see are we here yes we are so in my content I am in the goth skin group right so I can see the brand editor view of godkin because I'm in there but the other one the skincare is gone now because that's not in those permissions and I have a brand view of just my brand and page view of just my homepage that I created here and on it goes and so let's addit this page and so um maybe this might be a nice time um L maybe you want to take that to talk about what components are in hyra so and then real quickly before I get into components in this view you also notice that the brand editor doesn't see the schema because they don't need to and it's taking a space and you want the editor to just be able to focus on creating their content or adding assets which I consider to be a part of their content but you add it in a separate model so that's why that is also there um for the the permission set we didn't touch the assets for now so as a godkin person I can actually see a skincare asset here if we wanted to we can relatively easily just copy paste the things which we just saw and put it in on all for the assets and I can only see the images that are for that brand right which makes sense and then also might be that that doesn't make sense for some reasons maybe there are commonly shared assets that everybody uses for whatever reason for maybe the overarching uh you know company or conglomerate brand or what have you exactly but yeah so components so for this project you'll see there are a few different components there's the hero um there's a product highlight and the hero is sort of can you expand that drop down want to zoom in just a little bit oh yeah I can this and then Zoom yeah there we go there we go yeah so components are great because you can sort of create these nice sort of content repeatable patterns right and a hero is you know what you typically see is sort of these fields here title description and it image and how that ends up getting displayed is you get a title you get a brief description and then you have a big image and it's sort of this very nice content piece right but the great thing about components um and how we have this project structured is components are available to everyone so regardless of the brand the component hero was available to goth skin it's also available to skincare but through entering in content in these components they can transform um and create a hero that is specific to the brand that they manage and that they create they write for right and what is so lovely about the components also is that it's not really a data connection to another schema that's living somewhere on its own is a hero this just works for the homepage so why would you have this as a single Singleton item lift somewhere and connect to it multiple times this just connects to this schema here for this page exactly and so that's why I can just do this hit save and I'll go to my web page refresh it and now it moved down right and if you had this with a separated connection that's a lot more clicks yes this is and it allows you to like experiment right because like a lot of times these are the these are more sort of volatile pieces of content in terms of they change a lot you want to experiment what you have in your hero or what you're featuring at the time yeah let's do it so I can just um well yeah so let's put it at the second spot and now we just call it this is a live stream hero oh I have to type correctly um let's just grab an image and so right now we didn't really do something specific to that oh wait I have to go here and find I had this lovely image that I have to find but it's hard I cannot see them how do you do that oh this one is I had a L'Oreal one that I worked with back in the day that I found yes we shot this in like 2016 and it's just on the website so for now let's take this one um well let let's see if this actually works because it might be overlapping some content on the image because we haven't really set it up properly but let's refresh no no oh I know I know this I know this has oh you didn't publish the asset you have to publish the asset I could set it up by just querying the the other I I could query draft but that's not for this stream clearly this image is not really built for this system but we can we could change that easily but you see how easy that is and I'm actually allowed to just right now select any asset and any copy that I want and it didn't influence the skinc care thing one bit because it's it's completely separated right it's a totally separate thing also I can do whatever I want here like we haven't done this here because it is a demo obviously but in sort of a real world setting probably what you would want to do is set up preview right so if you were changing things like this you would there it is yeah I built that into skincare or now goth care because it's the same code base so it says previous true you see the little um yeah I see it call that like the little lightning here so when I unpublish this last one I have I know I can do that unpublish this document oh I cannot unpublish it that's interesting oh this might be due to my the settings that we set up in ah yes right that's exactly what it is I forgot that you were on the brand editor role exactly maybe as a brand editor I'm not allowed to do that but let's see anyways this is always fun like figuring those things out because permissions are very granular so they're like a power user tool you can do anything with you kind of have to understand them luckily our docs are super super solid so you can find a lot of information about it there um maybe that was just not meant to be I could do it but who cares right you get the gist you get the gist let's clean this up and remove this hero now because it it was not really the nicest thing so can I publish now again you should be able to oh there we go so maybe there's one other thing that I wanted to talk about here in terms of what these users can do specifically to a brand because um when you look at skincare we have this component and this is called a product highlight so this is actually when I click shop this product I'm actually going to the product page and Shop it and but the information that this is this product comes from the Federate this API right but the image title text and all of that is super editorial specific for a Content editor for that brand so what you can do is I actually made this one slightly different than the others there's actually a schema specific for product fuse or for like this is the Highlight one for a product and you can see it has like title description image URL to actually this um product page CTA and a product ID and this product ID is used to fetch the information through content Federation from the skincare products endpoint we not go into what that is now but there's lots of documentation about what content Federation is and how you can use that so this thing just connects to the external system gets the product information shows it on the page and so this one is now branded to goth skin because I can make other highlights um that then are super content edited because I have all this power here but I can also make one for skincare that's different that then these content editors cannot see and so this is a slightly different use case again because this is an actual um you know a schema on its own it's next to the pages for example right so when I go back to my admin account you can see that there's multiple feel like we should do like some when you like switch back and forth I'm just not showing my email now you don't mind I think I might have done but anyways um so now when I'm the product related list you can see there's actually a bunch of them oh no product Focus I apologize you see so there's multiple so there's one for the goth skin but also one for skincare and so these can kind of live on their own and be linked to from other places because this thing is a standalone thing that lives on its own and can be put in different stuff essentially exactly all while having that sort of shared resource of the product coming from from the Federate this API right and that's the cool thing about this I think is that you can create you can make content Transformations while also maintaining a shared infrastructure and in this case it's the products right so all the products are the same it's just the narrative and the story that you've built around the products and who you're trying to Target that you are so you select that same product but you write your own copy and put your own image get it against it for this specific one right and there's also these product items like this and those are always going to G of going to kind of be the same because it's a product list of which ones are fit together well right so that's another type that's a related product list that is literally just this is the simplest thing it just gets data it gets the related product for product ID one and product ID one in this case that's number one one its ingredients of course are snail slime and is is the face serum one so when we go to my related products for product number one I'm getting back face cream and skinc Care bundle well that's our those two right oh those two and so um these things can be relatively Standalone because they're always going to be what relates to another because it's product data that comes from another API so this could be your Commerce engine this could be Commerce layer this could be Commerce tools it could be Shopify it could be big Commerce this is a marketing website that with a bit of e-commerce attached to it that's really composable so you can just get this data from another place and all editors for both Brands can actually find these exactly and then if you update your products let's say um you get more products if you update it in the original location it will also you also up dat here and that's the great thing about this yeah yeah so we can give it to like if we up oops that's not the right one here we go um if we update it here all these websites get all the products instantly and so yeah that's that's what hatless and compuls can do for you right and so um we are like 48 minutes in talking about this complicated stuff what do you still wanted to talk about L do we have something that we still should show um maybe adding a new brand yeah we could try adding a new brand I don't know if we'd be able to show like the front end necessarily now because I could share my screen and show you some code oh wait I think without having to show any code I can go to the playground and show you how we query oh yeah let's do some queries specific to a brand because there's one thing with this setup that I figured out and I was trying to do and I couldn't get it done it's like how can I get the homepage from skincare or goth skin how do I do that and so I thought well I'm going to grab the slug and the brand combine them and just make it work turns out if you want to do a wear clause in graphql for a singular item like a page the wear CL has to be unique the field has to be unique but brand is not a unique field because you can pages with the same brand exactly I was scratching behind the ears of like how would I do that turns out it's actually quite simple now um I just had it and now it's gone how about that oh yeah think because you I click on something yeah I think you closed the we I'm just gonna grab it for my code and copy paste it in here quickly show you because so what we actually did and the graphql heroes here in the code can maybe help me uh maybe there's a better way but the way I found it I'm just going to open my code and find that query quickly uh queries page just copy paste that in here so this is how I did it now I and please in the chat if you know better way we are here to learn just like you we do now a query to all pages where the slug is the slug that I want for my URL and the brand is in this case goth skin or skincare or whatever and so whatever the is Filters down all those because the slug is unique and the brand is not unique so you just look at all pages with the brand godkin and then filter out that slug that I want and then that works really well yeah and then we proceed on with like our regular yeah with our regular content it just works like like a normal query and it's just there you go exactly the only difference is it's not data page that you get back but you get a Pages array with one page in it essentially and um I could actually then do do skin care oh no not like that K right yeah yeah and let's make the other one also variable so we can then do brand oops we're going off the beaten path here but brand is skin care oh it's the brand name so I think it's like this ah so we have to just add yeah exactly so we have to just add this now here live Cod it man we will do it and this is called brand we will build it and then yeah we're almost there this needs to be brand also and now we run it yeah yeah now I just got home skincare from the skincare brand with everything I need it's a little bit zoomed in now so you don't see as much but there you go and so we now kind of filtered down multiple pages to a unique slug with the brand that we just gave in here and that's magic and my friend BBA just joined dude you're a little late but you here hello so buba is like full force like if you want a programmer that understands like full stack this is your man I will tell you this life I don't say this often this dude um um so w you're a little late but we we've done some things today so yes we got into you watch it back or send me a DM and we'll show you maybe just for your benefit we build a brand that is a little gothy and with some littleit you should refresh and not have this bug right oh I turned it off it will be back I promise there we go yeah Ruba I know you will have a few questions but the the the multi- tendency it worked and it's very interesting from a headless CMS um so we still have a bunch of viewers and so anyone in the comments do you have like a specific question on this were we like super clear so you don't have a question or was this like on the top of your head like what the heck you just do because when my colleague Nikki just showed us this yesterday I was like oh we're not never going and I'm just like if I have to debug this thing no now that I've spent like an hour or two in the evening with it I'm good I understand the thing but I once you get familiar with how things are moving exactly so um if there's any questions feel free to ask them now and we will just be able to show you um if not however we can actually invite you to come to our slack because our community is huge and there's lots of bustling and hustling there where people ask questions we have a lovely getting started Channel where you can feel just safe and ask anything that you want um you can also sign up for HRA and actually what you can do is go to and maybe I'll show you this on the screen if you go to I'm just going to Google and see how Google works yes yeah yes that just worked isn't it magic what you can do is actually go here and you can just clone this project so you get skincare just out of the box it just works and you can go to GitHub and um you can just run it yourself and then you actually make an account in that flow so we would love for you to try this stuff out it's all free like the stuff you saw today one or two tiny things were like especially on like the permissions are needed on like a pro account but 99% of the rest it's all works in the free tier so you can you can go fully crazy and try all this stuff yourself and so um maybe one last one I have to add that Banner is the following and it's important what are you gonna add yeah watch it watch it here we go because this is something we work on every day all the time all day changes updates and we know our lovely colleague Rina is in the chat she works her butt off to like make this the best can be she's so fantastic yeah from like videos to like all the things so even like let me show you how what good docs mean if you write them for Google for example watch this look at this there's all the lessons right there Google knows them exactly I didn't even spell High graph correctly and so when you go in if you actually want to learn all those things all the stuff we've just we did a little bit more complex things but to get there all the lessons are here right so when you join our community go to getting started go through this you're good to go yep so I feel like I've done my ctas for today yes you did it you did an excellent job I'm proud of you sometimes need to Market a little and just ask for the obvious is right I feel like we actually have to do that and so um loow any last words for today um just I think to wrap this sort of up about multi-tenancy is some sort of key things to think about if you're trying to get into multi-tenancy um with a headless CMS um some things to think about and a couple of those are you want to make sure that you have sort of clear objectives in your mind about what you're trying to achieve and what that looks like is thinking about um overall what are you trying to accomplish right and what is your use case for this and also before you even get to something like content modeling trying to model out what your actual CMS model looks like right so what are all the potential things that you would need to make this work amongst your different brands and the different teams within the brands for instance um another thing you want to think about is make sure that you start sort of with your content model after you've established these objectives and your CMS model don't necessarily think about um what the front ends need to be or what they are think about what the story you're trying to communicate and what kind of content you need for that um and that goes for both sort of developers and editors alike because this is a group effort and I think one of the great things about multi- tendency and headless cmss in general is that it does sort of encourage that collaborative relationship between um developers and editors building something together to get a product that works for everyone and the last thing I'll say about that is have and think about a clear maintenance plan and uh data governance so how and that goes to what kind of permissions you're going to have how you're going to handle um people making requests for new things um new features and also um change management right because if you are not currently in a multi tendency situation you are going to have to manage a transition and it might you might want to start small of what people are already doing so these are kind of the things that you want to think about ahead of time about what your editors are currently doing and how they're working and how the developers are currently working and how you can sort of slowly transition them into a multi-tenancy situation so I have two things I say preach and continue or the big word is teamwork governance here yes before you do right always I feel like you're on fire should I just remove myself from the screen so I can give you a mon do you feel like you're on enough this no you're good no I'm just very passionate about developers and editors coming together it's like my favorite thing I'm like no you can create Magic together I've seen it like talking about this L'Oreal thing right we looked at this project like okay there's like this $40 million carrot for This Global conglomerate hanging there how are we going to tackle doing this with people from all over the world with different cultures different way of speaking brands that are not to do this because they built their own site why would they want to remove that and have some dudes from Paris rebuild it for you you know what I mean right horrible and so we had to do a lot of human stuff before there so much before we CED the first line totally there is so much of that sort of human relationship Conflict Management that comes into making changes and transitioning into you know even like a new new tech situation or asking people to um potentially give up something right like if you have already built your own digital experience it may be cumbers and hard to use but it's still a thing that you built and so that comes with some fear and anxiety right so you have to manage those things and in our case what was was like I've done a few of those like multi-tenant like huge programs for also other brands I cannot name L'Oreal is the one we can talk about but they were doing these things where okay this company has to make money let's make an internal organ that's going to facilitate this multi-tenancy transformation that we're doing they need to make money because if a a certain part of this organization doesn't make money it has to die that's just how these Brands work they're huge so the brands that they forced to make a new site inside the new multi-tenant system had to pay this internal organ this team that were was doing it but they charged them a ton like and so they first of all had their own site they were managing it they were maybe not that happy but it was theirs and then there was this Central organ inside the same company that said no you're gonna have to do this thing but you're gonna have to pay me like I don't know I'm not goingon to numb numbers but hi but then we as the agency building these sites we didn't get that money so it was like internal movement of like all the funds on top of them not wanting it and then we also had these people that were how do you say like doing the maintenance and the devops of a ton of those projects and they kind of helped out everywhere they were completely out of the game now but they still had to do the approvals of going live but they had to then deal with something like okay I just built this thing I helped them out I'm running it as a def Ops engineer it's awesome so this group of folks from Paris buils this side and I have to approve it I don't like it they were just saging us and these are all the things that you need to think about right because you need to First understand how your system works or how your series of systems or network of systems work yeah and understand how the people are working within them and then figure out a way in sort of that speaks to them right use their own language don't talk about why it benefits you in your position but how it's going to benefit them specifically and then the overall group and move there and don't do it all at once exactly well the thing is look at loreal.com which is like their brand website of all their brands and all these brands have these new websites and it's major success so it can be done it's just I'm B for a reason you know yeah you good it anyways we're going over time because we're having a lot of fun this is it to be a death rail at hgraph right put Romina and Brian our colleagues on here and this our meetings right this is this is a good time and Lily we can actually promote the where we work because we love using this product and anyways we could talk for hours but then I need to drink because it's end of the week here Friday 5: PM so but you have a whole day to go right I do it's almost lunchtime though here right um Mr Sharp I know you're asking some question to Brian he just moved into a meeting so we're looking at high graph and Shopify so on the top of your had low do you know if we have any content currently with Shopify I know our customer um engineers and solution Engineers have some stuff with Shopify yeah I don't know the top of my head but we can definitely find out because I know that that yeah we we like Shopify is is a really great API to use they have graphql they have rest so it's relatively easy for us to integrate it into high graph if we want to so you can just query hgraph and get Shopify data with Federation yeah or we do like oh yeah here look Nikki says we actually do have demos excellent so Mr Sharp if you're still here we will set up a stream for you where we will do this and if you are interested you might join us on that stream and tell us this is my use case and we might just code it together yeah that would be so funes let's try and why not so Mr Sharp feel free to join us in slack so we can just chat and reach out to each other and and make that happen all right awesome I've said slack a many times now I think all right um thank you very much for your time low and the investment in figuring all this stuff out and your presentation and I'll see you guys next time thanks everyone that was so fun I look forward to doing it again have a good weekend everyone cheers everyone byebye bye