Languages

How to Get Started with Sanity CMS

Sanity is a React open-source content management system.  If you're not familiar with the concept of CMS, a content management system (CMS) is a software application that enables users to design, edit, publish, and preserve digital information.

A CMS enables you to build apps without starting from scratch, and it is typically used in web and business content management systems.

Sanity lets us focus on app designs rather than worrying about content file storage and databases. This tool provides efficient methods to create scalable and user-friendly applications.

Prerequisites
Sanity as a Headless CMS
Getting Started
Starting sanity content studio
Creating Schema
Importing custom schema
Deploy Sanity project
Conclusion
Further Reading

Prerequisites

To follow along with this tutorial, the reader will need the following:

A basic background knowledge in programming.
Have Node.js installed.
A code editor (VSCode is recommended).

Sanity as a Headless CMS

A headless CMS is a backend-only content management system that makes content accessible to a user device through an API, eliminating the need for a built-in display layer.

Headless CMS relies on JAMstack, which stands for (JavaScript, APIs, and Markup) to turn your web application content into a cloud-based API, where it can be accessed from any application.

In JAMstack, Sanity is the A, in this case, the (API) as it is decoupled from your app, giving you a single source of truth for your database to model and custom tail the content.

Sanity provides an open-source studio to manage content where the data is stored in a content lake. It supports queries from a CDN using GraphQL, webhooks, and real-time updates.

Getting Started

Setting up our Sanity application - Sanity CLI Installation

To get started with Sanity, first install the Sanity CLI.

Run the command below in your terminal.

npm install -g @sanity/cli

Next, initialize it using the command below.

npx sanity init

Sanity Command Line Interface (CLI)

To work with the Sanity CLI, we need to answer a few questions so that we can create an ideal project structure.

Questions

Sign in with Google, GitHub, or an email address and password.
Fill in the name of your project.
Use the default option for the dataset.
Select a project route.
Choose a blank project with no predefined schema to start sanity.

Starting sanity content studio

Run the command below in your terminal.

sanity start

In your browser tab, go to http://localhost:3333 (Launching sanity)

sanity-studio

Note: Whenever you want to launch sanity, run localhost:3333; this is the default port for Sanity CMS.

Below is what our project should look like with no predetermined data.

sanity-studio

Take a peek at the files and folders that sanity has created automatically, particularly the schema folder.

Creating Schema

Schema is a representation of a plan. It depicts how our database will be structured.

Default sanity schema.js Our sanity default schema.js should look exactly like this.

sanity-studio

By default, we only have one schema.js file. We will need to define our schemas and types as a result.

Create a new.js file to create a custom schema file. For example nameofSchema.js file in the schema folder, inside the file, you will write plain JavaScript code.

See an example in the image below.

import custom schema

Importing custom schema

To use our custom schema, we need to import it into the default schema.js file and declare the type. We can make as many schema files as we need; all we have to do is import them all.

See an example in the image below.

import custom schema

Let us take a look at our sanity studio to see the changes.

sanity-studio

It appears to be different from the initial layout because now we have the content and our first document type, the user.

Go ahead and fill in the username and the image link to publish a new user. We just implemented a database by establishing a schema that provides the ability for users to add new content.

Deploy Sanity project

Go ahead and run:

sanity deploy

To deploy a sanity project. Sanity deployed applications happen in real-time, meaning that any changes you make locally after deployment will be reflected in the deployed version.

You can find the source code here.

Conclusion

We learned how to set up a database and create a schema that allows users to upload new content to the database. Consider how long it would take us to reach this position if we were working on a MERN stack app (MongoDB Express React and Node.js) or any other tech stack to build this. Instead, we can construct sophisticated apps quickly using Sanity because we don't have to worry about the content file or database query.

Happy coding!