--- title: "Setting up Project map" description: "In this video @timbenniks shows you how to get started with Project Map and what type of SDK functions you can use to render a navigation or a sitemap for your website. Want to know more? Visit https://uniform.dev or" date: "2023-07-20T07:57:29.000Z" url: "https://timbenniks.dev/videos/uniform/010-krctdwmf9fg" youtube_url: "https://www.youtube.com/watch?v=KrCtdwmF9fg" playlist: "uniform" image: "https://i.ytimg.com/vi/KrCtdwmF9fg/maxresdefault.jpg" tags: ["composable-architecture", "cms", "api-design", "frontend", "developer-experience"] --- # Setting up Project map In this video @timbenniks shows you how to get started with Project Map and what type of SDK functions you can use to render a navigation or a sitemap for your website. Want to know more? Visit https://uniform.dev or Watch on YouTube: https://www.youtube.com/watch?v=KrCtdwmF9fg ## Transcript this is Tim from uniform and in this video we will be looking at how to get started with project map a feature we just released so a project map is kind of the central place where all your compositions and URLs come together you can it's basically like a tree with sub items and you can kind of organize your project and all your URLs like an actual sitemap and we've built this because in modern headless systems where you compose with different headless tools there is not such a central organ to figure out where things go and generally all these URLs get hard coded in the front and somehow or it's kind of a developer who has to deal with it how do you make a sitemap XML from different CMS systems and maybe some you know Bim system or something like that complicated stuff so with a DXE having a project map you have much more overview of where things are so let's go into the browser so show you how it works so this is a project called operation turbo 2023 which will be my new personal website so in canvas I have not added a project map just yet we'll do that in a second and so in my component Library I already have a page which is a composition the and there's also already a home page that is just there um that works but it's not attached to a project map just yet and it doesn't actually have a slurk or an identifier to query so let's just create this project map and we'll go from there so let's do this this is my website so we're going to make a base URL and this is Operation turbos project map let's go and so what you start off with is basically a route that is empty at the moment so there's nothing attached to it it's just a thing that sits there as your base so what you can do to get started if I already have a composition right so I can actually hit edit and say you know what this node type is a composition and let me just grab an existing one so let's connect this up now and so now we've connected our current composition that existed to our root node so let's have a look at that composition to see how it works and so what you can see here is that this one has like some parameters for home for like a title description or gtag stuff like that and there's a home um hero component and so while this loads I know it's not working as I'll tell you why in a second um we'll fix that look at this so it's attached to the root node so you can detach it or add another node or do a bunch of things with your project map here for now we don't have to do much because it's already connected um so let's fix this error here so this is happening because my code is now querying get composition by root node and then a slash right because it's the slash root however it doesn't know which project map it has to look at because we can add multiple project Maps if you want so what we have to do is go to settings canvas settings and actually find the ID of our project map and add that to my code base so let's go to environment variables this is the previous one I had so let's add that in my other environment variables are below when I scroll down um but you don't need to see these anyways let's reset the code so it picks up the new environment variables and so now it should be able to actually render that page but before we go into that why don't we just add a few different types of nodes and sub nodes to see how that all works so let's actually add a new page into that route and make a new page and call it um well let's go let's call it about dim and so now it will create a new composition from a page and added inside that node so here's about them inside and so you see now that error is gone because we've added that ID to the code so let's just say about Tim and then here let's add a hero component and also call that about them so you see that just um got in there so when we have a look at how this works it's attached to the route dim root node so there are some other ways we can also add other nodes so let's just add one after it but this one let's make it a placeholder because um sometimes you might have URLs that actually point to other parts of your architecture that might not be covered by uniform or a dxa and so you can make it a placeholder and maybe later on add something but at least this is now a path segment of your url because we can actually add something into this and let's call it um let's all call it a blog post or something and so what you'll see now that this is actually attached to placeholder which is nothing for now slash blog post because potentially what you might want to do on that placeholder URL in your next or next application add something yourself and when you go to blog post it then actually queries again from uniform so this one is attached here and so here we can also just quickly add something here blog post all right so we've now added a whole bunch of different types of nodes here so um what is actually interesting is that you can query these through a new npm package that we created because you might want to build um your navigation for example so let's go into the code and I'll show you how that works so this is a clean next 13 uniform starter so I've chosen to use get server side props here I'm rendering this on SSR because why not you can also do that differently and so I have created two functions in like a little canvas client file I have so you can get the composition and actually you can get navigation items and this is the one we're interested in if you want to know how to query a composition you can go to the docs at docs at uniform.app or join us on Discord and ask around you can go to uniform.2 Discord anyways here this is our navigation items function and just like um how you use the canvas client creating a canvas client to be able to query compositions and stuff like that you can also make a project map client which is a separated package which means you can use uniform without this we suggest you use this with it because it's much nicer but so the packages are actually separated and in here are a few different types of functions right in that client you can get all the nodes you can also actually get sub nodes or a sub tree of a node and you can also get the project map definition or if you have multiple project maps all their definitions if you want to know about all these functions you can actually just go to and have a look at our typescript so you can see all these different functions here right so you can get the sub tree all the nodes all the definitions for this demo however I just went to let me give me all the notes doesn't matter what which if it's a sub tree or not and get me the definition of this project map so I get the base URL and the name and the ID and stuff so it returns these two properties so um as you can see here my get server side props does all these functions and it returns my composition my notes and if I'm in preview mode or not and these props are given to a page composition function that is just um ease of use so that com that function just contains all the things to render a page and so as you can see nodes are given here however I I'm not using them so it's great great out so how about we just put them here let's just render an old school Json to see how that looks here we go so now when we go to the home page or any page actually it just grabs all these navigational nodes let's go to the root and let's have a look what this actually gives us there we go so our definition is an array of maps currently this is the only one so of course it's the default one but you get your base URL and you get like the name and stuff and here are all the notes and you can see there's certain different ones like placeholder doesn't have a composition ID attached to it right because it's a placeholder and then some of them are sub items of placeholder so in this case it's placeholder blog post and then here you can also see there's a composition ID attached so with this information you can build your navigation you can build a sitemap XML file you can do a whole bunch of things that you know have something to do with URLs so let's remove that and go to the next thing I want to show you because if you actually have all this stuff write all these nodes the beauty is now that you can link compositions together through these nodes so you no longer have to type a slug and hope for the best you actually select from your project map so let's fix that so let's go to the root and in this home page or like this Hero Let's just add a field that's the link all right so we can just go to our definition because we've actually added a new parameter that you can add to any component which is the way to link so let's add one and just call it link and then in here we have a project map link parameter type all right that's added and now we go back and in the home page now there's a new field called link so configure the link and this is actually my whole project map So currently we are in route so let's go to about team and it's it's create your URL for you so you can see what's going to happen and then when we hit save right now in the hero component I'm just showing you Json again and so you get which project map it is the node ID inside the project map and then what the path is so you can also if we edit this and we take one that's much deeper inside the placeholder for example you'll see that you actually get the full path here and so if I now wanted to add like another field that says button title or whatever I could add that here and then use this path or whatever the ID whatever you want to do and do something with that link and this is much easier for Content editors to be able to just select it so let me quickly show you that hero component to know how we actually got that information so we actually have component props type from uniform in with a title and the link the link is given I'm literally just showing you this object it's very very simple so this is what I wanted to show you as you can see there's not that much code to it to figure it out if you are interested and you want to chat about this like how do I get started all that stuff you can go to uniform.2 Discord and join us there and you can also look at our documentation at docs.uniform.app and that's it