Adjust your app for Web Spotlight

Jan Cerman

7 minutes

Web Spotlight

Download PDF

0% complete

What does your web app need to do to display interactive pages in Web Spotlight? Review a short checklist with code samples to see if your app is ready.

Review the checks or explore a simple appThe code samples in this lesson are taken from a simple React app. Choose whether you want to go through the checks or explore the source code

of the React app. The app is complementary to this path and only displays the landing page in Web Spotlight.

Check 1. Content preview

Use Delivery SDK in your app to preview content. We recommend using environment variables to avoid storing sensitive information directly in your code, such as your environment ID and API key. For example, this is how you can set up a client for Delivery API to preview content.

TypeScript

import { createDeliveryClient } from "@kontent-ai/delivery-sdk";

export const deliveryClient = createDeliveryClient({
    environmentId: process.env.KONTENT_AI_ENVIRONMENT_ID || '',
    previewApiKey: process.env.KONTENT_AI_PREVIEW_API_KEY,
    defaultQueryConfig: {
        usePreviewMode: true
    }
})

Production vs. previewYou can create multiple delivery clients in your app for different purposes. For example, one client can preview the latest content while another can retrieve published content. Based on the specified environment variables, your app would choose the right client for your production or preview deployment environments.

With the delivery client for content preview prepared, you can retrieve the latest versions of your content. For example, this is how you can retrieve the Website root and return the landing page it links to. The following code shows the delivery client used in React. To see it in context, check the complete application code

TypeScript

// This example uses generated models. See https://kontent.ai/learn/strongly-typed-models
const [landingPage, setLandingPage] = useState<LandingPage | null>(null);

// Retrieves the Website root item and saves the linked Landing page
useEffect(() => {
  deliveryClient.item<WebSpotlightRoot>('website_root')
    .toPromise()
    .then(
      response => (
        // Website root uses the 'Content' element to link the Landing page
        setLandingPage(response.data.item.elements.content.linkedItems[0])
      )
    )
}, [])

Check 2: Displaying a content item

Once your app can retrieve content items, it’s time to display their content. For example, this is how you can map your landing page elements to HTML elements.

TypeScript

<img
  src={landingPage.elements.image.value[0]?.url}
  // If the asset doesn't have an alt text description, use its file name
  alt={landingPage.elements.image.value[0]?.description ||
    landingPage.elements.image.value[0]?.name}
  height={landingPage.elements.image.value[0]?.height || 200}
  width={landingPage.elements.image.value[0]?.width || 300} />
<h1>{landingPage.elements.title.value}</h1>
<div dangerouslySetInnerHTML={{ __html: landingPage.elements.body.value }}></div>

Use strongly typed models in your app for a better developer experience and easier maintenance.

Check 3: Smart Link SDK

To enable in-context editing in Web Spotlight, use the Kontent.ai Smart Link SDK in your app. Make sure to initialize the SDK

with basic information about your project’s environment.

TypeScript

import KontentSmartLink from '@kontent-ai/smart-link';

const kontentSmartLink = KontentSmartLink.initialize({
  defaultDataAttributes: {
    projectId: process.env.KONTENT_AI_ENVIRONMENT_ID,
    languageCodename: "default"
  },
  queryParam: "preview"
});

To make smart links work, the Smart Link SDK requires specific data attributes in your web app’s HTML markup. There are several types of smart links

that work in Web Spotlight. The following code shows how to annotate your HTML markup using the data-kontent-item-id and data-kontent-element-codename data attributes to add smart links for specific content elements.

TypeScript

// Specify content item ID
<div className="App-header" data-kontent-item-id={landingPage.system.id}>
  <img
    // Specify element codename using a strongly typed model
    data-kontent-element-codename={contentTypes.landing_page.elements.image.codename}
    className="App-logo"
    src={landingPage.elements.image.value[0]?.url}
    // If asset doesn't have alt text description, use its file name
    alt={landingPage.elements.image.value[0]?.description ||
      landingPage.elements.image.value[0]?.name}
    height={landingPage.elements.image.value[0]?.height || 200}
    width={landingPage.elements.image.value[0]?.width || 300} 
  />
  <h1
    data-kontent-element-codename={contentTypes.landing_page.elements.title.codename}>
    {landingPage.elements.title.value}
  </h1>
  <div
    data-kontent-element-codename={contentTypes.landing_page.elements.body.codename}
    dangerouslySetInnerHTML={{ __html: landingPage.elements.body.value }}>
  </div>
</div>

You can add the Smart Link data attributes for each visual element that takes its content from Kontent.ai to make the element editable.

Check 4: App deployment

For Web Spotlight to work correctly, your app must be deployed and accessible via a public URL. You can use many different services to deploy your app, such as Microsoft Azure, Amazon AWS, Vercel, Netlify, or Surge.sh.Combined with the content preview, it’s crucial that your web app keeps the sensitive information on the server side and doesn’t reveal it on the client side.

Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!