Set up CORS

To make the React SDK work, you need to update your "Cross-Origin Resource Sharing" (CORS) policy.

This can be done using environment variables:

LIGHTDASH_CORS_ENABLED=true
LIGHTDASH_CORS_ALLOWED_DOMAINS=https://domain-where-you-are-going-to-use-the-sdk.com  

<aside> ❓

why this is needed?

Enabling CORS (Cross-Origin Resource Sharing) is necessary because browsers enforce security policies that prevent web applications from making requests to a different domain than the one that served the app (known as the Same-Origin Policy).

Since the Lightdash React SDK interacts with an Lightdash API, you need to configure CORS on your Lightdash instance to allow your frontend application to communicate with the Lightdash server without being blocked by the browser.

</aside>

Install Lightdash SDK

In your frontend project, use your preferred package manager to install the SDK.

npm install @lightdash/sdk  
# or
pnpm add @lightdash/sdk  
# or
yarn add @lightdash/sdk  

<aside> ℹ️

At the moment, we support React 18 and 19, so make sure your frontend is using React 18 or later.

</aside>

Using the Lightdash SDK

In your frontend project, import and use the Lightdash.Dashboard component in your desired location to mount the Lightdash dashboard.

import Lightdash from '@lightdash/sdk';

<Lightdash.Dashboard
    instanceUrl="{{ your instance URL (e.g., <https://lightdash.yourcompanydomain.com>) }}"
    projectUuid="{{ project ID that the dashboard is part of }}"
    token="see the section below on how to generate a token for the SDK"
/>

Generate an embed token

Development

When developing you can quickly and easily generate tokens through the Lightdash UI. Since this requires manual steps we don’t recommend you do this in production.

….details here

Production