Sanity Integration

Integration

Startup Pro comes with Sanity.io integration for managing a Blog.

In this part of the documentation, we are going to show you how you can integrate Sanity into the Startup Pro Template and start your blog.

Follow the steps below to integrate Sanity into your Startup Pro Template.

1. Go to Sanity.io and click on the Start Building button to create the project.

2. After you’ve clicked on that button you’ll be asked to log in if you haven’t logged in yet.

3. Once you’ve logged in you’ll be asked a few questions, as shown below. Go ahead and answer them as we did here.

Note: After the project is created successfully you’ll get a Sanity Studio installation command, we don’t need that here. Just close that window and follow the rest of the steps to complete the integration.

4. Get the key from the project: To get the key login to Sanity.io/manage and then go to the project you want to connect. When you go to the project, you’ll see Project ID under the Project name as shown below. Go ahead and copy it.

5. Now add this Project ID to the .env file, to the following variable:

SANITY_PROJECT_ID=YOUR_PROJECT_ID

6. Now, add the following data to the Sanity.config.ts file. We need the TItle, ProjectID, and Dataset of the project.

You can find the Sanity.config.ts file on the root of the template.

7. Go to http://localhost:3000/admin to add the URL. You’ll be redirected to a page that looks like this. Go ahead and click on Continue It’ll take you to your Sanity Projects Dashboard.

Add the URL as a CORS origin.

8. Log in to the studio to start writing. To login go to http://localhost:3000/admin. You’ll be redirected to a login page where you’ll see all the providers you can use to log in.

Choose the provider you want to log in with. We are going to log in with GitHub

9. After you’ve logged in you’ll be redirected to Sanity Studio Dashboard. From the dashboard, you can post Articles and add Authors.

The integration is done!

Let’s go ahead and see how you can add an Article and an Author to your blog.

Create an Author

10. Select the author tab then click on the Create icon as shown below.

11. Add the required data to create an Author. After that click on the Publish button to publish it.

The author is created successfully, now let’s write an article.

Write an Article

12. Click on the Post button then the Create post icon as shown below.

13. Now write the article by adding all the required data like the Title, Metadata, and the Tags.

After that click on the Publish button to publish the article.

If everything is done correctly you’ll see the article on the Blog page.

Sanity API integration

1. Go to the API tab then Tokens after that click on the Add API token button.

2. Fill in the form with the required information.

Name: Give a descriptive name to your API key.

Permission: Give editor access.

Now hit the save button.

After you hit the save button you’ll get an API key. Copy the key and save it to the env file:

SANITY_PROJECT_API_TOKEN=YOUR_API_KEY

Sanity Webhook Integration

Sanity webhook is used for on-demand data revalidation. In this part of the documentation, we will show you how to integrate a Sanity webhook into your project.

Follow the steps to integrate webhook:

1. Create a webhook: Go to sanity/manage and navigate to the API tab then click on the Create Webhook button

2. Fill in the form with information about the hook you want to create:

Name: Give your webhook a name.

Description: Describe the function of your webhook (This is an optional field).

URL: Set the URL to https://YOUR_SITE_URL/api/revalidate

Dataset: Choose your desired dataset or leave the default value.

Trigger on: Set the hook to trigger on "Create", "Update", and "Delete".

Filter: Leave this field blank.

Projections: Set the projections to {_type, "slug": slug.current}

Status: Check the enable webhook box.

HTTP Method: POST.

Leave HTTP headers, API version, and Draft as default.

Secret: Give your webhook a unique secret and copy it.

Hit save once completed to create your webhook.

3. Save your webhook in the .env file under this variable name of your live site.

Note: you can’t test webhook in the dev environment.

SANITY_HOOK_SECRET=YOUR_SECRET

4. Testing the webhook: If you deployed your site on Vercel then you can see the API call on the log if you choose the post method.