Skip to content
Kontent Delivery SDK for Javascript
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci package migration Oct 8, 2019
.github Create CODEOWNERS Jan 28, 2019
.vscode Renames modular content to linked items where it makes sense (#72) Oct 1, 2018
demo package migration Oct 8, 2019
examples Rebrands for Kentico Kontent, prepares new package versions Sep 16, 2019
lib sdk-info Oct 21, 2019
misc adds standard-release & fixes set-sdk-version scripts Oct 14, 2019
test-browser feat: Enables resolving links without content item representation in … Oct 21, 2019
test-node feat: takes 'isDeveloperMode' settings into account when displaying r… Oct 15, 2019
.gitignore Updates dependencies in all packages + updates to Lerna 3x and Typesc… Aug 13, 2018
.npmignore package migration Oct 8, 2019
.prettierrc adds prettier config Aug 21, 2019
.travis.yml package migration Oct 8, 2019
CHANGELOG.md chore(release): 7.2.0 Oct 21, 2019
CODE_OF_CONDUCT.md Add/update issue, PR templates, code of conduct, contributing guide Sep 6, 2018
CONTRIBUTING.md Rebrands for Kentico Kontent, prepares new package versions Sep 16, 2019
DOCS.md Update DOCS.md Oct 17, 2019
FAQ.md package migration Oct 8, 2019
LICENSE package migration Oct 8, 2019
LICENSE.md Rename LICENSE to LICENSE.md Jan 26, 2019
UPGRADE.md package migration Oct 8, 2019
karma-travis.conf.js package migration Oct 8, 2019
karma.conf.js package migration Oct 8, 2019
package-lock.json chore(release): 7.2.0 Oct 21, 2019
package.json chore(release): 7.2.0 Oct 21, 2019
readme.md
tsconfig.json package migration Oct 8, 2019
tsconfig.prod.json package migration Oct 8, 2019
tsconfig.webpack.json package migration Oct 8, 2019
tslint.json removes obsolete tslint rule Jul 17, 2019
webpack.browser.config.js package migration Oct 8, 2019
webpack.browser.legacy.config.js package migration Oct 8, 2019
webpack.config.js package migration Oct 8, 2019

readme.md

Kentico Kontent Delivery SDK

npm version Build Status CircleCI npm Known Vulnerabilities GitHub license Gzip browser bundle

A client library for retrieving content from Kentico Kontent written in TypeScript and published in following formats: UMD, ES2015 and CommonJs. Works both in browser & node.

Resources
Full Documentation
Example apps
Upgrade guide

Installation

You can install this library using npm or you can use global CDNs such jsdelivr directly. In both cases, you will also need to include rxjs as its listed as peer dependency.

npm

npm i rxjs --save
npm i @kentico/kontent-delivery --save

UMD Bundles

When using UMD bundle and including this library in script tag on your html page, you can find it under the kontentDelivery global variable.

Bundles are distributed in _bundles folder and there are several options that you can choose from.

  • Use kontent-delivery.browser.legacy.umd.min if you need to support legacy browsers (IE9, IE10, IE11)
  • Use kontent-delivery.browser.umd.min if you intend to use SDK only in browsers (strips code specific to Node.js = smaller bundle)
  • Use kontent-delivery.umd.min if you need to use it in Node.js

CDN

kontent-delivery.browser.legacy.umd.min

Gzip browser bundle

https://cdn.jsdelivr.net/npm/@kentico/kontent-delivery/_bundles/kontent-delivery.browser.legacy.umd.min.js
kontent-delivery.browser.umd.min

Gzip browser bundle

https://cdn.jsdelivr.net/npm/@kentico/kontent-delivery/_bundles/kontent-delivery.browser.umd.min.js
kontent-delivery.umd.min

Gzip full bundle

https://cdn.jsdelivr.net/npm/@kentico/kontent-delivery/_bundles/kontent-delivery.umd.min.js

TypeScript & ES6

import { 
    ContentItem, 
    Elements,
    TypeResolver,
    DeliveryClient
    } from '@kentico/kontent-delivery';

/**
 * This is optional, but it is considered a best practice to define your models
 * so you can leverage intellisense and so that you can extend your models with 
 * additional properties / methods.
 */
export class Movie extends ContentItem {
  public title: Elements.TextElement;
}

const deliveryClient = new DeliveryClient({
    projectId: 'xxx',
    typeResolvers: [
        new TypeResolver('movie', () => new Movie()),
    ]
});

/** Getting items from Kentico Kontent as Promise */
deliveryClient.items<Movie>()
    .type('movie')
    .toPromise()
    .then(response => {
        const movieText = response.items[0].title.value;
    )
});

/** Getting items from Kentico Kontent as Observable */
deliveryClient.items<Movie>()
    .type('movie')
    .toObservable()
    .subscribe(response => {
        const movieText = response.items[0].title.value;
    )
});

/**
 * Get data without having custom models 
 */
deliveryClient.items<ContentItem>()
  .type('movie')
  .get()
  .subscribe(response => {
    // you can access properties same way as with strongly typed models, but note
    // that you don't get any intellisense and the underlying object 
    // instance is of 'ContentItem' type
    console.log(response.items[0].title.value);
});

JavaScript & CommonJS

const KontentDelivery = require('@kentico/kontent-delivery');

class Movie extends KontentDelivery.ContentItem {
    constructor() {
        super();
    }
}

const deliveryClient = new KontentDelivery.DeliveryClient({
    projectId: 'xxx',
    typeResolvers: [
        new KontentDelivery.TypeResolver('movie', () => new Movie()),
    ]
});

/** Getting items from Kentico Kontent as Promise */
deliveryClient.items()
    .type('movie')
    .toPromise()
    .then(response => {
        const movieText = response.items[0].title.value;
    )
});

/** Getting items from Kentico Kontent as Observable */
const subscription = deliveryClient.items()
    .type('movie')
    .toObservable()
    .subscribe(response => {
        const movieText = response.items[0].title.value;
    });

/*
Don't forget to unsubscribe from your Observables. You can use 'takeUntil' or 'unsubscribe' method for this purpose. Unsubsription is usually done when you no longer need to process the result of Observable. (Example: 'ngOnDestroy' event in Angular app)
*/
subscription.unsubscribe();

/**
 * Fetch all items of 'movie' type and given parameters from Kentico Kontent.
 * Important note: SDK will convert items to your type if you registered it. For example,
 * in this case the objects will be of 'Movie' type we defined above. 
 * If you don't use custom models, 'ContentItem' object instances will be returned.
 */
deliveryClient.items()
    .type('movie')
    .toObservable()
    .subscribe(response => console.log(response));

HTML & UMD

Bundles are distributed in _bundles folder and there are several options that you can choose from.

  • Use kontent-delivery.browser.legacy.umd.min if you need to support legacy browsers (IE9, IE10, IE11)
  • Use kontent-delivery.browser.umd.min if you intend to use SDK only in browsers (strips code specific to Node.js = smaller bundle)
  • Use kontent-delivery.umd.min if you need to use it in Node.js
<!DOCTYPE html>
<html>
<head>
    <title>Kentico Kontent SDK - Html sample</title>
    <script type="text/javascript" src="https://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@kentico/kontent-delivery/_bundles/kontent-delivery.browser.umd.min.js"></script>
</head>
<body>

	<script type="text/javascript">
		var Kc = window['kontentDelivery'];

		var deliveryClient = new Kc.DeliveryClient({
			projectId: 'da5abe9f-fdad-4168-97cd-b3464be2ccb9'
		});

		deliveryClient.items()
			.type('movie')
			.toPromise()
			.then(response => console.log(response));

	</script>
	<h1>See console</h1>
</body>
</html>

Testing

Note: You need to have Chrome installed in order to run tests via Karma.

  • npm run test:browser Runs tests in Chrome
  • npm run test:node Runs tests in node.js
  • npm run test:dev Runs developer tests (useful for testing functionality)
  • npm run test:travis Runs browser tests that are executed by travis

If you want to mock http responses, it is possible to use external implementation of configurable Http Service as a part of the delivery client configuration.

Feedback & Contribution

Feedback & Contributions are welcomed. Feel free to take/start an issue & submit PR.

Analytics

You can’t perform that action at this time.