Create an API Backend Using Keystone Headless CMS
Step-by-step guide on developing GraphQL API backend using low-code headless CMS keystone
What Can Keystone Do for You
Developers use Keystone (KS) for building different sorts of apps. Agencies, freelancers, and companies use Keystone as a headless Content Management System (CMS) to create blogs, websites, CMS, and API backend.
I am currently using KeystoneJS to build a CMS for a gaming company. To be honest, I'm blown away by the amount of time I can save and the amount of work I can get done with Keystone. I'm just speechless. @noor_codes
I’m a frontend dev trying to replace an aging wiki website and hopefully, keystone 6 will be the one. @ CapitaineToinon
A CMS is a low code tool for managing digital content generation and modification. As a headless CMS Keystone is much more than a CMS.
It can be used as a production-ready and performant API provider for business apps. It has a set of standardized components that make it simple to create online apps that can be swiftly built, maintained, and extended.
It also helps to build sophisticated websites, and it has a lovely auto-generated admin interface. It's especially well-suited to the creation of large-scale applications.
Running Keystone Locally
KS6 version requires the following tools in your system.
For developing the App, you can use Visual Studio Code (VS Code), or a comparable IDE of your choice.
Init the Instance
You can use
yarn to initialize the Keystone instance. In this example, we have used yarn as the preferred package manager.
yarn init keystone-app app_name
This will create the folder names
app_name and download all the Keystone packages in that folder. Your next command is:
Once you are in the
app_name folder, you can start the instance by running:
Keystone Admin UI
Keystone automatically builds an admin interface (Admin UI), using Next.js on localhost:3000.
On the localhost, this will build the Admin UI pages. When you first use the Admin UI, you'll be greeted with a helpful page that prompts you to create a user.
Create your new user right now. To access the Keystone Admin UI, enter your email address and password. You'll be signed in to a new Keystone Admin UI with two lists i.e. Users and Posts once you've created your user.
Concepts to Know
Before you go any further, there are a few things you should know about Keystone. Let's begin with a discussion of lists and fields.
List in Keystone to represent a type of data. You can think of a
list as a schema. For example, we have a user list in this app. The list explains what information you save about each user and where the fields are used.
We can declare a list in two ways: First, declare one or more lists in a file like
schema.ts. Second, declare a list in schemas\file-name.ts. In either case, they called in
keystone.ts, which is the configuration file for Keystone.
A field is a piece of information about the list (such as 'users') that is stored in the database. For example, in the User list, you might have fields like name, date of birth, email, etc.
The names, types, and configuration of the fields in a list are defined by the fields option of a list configuration. An object containing field names as keys and defined field types as values is sent to this configuration option.
Keystone provides different types of fields:
Scalar field types
Checkbox Integer JSON Float Password Select Text Timestamp
Relationship: A relationship field is used to express a link between two lists.
A virtual field is a value that is calculated rather than saved in the database. In this example, the list of Producers has columns like
Producer Agri (count of producers engaged in agricultural activities),
Producer Dairy, and
Producer Poultry. These fields are virtual fields, showing values calculated from other fields.
To generate virtual fields like those, use
virtual as the field type.
You may upload a variety of file formats to your Keystone system using file types.
Complex types help create documents.
Developing Schema in Keystone
Before moving to develop your first schema you can create a schema folder. It is possible to define schema in
schema.ts file. Alternatively, we can declare schema in separate files and call those schema in
keystone.ts. In this example, we shall create a schema folder using this command:
In the schema folder, we will create a file 'User.ts':
In the file, use the following code snippet.
package.json includes the following npm scripts to run locally:
dev runs Keystone in development mode at localhost:3000
start runs Keystone in production mode
build will build the project and it requires starting to run before
yarn dev and voila. You will get the Keystone running in localhost.