Get Started with JavaScript Delivery SDK and Live Preview

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

Prerequisites

To get started with JavaScript, you will need the following:

• NodeJS version 20 or later

SDK Installation and Setup

To use the JavaScript Delivery SDK, download and include it in the script tag:

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

Initializing the Stack with Live Preview

Since the Live Preview Utils SDK is responsible for communication, you need to initialize it within your stack.

Use the following command to initialize the stack:

import Contentstack from 'contentstack'
const Stack = Contentstack.Stack({ 
 api_key: 'api_key', 
 delivery_token: 'delivery_token', 
 environment: 'environment',
 live_preview: {
   management_token: management_token,
   enable: true, 
   host: 'api.contentstack.io',
 }
})

Note: By default, the host parameter points to the North America endpoint. If your website is hosted on the European data center, then pass the European endpoint against the host parameter.

For Server-side Rendered Websites

If you have a Server-side Rendered (SSR) website, use the following code to get the Live Preview hash key:

import express from 'express'
const app = express()
app.use((req, response, next) => {
 // this will get live_preview hash and ContentType to request
 Stack.livePreviewQuery(req.query)
 next()
});

To install and initialize the Live Preview Utils SDK, you can refer to our SSR Live Preview Setup documentation.

For Client-side Rendered Websites

If your website is rendered on the client-side, you can refer to our CSR Live Preview Setup documentation.

Query Request

Contentstack SDKs let you interact with the Content Delivery APIs and retrieve content from Contentstack. They are read-only in nature. The SDKs fetch and deliver content from the nearest server via Fastly, our powerful and robust CDN.

To get an entry, you need to specify the content type UID and the UID of the entry.

Stack.ContentType('content_type_uid').Entry('entry_uid').fetch()
Stack.ContentType('content_type_uid').Query().find()

More Resources

• JavaScript Live Preview Utils SDK
• Static Corporate Website
• JavaScript Playground App
• TypeScript News App
• API Reference for JavaScript Delivery SDK
• JavaScript SDK Changelog
• View and Download JavaScript Delivery SDK repository on GitHub