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-baseUsage
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:
Resources
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-baseUsage
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:
