Unlock the Power of Keystone.js: A Flexible Alternative to WordPress
Are you tired of the limitations of traditional content management systems? Look no further than Keystone.js, a cutting-edge CMS built with Node.js, Express.js, and a MongoDB or PostgreSQL database. This innovative platform offers unparalleled flexibility, allowing you to customize your CMS while maintaining a lightweight codebase.
The Advantages of Keystone.js
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. Plus, GraphQL generates a set of useful queries related to CRUD operations, saving you time and effort.
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.
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.
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. Then, create the movie rating schema with two properties: title and rating.
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.
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.
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 LogRocket to monitor failed and slow GraphQL requests in production. With LogRocket, you can aggregate and report on problematic GraphQL requests to quickly understand the root cause.