Throughout this book, we will build a news and events website and make use of Sanity.io as a structured content framework. We will explore how to create and manage content and new types of content by adding custom fields, defining validation rules for the fields, and customizing Sanity Studio. We will also learn how to source our content to a frontend framework through the Graph-Relational Object Queries (GROQ) Sanity.io query language and GraphQL.
We will host the application on Netlify, which is a platform for automating the deployment of web projects. We will manage our code through the GitHub distributed source code versioning system and connect it to Netlify, in order to trigger automated deployment every time we add a new feature to our code repository.
This chapter will cover the following main topics:
You will require the following things to understand this chapter:
The code for this chapter can be found at https://github.com/PacktPublishing/Jumpstart-Jamstack-Development/tree/chapter_two.
The first step required is to create an account on the Sanity.io website (https://www.sanity.io). A Sanity account may be set up at the start of the project creation. The three different methods for creating an account are with a Google account, a GitHub account, or simply with an email and password. Next, we create an account on the Netlify website (https://app.netlify.com/signup). There are four methods that may be used for account creation: GitHub, GitLab, a Bitbucket account, or email and password. We will be using GitHub as it is the most convenient option. Finally, if not already created, create an account on the GitHub website (https://github.com/join). A username, email address, and password are required.
At the time of writing, all three services use the freemium model and thus provide a generous free plan for use with small projects.
Sanity.io is a data storage service where you can manage content, making use of Sanity's Application Programming Interfaces (APIs), tools, and libraries. You can easily build a centralized content repository for your projects.
Sanity at its core is the data store and its query language is GROQ.
Sanity's content is stored and accessed via its data store, which is accessible using either the Sanity.io client library or via a HyperText Transfer Protocol (HTTP) API call. Sanity.io manages the data store, which is cloud-hosted.
GROQ is a query language created by Sanity. It is used to retrieve information from the data store. GROQ is easy to learn and powerful—for example, different sets of documents can be queried into a single response.
Now that we have a high-level overview of Sanity.io, we will create our first project.
The Uniform Resource Locator (URL) for Sanity.io project creation is https://www.sanity.io/create.
Click on the Create project link, as shown in the following screenshot:
You cannot have any spaces in the name.
Optionally, you may set it as a private repository. On each git push to the remote repository, the website will be automatically redeployed, as illustrated in the following screenshot:
Once the project is created, Sanity will deploy two web applications to Netlify.
The first web application is the frontend website driven by Gatsby that connects to the Sanity-hosted backend.
The URL structure format is as follows:
The other web application is Sanity Studio, where we can manage the content. The URL structure format is as follows:
You can see that it takes the form of project name, a dash, the word studio, and then the Netlify domain.
Let's start exploring Sanity.
After logging in, you should be able to see a list of your projects. From the top menu, you will also have the option to create a new team and the option to create a new project as illustrated in the following screenshot:
Click on the project's rectangular block, and let's have a look at the project pages.
From this section, you can manage your Sanity.io project. Under the top menu, you can find the section with project’s Sanity Studio details such as URL, PROJECT ID, and PLAN will always be visible across all the pages of the project as illustrated in the following screenshot:
Under this top menu, there is a second-level menu with various aspects of the project, as illustrated in the following screenshot:
There are five sections to be explored. Let's take a look at each one in turn.
There are currently seven charts available, with the following data:
Document used (a donut chart)
Assets used (a donut chart)
Bandwidth (an area graph)
API Requests (an area graph)
API CDN Requests (an area graph)
Documents (an area graph)
Assets (an area graph)
Bandwidth, document, and request statistics are updated once every hour. Asset statistics are updated once a day.
On the Members page, all members of the current project are displayed. Here, users may invite and remove members, depending on their role. When adding a new member, they may choose the type of access level for this member.
From this section, you may view and remove datasets. Datasets are where data is stored. A project may have more than one dataset, depending on the project's needs. The Developer account is limited to two accounts.
General settings include the following:
You can also disable or delete a project. When you disable a project, it can be re-enabled at any time without data loss.
From this section, you may also view and modify your current plan. Depending on your needs, you can choose a different plan. For this project, though, the free plan Developer is amply sufficient, providing up to three users.
Let's explore the API settings, in the following subsections.
In this subsection, you can add and remove hosts that can connect to the project API. The localhost:3333 host is automatically added. localhost:3333 is our local development environment URL. The Gatsby application URL and Sanity Studio application URL hosted on Netlify are also automatically added to the CORS Origins list.
In this way, we allow our local development environment and the applications hosted on Netlify to access our Sanity API.
Every time we want to let a new application communicate with the Sanity API, we do this by simply adding the application URL to our CORS Origins list, which is as follows:
Now that we know how to change the configuration of our application, let's see how we can add content through Sanity Studio.
Throughout this book, we are going to extend this functionality by creating a news and events website, adding new types of content and new types of fields.
We will manage the application settings and content from Sanity Studio.
The first screen contains the Sanity Studio Dashboard, where there are some useful widgets that we are going to explore now.
Clicking on the Pencil sign will open a pop-up where you can choose to add a Blog post, an Author, or a Category.
From the Search field, you can look for any Blog post, Author, and Category.
Dashboard and Desk are the two main sections of the application. Let's discuss these in detail.
In the Dashboard section, we have shortcuts divided in blocks that link to all the sections included in Sanity Studio.
This block lists the Netlify sites created for a project. We can click View or Admin to perform operations on our application. If any website content is changed, a deployment may be triggered by clicking on the Deploy button.
Sanity Studio is the application we are currently using, and Blog Website is our blog application.
Basic settings include the following:
As with the Blog posts and Authors sections, it has a few predefined fields, namely Title and Description.
In this chapter, we were introduced to Sanity.io. Through Sanity's Create tool we have created a new application hosted on Netlify using the Sanity user interface, and we have hosted our code base on GitHub. We explored how to manage a Sanity application and Sanity Studio's Dashboard capabilities.
In the next chapter, we will explore the example content, and learn how to delete, modify, and create new content using the Sanity Studio Desk.