Angular Dynamic Data with Sanity.io with Tara Z. Manicsic
Sanity.io + Netlify Build Hooks
We can now see our data on the live site. Let's make it update the site as soon as we enter new information into Sanity.io. For this, we need to add a Netlify Build Hook and set it up in Sanity.io using the cli.
📓 Resources 📓
[00:00:00] Now we'll check out our code live and also add a webhook so that we can add things to sanity.io and have them immediately be updated onto our live site. To start out, we'll run the file open so that we can get to our dashboard for our project. Once that new version is published, we can head over to the website and go to the product section where we get a glimpse of the loading products, loading template, ng template. Then we see that, yes, our products [00:00:30] are all there where we want them and have the correct information.
Now we can actually add a webhook for sanity in our Netlify product dashboard by going to site overview, site settings, scrolling down to build and deploy, and then scrolling down this list to find build hooks. We just need to add one here and we'll name it angular sanity, name it whatever you like, which we'll work on the main branch.
Copy that link. [00:01:00] Then we will head back over to the terminal and take advantage of sanity's UI tools by going back to the backend where our sanity project lives and writing sanity hook, create. This will bring up a menu where we will set the hook name, which we'll call Netlify, who's production as the dataset that we want to use, and then paste that hook URL that we got from our Netlify dashboard. With asset, we can head back over to the browser, go to sanity.io, log in [00:01:30] and go to the live version of our backend, which again is a studio that we deployed the sanity, and we can add another product to our CMS.
We'll go to product, we'll hit the little add edit button. We can get another look at the UI that was made from the schema that we built. Just by setting a title, we know that we're passing in a string here, and [00:02:00] slug will actually when we take it that we can generate it and we are generating it based on that title. These are all things that got set automatically when we're making those schemas. The default variant, again, is see that subsection of the product, and that's how it's laid out in the UI.
We have title, price, which is a number, and askew, and because we edit image, we automatically get this upload interface in our UI that people can select [00:02:30] and do some edits. There's a lot more that you can do in there as well if you want to check out sanity a little more after this course. Then we also are able to add those tags. That section right there, we'll move them around. We can go ahead and add another one, and you can see that just with the way that we made the schema, sanity takes that information makes us UI, gives us functionality, like moving them around, giving you a trash can.
You can make a little [00:03:00] blurb. That is a string. Again, what's really nice about the DX of having a headless CMS, people that are used to filling out a form in a UI will get this kind of interaction that's really nice and quite easy to understand, whereas we're able to write the code for those schemas in the backend, in code push all this information up via GitHub. Again, this is the body. This is the body to block HTML [00:03:30] kind of work that we did.
I just grabbed some Sagan ipsum, highly recommend it. but they're able to have this text editing functionality just with those few lines of code that we had written. We can hit publish. We see that the document is now published and we can head back over to our project dashboard. Can head to a site overview and see now that we have a deploy building, that was triggered by the hook [00:04:00] angular sanity.
We have that information right there in our dashboard, which is really nice. If we go back to the live site, go to products, there is our new edition. With that, you've done it. You have made a pre-rendered angular application that is using the headless CMS, sanity.io Netlify serverless functions as well as webhooks to get all your information on the page as soon as you add new information. Congratulations [00:04:30], I wish you continued success on your future missions. Hope to see you on the path to your Jamgular future. Thank you so much for joining me.
[00:04:43][END OF AUDIO]