npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

avnu-contentful

v5.1.3

Published

Client for Contentful's Content Delivery API

Downloads

6

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

ljxaumainljxaumain

Keywords

Readme

header

contentful.js - Contentful JavaScript Delivery SDK

JavaScript SDK 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.

Core Features

Supported browsers and Node.js versions:

  • Chrome
  • Firefox
  • Edge
  • IE11 (with legacy version of the library)
  • Safari
  • node.js (6.x, 8.x)

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 SDK 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

npm install contentful

Using it directly in the browser:

For browsers, we recommend to download the SDK 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/[email protected]/dist/contentful.browser.min.js"></script>

The Contentful Delivery SDK 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

React Native & Server Side Rendering:

This library is able to handle Server Side Rendering and React Native. Depending on your implementation, you may need to explicitly require the browser or node variant of the library. (Webpack usually is able to handle this on its own)

const contentful = require("contentful");
// will become the following to enforce the browser version
const contentful = require("contentful/dist/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 SDK:

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));

You can try and change the above example at Tonic, or if you'd prefer a more Browser oriented example, check out this JSFiddle version of our Product Catalogue demo app.

Using this SDK with the Preview API

This SDK 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

To help you get the most out of this SDK, 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 ...
})

Reference documentation

The JS SDK 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 SDK 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')
  • Link resolution does not work when using client.getEntry('<entry-id>') - Link resolution does not work with the single entity endpoint, you can use client.getEntries({'sys.id': '<entry-id>'}) to link an entry with resolved links
  • Can I use it with typescript? - Yes, there is also a type definition file
  • Is the SDK 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: Contentful Community Forum
  • Jump into our community slack channel: Contentful Community Slack

You found a bug or want to propose a feature?

  • File an issue here on GitHub: File an issue. 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: File support ticket

Get involved

PRs Welcome

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.