Setting up Canvas

this is Tim from uniform and in this video I will show you how to implement visual canvas which is one of our latest releases essentially in uniform canvas you can compose your experiences by adding components and assigning data to these components either from whatever you type in in uniform or maybe some CMS or a Dam system or Golia whatever you want and so now we made that whole experience visual so it's much easier for Content editors to actually see what they're doing because they are literally content editing while looking at their website which is a big deal it changes the game and so in this video I'll show you how that works on the screen but I'll also show you what code you need to have to make it work so let's go into the browser and I'll show you all right so this is uniform canvas and you can see for the people that know uniform a little bit there's some lovely enhancements done to the interface because we we release every day by now so we iterate a lot um so when I click this this is Now official canvas and of course I had I haven't had any components on my page but what you see in here in this Frame this is my website currently empty so let's add a hero component so this is a basic black and white project because this is supposed to be my personal website in a few weeks I've started clean so this is perfect for our demo so you can see all the slots we have defined in uniform in canvas are actually represented here so this Hero has two slots a title and a CTA so let's add a title so now we're adding a component so let's say Tim's website and you know what I want it to be big sure and let's make this a header one because it's the hero I can actually add another title in that slot if I want and let's make this one medium learn more about me here and so let's make that a head or two and so we've now just seen directly how this works on the page and this this is the actual code that runs my website There's a Hero component with a title component and everything works so let's add a quick CTA let's say about dim and then now we link to our project map because I have an about the page here composition you can see this is now the URL let's save that and now um here we go we have two titles and we have a CTA and there's also this image not found thing here which actually is very interesting because now that you do something visual in your code you can say okay I don't have this field let me just show you something random so you know something's supposed to go there and this is in the case of not having a slot right because if I have a slot let's if let's say if we remove this one then it's literally just saying hey my slot is empty so uniform says add something in here but if you didn't use the slot but just a parameter you can code that yourself so I can actually select an image here go into my cloudinary dam which is an integration I've added so let's look for myself these are all the images that I own okay thematics insert and interestingly now this is actually not working um we'll talk about why that is in a second why not go into the code I'll show you and this is on purpose trust me it's fine no worries here I just did this to be able to show you a feature so let's go into the code to show you um the minimal things you need to get this thing to work we are in the browser now and so as you can see I'm now in slug.tsx this is literally a next 13 out of the box project or next 13 apologies very clean nothing added the only thing that we added on top of this is the uniform starter kit and we try to keep this as light as possible so what you can see here we I'm using server side rendering here you can also do static rendering whatever you want and we've actually created that function with all this complexities for you in a uniform npm package so you can actually go to Canvas next Slash Slug get that package and now we deal with querying the SDK and doing all the things with the composition that you need which makes things very easy right I just say you know what grab the slug parameter because the name of the file is Slug so whatever comes behind the URL is called slug in a variable now in the context of next and you can say you know what do I have preview or not and if it's set to preview true it's grabbing the draft version of your composition otherwise it's the published one and there's a whole bunch of extra stuff here that I commented out now like if we remove this this is all you need to get it to work well there's one or two things that I'll show you in a sec but this when we uncomment that actually then the image starts to work um so you need two more things so as you can see my export default here is the page composition component that I created here so when we have a look at that and this is also in the starter kit by the way you don't have to write this yourself there's a few typescript related things a few Imports and actually here is your uniform composition component and the uniform Slot 4 components where we just put in the two titles the hero all that stuff and the only add other thing you have to add on top is this contextual editing enhancer and that's the word enhancer that's why this image is not working because I need to do some sort of enhancing because the image I got from cloudinary has a bunch of information about that image but I need to map that data so my components understand it and generally you don't have to do this but sometimes if some custom stuff happens you can actually change it and that's why I wanted to show you today so you just grab the create uniform API enhancer from the canvas react package set it up like this and say hey my preview URL is this API slash preview added to your composition and rock and roll so what is this API preview let's have a look at that so what we need to do to put next JS itself in preview mode um you can actually set that up in a preview endpoint in the API in the pages folder and here you can say we have a preview Handler that actually comes from uniform npm package again there's not that much you have to add here and it just grabs the config because we can set a preview secret and if you don't add that secret in uniform you cannot preview so that's for safe keeping basically so people don't see your drafts and stuff and so there's that enhanced thing again so let's just turn that on so anything that's previewed now on your web page when you add let's say that cloud an area image it actually enhances that in the preview action when it updates itself and so then it starts working and so with that in mind let's have a look at that in a sec because we can also you know uncomment this now because imagine in your get server side Prof or your get static Pros whatever function you do generally you do a whole bunch of Ajax calls and you figure things out and then you return a bunch of props well if uniform takes that whole function over from you you can actually not add any custom props right and you can see here I actually want to grab all my navigation items from my uniform project map to make whatever menu right so we have this callback function where you can actually do a bunch of things and then everything returns so in this case if there's a composition that was fetched by this slug parameter I actually want to run that composition through my enhancers so what that does is hey I have this cloud and everything and I need to map that into something else let's run this enhancer and that happens there I'll show the enhancer itself in a sec and also for example I actually want to grab my navigation item so I do that here and then I return these props and whatever is returned goes to the page composition and you're off and running it works so let's quickly check what these enhancers actually do and so this has been described and shown in videos before you can just go to the uniform docs and figure out what they do but in this case I created an enhancer Builder that was looking for every cloud and array parameter type that I have in any component and then run the quaternary enhancer and in this case this is the most out of the box enhancer you can get and you can get that from the the uniform canvas cloudinary package which literally just says it grabs a bunch of data that it gets from cloud and area and it gives you like a whole image stack all the information the ltch The Source set image ID whatever you want and it just Maps it for you and here it's just returning and that's kind of it so let's see now that this is fixed if my preview started working again so let's refresh here and let's add everything oh there it is already we still needed this ETA I'll quickly do that so we have everything in place about them and actually that image just started working it just had to render it from cloudinary and so now that it's enhanced my component knows what to do with it and there you go so this is what I wanted to show you we've really tried our best to make it as light as possible so I didn't even show you any components because your components have nothing to do with uniform they just got props they work so there's this little in-between thing for like your get static pads and your page composition where you add the uniform SDK but that's all you need to do and then the rest your components just work you can do anything else around it that you want and uniform is just a very light implementation and the SDK itself makes all this work um that's it cheers