JavaScript (Browser)

Use Contentstack to power content for your JavaScript projects

Create JavaScript-based applications and use the JavaScript SDK to fetch and deliver content from Contentstack. The SDK uses Content Delivery APIs.

Getting Started

This guide will help you get started with our JavaScript SDK to build apps powered by Contentstack.

SDK Installation and Setup

To use the JavaScript SDK, download it from here and include it in the <script> tag:

<script type="text/javascript" src="/path/to/contentstack.min.js"></script>

Initialize SDK

You will need to specify the API key, Delivery token, and Environment Name of your stack to initialize the SDK:

const Stack = Contentstack.Stack("api_key", "delivery_token", "environment_name");

Once you have initialized the SDK, you can start getting content in your app.

Cache Policies

The cache policies allow you to define the source from where the SDK will retrieve the content. Based on the selected policy, the SDK can get the data from cache, network, or both.

Let’s look at the various cache policies available for use:

POLICIES DESCRIPTION
IGNORE_CACHE (default) When the IGNORE_CACHE policy is set, the SDK always retrieves data by making a network call, without maintaining any cache. This is set as the default policy.
ONLY_NETWORK If you set ONLY_NETWORK as the cache policy, the SDK retrieves data through a network call, and saves the retrieved data in the cache.
CACHE_ELSE_NETWORK When the CACHE_ELSE_NETWORK policy is set, the SDK gets data from the cache. However, if it fails to retrieve data from the cache, it makes a network call.
NETWORK_ELSE_CACHE When the NETWORK_ELSE_CACHE policy is set, the SDK gets data using a network call. However, if the call fails, it retrieves data from cache.
CACHE_THEN_NETWORK If CACHE_THEN_NETWORK is set as the cache policy, the SDK gets data from cache, and then makes a network call. (A success callback will be invoked twice.)

You can set a cache policy on a stack and/or query object.

Setting a cache policy on a stack

This option allows you to globalize a cache policy. This means the cache policy you set will be applied to all the query objects of the stack.

// setting a cache policy on a stack
Stack.setCachePolicy(Contentstack.CachePolicy.NETWORK_ELSE_CACHE)

Setting a cache policy on a query object

This option allows you to set/override a cache policy on a specific query object.

// setting a cache policy on a query object
Query.setCachePolicy(Contentstack.CachePolicy.CACHE_THEN_NETWORK)

Basic Queries

Get a Single Entry

To get a single entry, you need to specify the content type as well as the id of the entry.

const Query = Stack.ContentType('blog').Entry("blta464e9fbd048668c")
Query.fetch()
   .then(function success(entry) {
       console.log(entry.get('title')); // Retrieve field value by providing a field's uid
       console.log(entry.toJSON()); // Convert the entry result object to JSON
   }, function error(err) {
       // err object
   });

Get Multiple Entries

To retrieve multiple entries of a content type, you need to specify the content type uid. You can also specify search parameters to filter results.

const Query = Stack.ContentType('blog').Query();
Query
   .where("title", "welcome")
   .includeSchema()
   .includeCount()
   .toJSON()
   .find()
   .then(function success(result) {
      // result is array where -
      // result[0] => entry objects
      // result[result.length-1] => entry objects count included only when .includeCount() is queried.
      // result[1] => schema of the content type is included when .includeSchema() is queried.
  }, function error(err) {
     // err object
 });

These were example of some of the basic queries of the SDK. For advanced queries, refer to our API reference documentation by visiting the link given below.

Using the Sync API with JavaScript SDK

The Sync API takes care of syncing your Contentstack data with your app and ensures that the data is always up-to-date by providing delta updates. Contentstack’s iOS SDK provides several methods that you can use to sync data. Learn more about these methods below:

API Reference

Go through our SDK API Reference guide to know about the methods that can be used to query your content in Contentstack.

Read JavaScript API Reference Guide

Download SDK

The JavaScript (Browser) SDK interacts with and uses our Content Delivery APIs to fetch content from Contentstack. Download the SDK to deliver content to your JavaScript projects.

Download JavaScript (Browser) SDK

Example Apps

To help you get started, we have created some sample applications that are powered by Contentstack JavaScript (Browser) SDK. Click on any of the links below to read the tutorials of the app, view app demo, or download the code from GitHub.

AngularJS SDK

Contentstack provides JavaScript SDK using which you can create applications based on JavaScript, Angular, and React. However, if you wish to create apps based on Angular, you can download and use the AngularJS SDK.

Static Site Generators

Gatsby

Metalsmith

Was this article helpful?
top-arrow