Unlock the Power of Keystone.js: A Flexible Alternative to Traditional Content Management Systems

The Advantages of Keystone.js

Keystone.js offers unparalleled flexibility, allowing you to customize your CMS while maintaining a lightweight codebase. With Keystone.js, you can define schemas and leverage the power of GraphQL to integrate with your chosen database. This means you can choose between a relational and non-relational database, giving you the freedom to select the best fit for your project.

GraphQL generates a set of useful queries related to CRUD operations, saving you time and effort. This innovative platform provides a cutting-edge CMS built with Node.js, Express.js, and a MongoDB or PostgreSQL database.

Building a Movie Rating App with Keystone.js

In this tutorial, we’ll demonstrate how to build a movie rating app using Keystone.js. You can download the full code for this project from our GitHub repository: https://github.com/placeholder.

Getting Started with Keystone.js

Before you begin, make sure you have the following requirements:

• Node.js version 10.x or higher
• Yarn stable version
• MongoDB version 4.x or higher

Next, ensure your MongoDB instance is running. Then, create a new Keystone application using the keystone-app command.

Step 1: Project Setup

Create a new Keystone application and answer the prompted questions. This will generate an empty template with the following application structure.

keystone-app my-movie-rating-app
cd my-movie-rating-app

Step 2: Create the Data Model

In this step, we’ll create our data schema. First, install the @keystonejs/fields dependency and import the required types.

yarn add @keystonejs/fields

Then, create the movie rating schema with two properties: title and rating.

import { list } from '@keystonejs/keystone';
import { text, integer } from '@keystonejs/fields';

export const Movie = list('Movie', {
  fields: {
    title: { type: text },
    rating: { type: integer },
  },
});

Step 3: Start Your Project and Explore

Start the project and explore the Keystone Admin UI, GraphQL Playground, and GraphQL API. Add a new movie to the list and assign a rating. Then, try to add the same record again to test the isUnique property.

The Power of GraphQL

Keystone.js processes each defined schema, creating GraphQL CRUD operations and associated queries. We can use these queries to change or access data in MongoDB.

Step 4: Create an Interface

Build a simple static HTML website that interacts with the movie rating schema via the GraphQL API endpoint. Add the @keystonejs/app-static dependency and create the public folder with the necessary files.

yarn add @keystonejs/app-static
mkdir public
touch public/index.html

Step 5: Add Script Logic

Add the script logic to interact with the GraphQL endpoint and load data. This will create a simple website with a form that allows users to create new movie ratings and display all submitted ratings.

fetch('/api/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ query: '{ movies { title rating } }' }),
})
 .then(response => response.json())
 .then(data => console.log(data));

Step 6: Final Testing

Restart the application and visit the interface. Try to add a new movie and verify whether it’s added to the movie ratings list. Then, try to delete a movie by clicking the trash icon. If everything works correctly, you’ve successfully built your first movie rating application with Keystone.js!

Monitor and Optimize Your GraphQL Requests

Use a monitoring tool to monitor failed and slow GraphQL requests in production. With this tool, you can aggregate and report on problematic GraphQL requests to quickly understand the root cause.