Sanity
SaaSBold comes with a fully functional blog with Sanity. In this part of the documentation, we are going to show you how to integrate Sanity and enable blog into your SaaS Boilerplate.
Sanity Integration
Follow the steps below to integrate Sanity
Initialize a Sanity project: Run this command and follow the instructions on the command line to initialize a project.
Note: we don't need the project created with this command. It'll create the project on the sanity dashboard. You can delete the project folder after the project shows up on sanity.io/manage
Get the Project Name and ID: To get the key login to Sanity.io/manage and then go to the project you created earlier. When you go to the project, you’ll see Project Name and ID. Go ahead and copy it.
Go to http://localhost:3000/studio 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.
Click Continue to add the URL as CORS origin.
Log in to the studio to start writing. To login go to http://localhost:3000/studio. 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.
After you’ve logged in you’ll be redirected to Sanity Studio Dashboard. From the dashboard, you can post Articles and add Authors.
Writing an Article
Click on the Post button then the Create post icon as shown below.
Now write the article by adding all the required data like the Title, Metadata, and 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
Go to the API tab then Tokens after that click on the Add API token button.
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 Webhook Integration
We used Sanity webhook for on-demand data revalidation.
Follow the steps to integrate webhook:
Create a webhook: Go to sanity/manage and navigate to the API tab then click on the Create Webhook button
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.
Save your webhook in the .env file under this variable name of your live site. Note: you can’t test webhooks in the local environment.
Testing the webhook: Go ahead and change the content of an Article and publish it. After that hard reload your website you should see the changes in real time.
Last updated
