contentful

What is contentful?

The contentful npm package is a JavaScript client for the Contentful Content Delivery API and Content Management API. It allows developers to fetch and manage content from Contentful's content infrastructure, making it easy to integrate content into web and mobile applications.

What are contentful's main functionalities?

Fetching Entries

This feature allows you to fetch entries from your Contentful space. The code sample demonstrates how to create a client and fetch all entries.

const contentful = require('contentful');
const client = contentful.createClient({
  space: 'your_space_id',
  accessToken: 'your_access_token'
});

client.getEntries()
  .then((response) => console.log(response.items))
  .catch(console.error);

Fetching a Single Entry

This feature allows you to fetch a single entry by its ID. The code sample shows how to create a client and fetch a specific entry.

const contentful = require('contentful');
const client = contentful.createClient({
  space: 'your_space_id',
  accessToken: 'your_access_token'
});

client.getEntry('entry_id')
  .then((entry) => console.log(entry))
  .catch(console.error);

Fetching Assets

This feature allows you to fetch assets from your Contentful space. The code sample demonstrates how to create a client and fetch all assets.

const contentful = require('contentful');
const client = contentful.createClient({
  space: 'your_space_id',
  accessToken: 'your_access_token'
});

client.getAssets()
  .then((response) => console.log(response.items))
  .catch(console.error);

Content Management

This feature allows you to manage content, such as creating new entries. The code sample shows how to create a client and create a new entry in a specific content type.

const contentfulManagement = require('contentful-management');
const client = contentfulManagement.createClient({
  accessToken: 'your_management_access_token'
});

client.getSpace('your_space_id')
  .then((space) => space.createEntry('content_type_id', {
    fields: {
      title: {
        'en-US': 'Hello, World!'
      }
    }
  }))
  .then((entry) => console.log(entry))
  .catch(console.error);

Other packages similar to contentful

prismic-javascript

Prismic is a headless CMS similar to Contentful. The prismic-javascript package allows you to query content from Prismic's API. It offers similar functionalities such as fetching entries and assets, but with a different API structure and query language.

strapi-sdk-javascript

Strapi is an open-source headless CMS that provides a JavaScript SDK for interacting with its API. The strapi-sdk-javascript package allows you to fetch and manage content, similar to Contentful, but with the added benefit of being open-source and self-hosted.

README

 

contentful.js - Contentful JavaScript Content Delivery Library

JavaScript library for the Contentful Content Delivery API and Content Preview API. It helps you to easily access your Content stored in Contentful with your JavaScript applications.

   

   

What is Contentful?

Contentful provides content infrastructure for digital teams to power websites, apps, and devices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for structured content, powerful management and delivery APIs, and a customizable web app that enable developers and content creators to ship their products faster.

Table of contents

• contentful.js - Contentful JavaScript Delivery library
  • Core Features
    • Supported browsers and Node.js versions:
  • Getting started
    • Installation
      • Using it directly in the browser:
      • Legacy browsers:
      • React Native & Server Side Rendering:
    • Your first request
    • Using this library with the Preview API
    • Authentication
  • Documentation & References
    • Configuration
    • Reference documentation
      • Legacy contentful.js documentation
    • Tutorials & other resources
    • Troubleshooting
    • Advanced Concepts
    • Migration
  • Reach out to us
    • You have questions about how to use this library?
    • You found a bug or want to propose a feature?
    • You need to share confidential information or have other questions?
  • Get involved
  • License
  • Code of Conduct

Core Features

• Content retrieval through Content Delivery API and Content Preview API.
• Synchronization
• Localization support
• Link resolution
• Built in rate limiting with recovery procedures
• ES6 modules / bundler support (since v5.0.1 - 17. October 2017)
• Supports Environments (since v6.0.0 - 06. April 2018)

Supported browsers and Node.js versions:

• Chrome
• Firefox
• Edge
• IE11 (with legacy version of the library)
• Safari
• node.js (LTS)

Other browsers should also work, but at the moment we're only running automated tests on the browsers and Node.js versions specified above.

Getting started

In order to get started with the Contentful JS library you'll need not only to install it, but also to get credentials which will allow you to have access to your content in Contentful.

• Installation
• Your first request
• Using this library with the Preview API
• Authentication
• Documentation & References

Installation

npm install contentful

Using it directly in the browser:

For browsers, we recommend to download the library via npm or yarn to ensure 100% availability.

If you'd like to use a standalone built file you can use the following script tag or download it from jsDelivr, under the dist directory:

<script src="https://cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.browser.min.js"></script>

Using contentful@latest will always get you the latest version, but you can also specify a specific version number.

<script src="https://cdn.jsdelivr.net/npm/contentful@5.0.1/dist/contentful.browser.min.js"></script>

The Contentful Delivery library will be accessible via the contentful global variable.

Check the releases page to know which versions are available.

Legacy browsers:

This library also comes with a legacy version to support Internet Explorer 11 and other older browsers. It already contains a polyfill for Promises.

To support legacy browsers in your application, use contentful.legacy.min.js instead of contentful.browser.min.js

Your first request

The following code snippet is the most basic one you can use to get some content from Contentful with this library:

const contentful = require("contentful");
const client = contentful.createClient({
  // This is the space ID. A space is like a project folder in Contentful terms
  space: "developer_bookshelf",
  // This is the access token for this space. Normally you get both ID and the token in the Contentful web app
  accessToken: "0b7f6x59a0"
});
// This API call will request an entry with the specified ID from the space defined at the top, using a space-specific access token.
client
  .getEntry("5PeGS2SoZGSa4GuiQsigQu")
  .then(entry => console.log(entry))
  .catch(err => console.log(err));

