Angular Dynamic Data with Sanity.io with Tara Z. Manicsic
It's time to start launching Sanity.io!
📓 Resources 📓
[00:00:00] The time has come to add Sanity.io to our project. The first thing we'll actually do is install Sanity CLI tools. We'll do this like we did with the Netlify CLI tools by adding AI for installing -g from which make it global and then we can go ahead and run Sanity and Knit and run through this menu options to create a new project, we're going to name it backend, use the default, the status set configuration, and actually use a clean project where we'll make all the schemas ourselves.
I highly [00:00:30] recommend checking out the other schemas, they're pretty interesting and give you a lot, a lot of information. We'll clear that out once we have that all set up and installed and we'll change into that backend directory and run Sanity start. This is how you always run Sanity locally. Now if we go to localhost 3333, we can see this is that UI that you're going to get from Sanity. I logged in using GitHub. Use your preferred [00:01:00] method.
Guess what? It's empty because we haven't written any of the schemas yet. Instead of writing schemas, we're going to actually deploy our Sanity instance using sanity deploy, where they host it for you, you just give them a studio hostname and it goes and puts it-- If you go to Sanity.io and you can log in or create an account. It will have your projects there. I logged in, again, with GitHub, it's easy. There's backend, [00:01:30] it does exist and it's hosted for you just using that quick sanity deploy process.
You can see the information there. There's the link of where it lives, the project ID and we can actually go to settings and go to API and get some information we need to hook this up to our project in Netlify. We're going to make a new token, we're going to label it functions and we want to give it right privileges so we can read and write with this token, add new [00:02:00] token. I blurred my now, just in case, I like you, again, just don't trust you [chuckles] and we have this token here that we'll want to copy.
Then we'll go to Netlify Open again so that we can go to our project dashboard, but if you have it open, you can just get yourself there and go to Site Settings, build and deploy. We're going to add some environment variables under the environment menu. We'll edit variables and this is where you're going to say sanity_token and paste that token that [00:02:30] we just received. We're going to put the sanity_data set, which is production, which is the default.
Then we will also add the project ID, sanity_a project ID, and you can find this on that page that we were just at Sanity.io. Just scroll up to the top and you see it's right there in that header, we'll copy that [00:03:00] possibly. [chuckles] Then take it back over and paste it there and hit Save. Now we have those environment variables that we can reach from our project to make sure that we can make those queries to Sanity.io securely.
Now, I'll go ahead and clear that out and change your back to the base directory of the project. Before we push any code up, [00:03:30] we want to make sure that we add some things to the gitignore like back-end node modules. Otherwise, it may crash your computer and that can just-- All those things that came in that Sanity skeleton, we don't want to push those up. We'll push the rest up and commit that just to keep on with our Git workflow. With that, we have Sanity set up.
[00:03:51][END OF AUDIO]