Contentstack Live Preview with your own middleware

this is Tim from content stack and let's talk about how you can set up live preview or visual builder in content stack when you have a middleware layer in between your website and the CMS so a lot of questions that we get from our customers and our partners and our developers is hey we built this layer in between the CMS endpoints and the front end so we can control the data a bit more on our end maybe we want to add some more data into it and want to do our own caching this is all very valid with headless cmss right and so at content stack we love doing things in a really agnostic way and a really open way and because of that if you have a middleware layer it's not actually a big problem you can still do the live preview stuff and so let's just you know go over the example that I have here so um this is my code base and well before we go there let's have a look so this is actually that little Code bait here and as you can see this is f Builder and it kind of just works you know I can change you know my images do other stuff whatever I want this kind of just works as live preview or even visual building and so if you see those three items here if you have watched the how live preview Works Under The Hoot video in the same series you know what these mean there's always a hash that is specifically for um the user that you are um editing this stuff in draft mode so we know for you this is your draft mode and this is we have to send to your website and then we need to of course know the uid of the item you're changing and what the type of this is and in this case that's a page so this information if you send this stuff to your middleware and change the url that you're querying or draft endpoint that's all you need to do and it works so let's have a look at the code for a second so in the code here this is a setup in next 15 which is very clean it's there's almost nothing to it other than this is an SSR type project and I have one function here for Content St live preview which is a used client that just in the client s if it's all turn on initializes live preview and what that looks like is actually very simple you've seen this in our other videos if you watch these in this series where we initialize our live preview from our external package H which is this one live preview utils and in here the only thing you have to you know remember is set it to SSR is true because we're going to have to do an SSR call to your middleware which then does its stuff and Returns the information back to us and so we do this through SSR because if we do it in CSR so in client site we subscribe to events directly from the CMS but you cannot do that if you have a middleware so set it to SSR is true and then in your pitch um these are the following things you have to do because in next 15 you get to search params as a promise so we await the headers and then we get the search params so this is live pre preview entry uid and content type uid all of those are always sent to this if frame on the URL so you get those I'm just typing them out here so you can see them and so for now um so if you are not in the live preview settings I just hardcoded this just for this demo sake but normally you get this information and so if live preview is turn on this is my little middleware that I built here this is currently in my own app because why not this is an example but this can be anywhere and so what I'm sending this middleware is the following my content type uid in this case page the entry we are changing and the fact that we have this live preview hash which is this one so these three things are sent to my middleware and if I'm not in live preview it only sends it the uid and the entry so without the live preview stuff and so when we actually go to that middleware um this is how you would normally call our API anyways right you would always set headers for our API key access token create your host name and then just query so this is basically how our API Works um in the description of this video you'll find documentation to the API endpoints um and how those work and so the thing is if this live preview thing is sent then you change the url to the live preview endpoint rather than the CDN and also Al you add this live preview hash this one and you add your preview token the one you have set in your CMS which you can find here yeah let's not save this actually you can go here in your delivery token you see your preview token delivery token and stack API key and the only thing you actually have to do is change the url to the draft API endpoint and add these two headers and that's all you need to do and it starts working and so actually all the changes that we do here every change that's done now it's actually querying the middleware API that queries our draft endpoint this middleware gets the information and sends it back to my code and so you can see that here so this actually just returns whatever that entry Json is and then in the page well this get content function fetches that URL and it returns to Json and that's that's all there is too it and um now you the only thing you literally have changed is the base URL your query and you add two headers that's it um if you have any questions feel free to join us um at our Discord at community. content.com ask any question you have and um happy coding cheers