What Is KeystoneJS?
Keystone is a free and Open Source Node.js headless CMS (Content Management System). A headless CMS is a back-end only Content Management System that makes content accessible via an API.
What Does Keystone Offer?
Keystone takes a schema defined using a set of Lists with one or more Fields each of certain Type, and automatically generates an Admin UI App and a GraphQL App. To further explain this, let us look at an example of a Keystone schema that defines a List of Students, with each Student having a number, and an enrolment date.
Keystone.createList(Student, {
fields: {
number: { type: Text },
enrolmentDate: {type: CalenderDay}
},
});
Given this definition, Keystone will automatically create the following:
- An Admin UI App that allows the creation, viewing, modification, deletion, of Students records
- A series of CRUD (Create, Read, Update, and Delete) GraphQL operations for all the Lists in the schema (e.g. mutations for creating a new student, updating existing student, deleting a student; and queries for getting all students or a particular student)
- A GraphQL API that can be accessed by a front-end application built by a technology of your choice
Any update made to the schema in the form of additional Fields, entirely new Lists (e.g. a List of Courses) etc. will automatically be reflected in the Admin UI, the generated CRUD operations and the GraphQL API as soon as the project is relaunched.
What About the Front-End?
In addition to the Admin UI App and the GraphQL App, Keystone can also provide a Static App, a Next.js App, or a Nuxt.js App that can be used to serve a front-end for your project. However, another alternative that is popular for providing a front-end for Keystone apps is the decoupled approach. In this approach, the front-end is completely separate from the Keystone app, and is built with the developer’s preferred technology. The front-end is then connected to the Keystone app through the GraphQL API generated.
How Can I Get Started?
You can try out Keystone yourself by checking out the getting started page on the Keystone site, Keystone’s documentation, and its demo projects on GitHub. The requirements for creating Keystone projects are Node.js (v10.x or higher), and access to a configured MongoDB (4.x or higher) or PostgreSQL (9.x or higher) database. Once these are in place, you can have a go at creating Keystone projects using the CLI command npm init keystone-app. You are then prompted to choose the type of project you want to create i.e. either a blank project or a sample project.
Summary of the Benefits of Keystone
If you are still unsure about trying out Keystone, here is a list of the benefits it provides (those discussed above and those that were not mentioned):
- Auto-generated Admin UI for efficient content management
- Auto-generated GraphQL API to connect to your front-end application (built using React, Vue, Angular or any other framework of your choice)
- Auto-generated GraphQL operations on all your defined Lists
- Can provide apps to serve your front-end site
- Supports user authentication and access control (for Admin UI and API)
- Has inbuilt Fields for various data types, and supports the creation of custom Fields
- Supports relationships between Lists
- It is free and open source, with support available on GitHub and its Slack Channel
- Its easy to get started with, and can be extended for various use cases
- Has sample projects that can be used to scaffold projects
In the next article, we look at creating, and deploying Keystone apps; and connecting to a front-end app.
