Get Started with TypeScript Delivery SDK and Live Preview

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

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

• NodeJS version 22 or later

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/delivery-sdk'

const Stack = contentstack.stack({ 

 apiKey: 'api_key', 

 deliveryToken: 'delivery_token', 

 environment: 'environment',

 live_preview: {

   enable: true, 

   preview_token: '<your_preview_token>',

   host: 'rest-preview.contentstack.com',

 }

})

Sharing a single instance of the Contentstack SDK across multiple requests (e.g., in a server-side environment like Node.js) with Live Preview enabled can cause unexpected behavior when multiple users make simultaneous requests. When Live Preview is enabled, the SDK may modify its configuration (such as API endpoints) for a specific request. If the same SDK instance handles multiple requests, configuration changes for one user (e.g., User A) can affect others (e.g., User B), leading to incorrect or unexpected content. To avoid this, create a new Contentstack SDK instance for each request to ensure isolated configurations and prevent interference between requests.

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.

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.

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

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').entry().find()

• TypeScript News App
• API Reference for TypeScript Delivery SDK