DEV Community

Gary Fagan
Gary Fagan

Posted on

Generate Types for Contentful

#contentful #typescript #cms

Manually adding types for Contentful is a cumbersome experience especially when the content models within Contentful itself can be updated. To ensure you have the latest types from Contentful in your application there are a few scripts we can run.

Install the Contentful CLI globally 

yarn global add contentful-cli
Enter fullscreen mode Exit fullscreen mode

Login to Contentful 

contentful login
Enter fullscreen mode Exit fullscreen mode

Install cf-content-types-generator 

yarn add cf-content-types-generator --dev
Enter fullscreen mode Exit fullscreen mode

Update package.json 

{
  "scripts": {
    "contentful:export": "contentful space export --export-dir contentful --content-file export.json --space-id XXX",
    "contentful:typegen": "cf-content-types-generator contentful/export.json --v10 --out types/contentful"
  }
}
Enter fullscreen mode Exit fullscreen mode

Export Contentful Space 

yarn contentful:export
Enter fullscreen mode Exit fullscreen mode

Generate the Contentful types 

yarn contentful:typegen
Enter fullscreen mode Exit fullscreen mode

Summary

Within the directory types/contentful you'll see files of generated types from Contentful that you can now use in your Typescript project.

Other Projects

contentful-typescript-codegen
contentful-ts-type-generator
contentful-ts-generator
TS Content Types Generator App

Top comments (0)

Read next

fabrikapp profile image

How to Make a VS Code Extension Using TypeScript: A Step-by-Step Guide

Fabrikapp -

redbeardjunior profile image

Create a simple search bar with checkboxes

RedbeardJunior -

fabrikapp profile image

How to Use Typed Routes in Next.js

Fabrikapp -

rivea0 profile image

LeetCode Meditations: Linked List Cycle

Eda -