Jamstack Explorers

Angular Dynamic Data with Sanity.io with Tara Z. Manicsic

Pre-rendered Angular Template Site

To start us off, we'll take advantage of a template Angular site I've created that has a few pages that will be pre-rendered using Angular Universal.

📓 Resources 📓


[00:00:00] Thanks for joining me on this mission. Today we're going to be using a pre-rendered angular application and then hooking it up to sanity IO, a headless CMS to pull in products dynamically. We'll be using Netlify functions and web hooks to make this work really well together. To start us off, we'll use this template and you can name it, whatever you like and whatever description you like. There's a whole blog post on what and how I've made this a [00:00:30] template that I will post in the resources below.

This one is actually using angular universal to pre-render parts of like this app, shell of your angler application. Go ahead and copy where you have this living and clone it into a local directory. Once we have that all cloned, we can change into the project directory and use NPM-i to install all of the [00:01:00] dependencies. Thanks to editing magic, this NPM install will happen very quickly and we can go ahead and open up our preferred text editor. Today we'll be using VS Code.

Here, the first thing we're going to do is actually change out all the references to the project name, which currently for the project using the template is angular universal pre-render and we're going to change [00:01:30] all of them to angular sanity. Once all of those are changed we can go ahead and run NG serve to make sure that the project is working correctly by checking it out, serving it locally and going to localhost 4200, because it's a good thing to make sure that the project actually works at the very start.

Here are the pre-rendered pages and products [00:02:00] is the area where we'll be populating with the information from sanity IO and we're working so we're off to a good start.

[00:02:10][END OF AUDIO]


your progress