Libraries

Our helper libraries support you to quickly build apps by solving common use cases.

Node.js Apps Toolkit

The node-apps-toolkit is a growing collection of helpers and utilities for building apps for Contentful with Node.js. It helps you reduce friction when building more complex apps with the app framework. The code is open source and hosted on Github. If you want to see the node-apps-toolkit in action, please check out our guide on using app identities and events and verifying requests.

You can find the full API documentation for the node-apps-toolkit here.

DAM app base

@contentful/dam-app-base is a library that helps you to quickly build an app to integrate your DAM (Digital Asset Management) system of choice with Contentful. This library provides the core functionality required for a DAM integration which means you only need to implement functionality for your specific service.

This library creates an app that can be used in the entry field location to select assets from your DAM service. The library also provides a configuration screen for easy customization.

Installation

To install, run

npm install @contentful/dam-app-base

Usage

import { setup } from '@contentful/dam-app-base';

setup({
  cta: 'Select assets',
  name: 'My DAM App',
  logo: 'https://example.com/logo.svg',
  color: '#d7f0fa',
  description: 'My example DAM App',
  parameterDefinitions: [
    {
      id: 'folder',
      type: 'Symbol',
      name: 'Folder',
      description: 'Preselected folder when selecting assets.',
      required: true,
    },
  ],
  validateParameters: () => null,
  makeThumbnail: (asset) => asset.thumbnailUrl,
  renderDialog: async (sdk) => {
    const config = sdk.parameters.invocation;

    const container = document.createElement('div');
    container.innerHTML = `<iframe src="https://example.com/dam?folder=${config.folder}" />`;
    document.body.appendChild(container);
  },
  openDialog: async (sdk, currentValue, config) => {
    return await sdk.dialogs.openCurrentApp({
      parameters: { config, currentValue },
    });
  },
  isDisabled: () => false,
});

Apps

These open-source apps use @contentful/dam-app-base. Look at their source code to learn how they utilize this library:

• Brandfolder
• Bynder
• Cloudinary
• Dropbox
• Frontify
• Mux

Resources

• Package on npm
• Source code
• Type Documentation

E-commerce app base

@contentful/ecommerce-app-base is a library that helps you to quickly build an app to integrate your e-commerce system of choice with Contentful. This library provides the core functionality required for an e-commerce integration which means you only need to implement functionality for your specific service.

This library creates an app which can be used in the entry field location to select stock keeping units (sku) from your e-commerce service. The library also provides a configuration screen for an easy customization.

Installation

To install, run

npm install @contentful/ecommerce-app-base

Usage

import { setup } from '@contentful/ecommerce-app-base';

setup({
  makeCTA: () => 'Select products',
  name: 'My SKU App',
  logo: 'https://example.com/logo.svg',
  color: '#d7f0fa',
  description: 'My example SKU App',
  parameterDefinitions: [
    {
      id: 'category',
      type: 'Symbol',
      name: 'Catehory',
      description: 'Product category of our shop',
      required: true,
    },
  ],
  validateParameters: () => null,
  fetchProductPreviews: async (skus) => {
    const responess = await Promise.all(
      skus.map((sku) => fetch(`https://example.com/products/${sku}`))
    );
    return responses.map((response) => response.json());
  },
  renderDialog: (sdk) => {
    const config = sdk.parameters.invocation;

    const container = document.createElement('div');
    container.innerHTML = `<iframe src="https://example.com/products-search?category=${config.category}" />`;
    document.body.appendChild(container);
  },
  openDialog: async (sdk, currentValue, config) => {
    return await sdk.dialogs.openCurrentApp({
      parameters: { config, currentValue },
    });
  },
  isDisabled: () => false,
});

Apps

These open-source apps use @contentful/ecommerce-app-base. Look at their source code to learn how they utilize this library:

• Commerce Layer
• Saleor
• Shopify

Resources

• Package on npm
• Source code
• Type Documentation