Check out this JSFiddle version of our Product Catalogue demo app.

Using this library with the Preview API

This library can also be used with the Preview API. In order to do so, you need to use the Preview API Access token, available on the same page where you get the Delivery API token, and specify the host of the preview API, such as:

const contentful = require("contentful");
const client = contentful.createClient({
  space: "developer_bookshelf",
  accessToken: "preview_0b7f6x59a0",
  host: "preview.contentful.com"
});

You can find all available methods of our client in our reference documentation

Authentication

To get your own content from Contentful, an app should authenticate with an OAuth bearer token.

You can create API keys using the Contentful web interface. Go to the app, open the space that you want to access (top left corner lists all the spaces), and navigate to the APIs area. Open the API Keys section and create your first token. Done.

Don't forget to also get your Space ID.

For more information, check the Contentful REST API reference on Authentication.

Documentation & References

• Configuration
• Reference documentation
• Tutorials & other resources
• Troubleshooting
• Advanced Concepts
• Migration

To help you get the most out of this library, we've prepared all available client configuration options, a reference documentation, tutorials and other examples that will help you learn and understand how to use this library.

Configuration

The createClient method supports several options you may set to achieve the expected behavior:

contentful.createClient({
  ... your config here ...
})

Name	Default	Description
accessToken		Required. Your CDA access token.
space		Required. Your Space ID.
environment	'master'	Set the environment that the API key has access to.
host	'cdn.contentful.com'	Set the host used to build the request URI's.
basePath	''	This path gets appended to the host to allow request urls like https://gateway.example.com/contentful/ for custom gateways/proxies.
httpAgent	undefined	Custom agent to perform HTTP requests. Find further information in the [axios request config documentation](https://github.com/mzabriskie/axios#request-config).
httpsAgent	undefined	Custom agent to perform HTTPS requests. Find further information in the [axios request config documentation](https://github.com/mzabriskie/axios#request-config).
adapter	undefined	Custom adapter to handle making the requests. Find further information in the [axios request config documentation](https://github.com/mzabriskie/axios#request-config).
headers	{}	Additional headers to attach to the requests. We add/overwrite the following headers: Content-Type: application/vnd.contentful.management.v1+json X-Contentful-User-Agent: sdk contentful.js/1.2.3; platform node.js/1.2.3; os macOS/1.2.3 (Automatically generated)
proxy	undefined	Axios proxy configuration. See the [axios request config documentation](https://github.com/mzabriskie/axios#request-config) for further information about the supported values.
resolveLinks	true	Turn off to disable link resolving.
removeUnresolved	false	Remove fields from response for unresolved links.
retryOnError	true	By default, this library is retrying requests which resulted in a 500 server error and 429 rate limit response. Set this to false to disable this behavior.
application	undefined	Application name and version e.g myApp/version.
integration	undefined	Integration name and version e.g react/version.
timeout	30000	in milliseconds - connection timeout.
retryLimit	5	Optional number of retries before failure.
logHandler	function (level, data) {}	Errors and warnings will be logged by default to the node or browser console. Pass your own log handler to intercept here and handle errors, warnings and info on your own.
requestLogger	function (config) {}	Interceptor called on every request. Takes Axios request config as an arg.
responseLogger	function (response) {}	Interceptor called on every response. Takes Axios response object as an arg.

Reference documentation

The JS library reference documents what objects and methods are exposed by this library, what arguments they expect and what kind of data is returned.

Most methods also have examples which show you how to use them.

Legacy contentful.js documentation

For versions prior to 3.0.0, you can access documentation at https://github.com/contentful/contentful.js/tree/legacy

Tutorials & other resources

• This library is a wrapper around our Contentful Delivery REST API. Some more specific details such as search parameters and pagination are better explained on the REST API reference, and you can also get a better understanding of how the requests look under the hood.
• Check the Contentful for JavaScript page for Tutorials, Demo Apps, and more information on other ways of using JavaScript with Contentful

Troubleshooting

• I get the error: Unable to resolve module http - Our library is supplied as node and browser version. Most non-node environments, like React Native, act like a browser. To force using of the browser version, you can require it via: const { createClient } = require('contentful/dist/contentful.browser.min.js')
• Can I use it with typescript? - Yes, there is also a type definition file
• Is the library doing any caching? - No, check this issue for more infos

Advanced Concepts

More information about how to use the library in advanced or special ways can be found in the ADVANCED.md document.

Migration

We gathered all information related to migrating from older versions of the library in our MIGRATION.md document.

Reach out to us

You have questions about how to use this library?

• Reach out to our community forum:
• Jump into our community slack channel:

You found a bug or want to propose a feature?

• File an issue here on GitHub: . Make sure to remove any credential from your code before sharing it.

You need to share confidential information or have other questions?

• File a support ticket at our Contentful Customer Support:

Get involved

We appreciate any help on our repositories. For more details about how to contribute see our CONTRIBUTING.md document.

License

This repository is published under the MIT license.

Code of Conduct

We want to provide a safe, inclusive, welcoming, and harassment-free space and experience for all participants, regardless of gender identity and expression, sexual orientation, disability, physical appearance, socioeconomic status, body size, ethnicity, nationality, level of experience, age, religion (or lack thereof), or other identity markers.

Read our full Code of Conduct.