Content Management System with Grape JS and Keystone JS

What is KeystoneJs?

KeystoneJs is a content management system, built with Node.js and it uses Express.js for its backend and MongoDb or PostgreSQL database for its storage layer. It is a true competitor for Wordpress.

Keystone.js also has GraphQL support which means we can quickly define schemas and GraphQL engine will take care of integration with PostgreSQL or MongoDb. As it supports both MongoDb as well as PostgreSQL, it allows you to choose between these two databases for its storage layer. In simple words this means that it allows you to choose between a relational and a non-relational database.

One of the coolest features of Keystone is that whenever a keystone processes a keystone list, it automatically converts it into a series of GraphQL CRUD operations. How does this help? You don’t have to write a lot of code. This feature makes a developer’s life a lot easier.

KeystoneJs Admin UI automatically changes based on the list. A keystone list is a model and a model is basically an entity of our application. All the data can be created, updated, and deleted via the Admin UI.

What is GrapeJs?

GrapesJS was mainly introduced to work with a Content management system to speed up dynamic creation and replace WYSIWYG editors. WYSIWYG is good for content editing but inappropriate for creating HTML structures.

GrapeJS lets you create templates without the knowledge of coding, GrapeJs allows you to create a HTML page by just drag and drop. So, if you are a non coder than GrapeJs will be able to solve your problem as you have to just drag and drop the blocks. A block is basically a reusable piece of HTML that you can use for e.g. a button , image ,forms, frames.

So, every CMS you use mainly contains HTML, and it has been saying that everything you can imagine as a set of elements like <tag some attribute> content..</tag> you can create a GrapesJS builder around it and use it independently in your application.

Advantages of keystone-grapesjs-editor:

1. The main goal behind using GrapeJs inside KeystoneJs is to create dynamic templates.
2. As GrapeJs was introduced to replace WYSIWYG editors because they are not appropriate for HTML structures, and GrapeJS provides a fantastic job for editing templates with just drag and drop.

Post all that theoretical knowledge, it’s time now to actually implement the technology.

Requirements:

1. NodeJs >=10.x.x
2. NPM >=6.x.x
3. Keystone>=5.x.x
4. Mongo

Integrating KeysoneJs-grapesjs-editor within keystone project

• Install the package:

npm i keystonejs-grapesjs-editor

• Import this package, should be imported where you want to define the keystone List.

const GrapeJsEditor=require(‘keystone-grapesjs-editor’)

• This imported package now can be treated as the type of field like any other field.

fields: {
  content: {
    type: GrapesJSEditor
    }
 }

This step creates a GrapeJs Editor field in our list. Next and last step are to pass config if they are required.

• So, here is the last step in integration. This is not required but if needed there are few Configs we can pass to this field to use it more.

1. css: An array of css files which need to be loaded on the editor to show pages compatible with other pages.
2. apiUrl: Asset manager in GrapeJs uses config for uploading as variable “upload” to be passed as “false”. It is used as the default saving mechanism of assets [conversion of image in byte array]. To override this behaviour we can provide an endpoint handling our file management, apiUrl value is passed to the upload of assets configuration.
3. staticFolderUrl: It is basically the path of the folder in which all the files will be read by GrapeJs assets manager in case the default upload behaviour is overridden.

Note: Use staticFolderUrl only if you want to override the default behaviour for uploading assets, always use staticFolderUrl with apiUrl variable only.

• These configs are not required; these configs are to be passed in a variable called adminConfig. Below is the example of how to use it.

fields: {
   content: {
     type: GrapesJSEditor,
     adminConfig: {
       "css": [],
       "staticFolderUrl": "/uploads/"
       “apiUrl”:”https://endpoint/upload/assets”
     }
  }
}

After successful integration GrapeJs, a GrapeJs button option will be shown in the fields option:

Note: We also added code editor after drag and drop, if you want to customise CSS or HTML you can do it here.