Kentico Kontent Boilerplate for Express

This boilerplate showcases how it is possible to combine the Node.js web application framework Express with GraphQL.

The server converts the Kontent Delivery REST API to GraphQL using the Apollo framework and then renders the output using the Pug view engine.

Quick start

Prerequisites

• Node.js
• (Optional) Visual Studio Code

Run locally

1. Clone the repository.
   • git clone https://github.com/Kentico/kontent-boilerplate-express-apollo.git
2. Navigate to the repository folder.
   • cd kontent-boilerplate-express-apollo
3. Install the dependencies.
   • npm install
4. Adjust config.json to point to your localhost
   • "protocol": "http://",
   • "host": "127.0.0.1",
5. Run the boilerplate.
   • npm run debug
6. Open http://localhost:3000 in your browser.

Test queries

With your application running, open http://localhost:3000/graphql and enter following query:

{
  itemsByType(
    type: "article"
    limit: 3
    depth: 0
    order: "elements.post_date"
  ) {
    ... on ArticleContentType {
      title {
        value
      }
      summary {
        value
      }
      teaser_image {
        value {
          name
          url
        }
       }
      related_articles{
        value{
    ... on ArticleContentType {
      title{
        value
      }
     }
    }
   }
  }
 }
}

For more complex queries, take a look at the schema definition generated by Apollo.

Other commands

Debug logging

To run the application with debug logging:

npm run debug

• It is possible to use the Debug server launch configuration if you are using Visual Studio Code for development.

Regenerate GraphQL schema

Schema is generated using the Kentico GraphQL schema generator which automatically generates GraphQL data type schema based on the Kentico Kontent Project ID.

To regenerate the schema, manually run:

npm run generate-schema

How to change Kentico kontent Project ID

• Change the projectId argument value in the scripts section found in package.json
  • This value is used when the schema is regenerated. Basically, when the application is starting or when the generation is triggered manually
• Change the of projectId property in config.json
  • This value is used in the application

How to adjust the boilerplate for different projects

Architecture

GraphQL endpoints are provided by the Apollo Server. Implementation of this server requires providing data and query schema and query resolvers.

• Data schema is generated using the Kentico GraphQL schema generator with the project ID from package.json file and stored in types.js file. This file is generated automatically when the server starts, or manually.
• Query type definition and query resolution are stored in the queries.js file.

Data provided by the GraphQL endpoint is consumed in the controller using the Apollo client and rendered using the Pug view engine.

Adjusting the boilerplate to your project

1. Point the application to your project ID.
2. Regenerate the schema manually.
3. Define the queries type schema in queryTypes constant.
4. Implement the queries by the schema in Query property in resolvers constant.
5. Use the queries to load data to render in controller.
6. Adjust the view template to display provided data.

Release info

Deployment to Heroku configured on Heroku. Credentials to Heroku instance are stored on Kentico Secret server.