How to Embed Dashboards in React with a Python Backend

TL;DR: Embedding Bold BI® dashboards in a React application with a Python backend enables secure, scalable, and seamless analytics integration. The Python backend handles token-based authentication, while React delivers a responsive embedded experience with routing and component-based rendering.

Introduction

Modern applications are evolving beyond basic functionality to deliver data-driven experiences directly within the product interface. Users expect real-time insights without switching between tools, making embedded analytics a core feature in today's software landscape.

To meet this expectation, developers need an approach that ensures both seamless user experience and strong security.

In this guide, you'll learn how to embed Bold BI dashboards into a React application using a Python backend (Django), following the latest Embed SDK approach. More importantly, we'll explain why each step matters, so you can confidently implement this in real-world applications.

Before you start: Bold BI's getting started guide covers the core embedding concepts and is worth a quick read before you dive into the sample below.

Why Embed Dashboards in React Applications

React's component-driven architecture allows developers to integrate dashboards as part of a unified interface, rather than treating analytics as a separate system.

This creates a more connected product experience. As a result, you can:

• Deliver a consistent and seamless user experience.
• Provide real-time insights within workflows.
• Increase product engagement through interactivity.
• Differentiate your application with built-in analytics.

Why a Python Backend Is Essential

When embedding dashboards, security is non-negotiable. Since dashboards often contain sensitive data, authentication should never be handled on the frontend.

A Python backend, commonly implemented using Django, is responsible for:

• Generating secure embed tokens.
• Managing authentication and user authorization.
• Protecting secret keys and credentials.
• Acting as a secure bridge to the Bold BI server.

By keeping these operations on the server side, no sensitive information is exposed in the browser. This backend-first approach establishes a secure and scalable architecture that’s suitable for production environments.

How to Embed a Dashboard in a React Application with Python

The following steps demonstrate how to configure embedding, set up the required components, and render dashboards in a React application using a Python backend and the Bold BI Embedded SDK.

Prerequisites

Before you begin, ensure the following requirements are met:

• Python.
• Node.js and npm (required to install and run the React app).
• Visual Studio Code.
• Python Extension for Visual Studio Code.

Step 1: Get the React with Python Sample

Start by cloning the official React with Python sample application from the Bold BI GitHub repository:

git clone https://github.com/boldbi/react-with-python.git

This sample demonstrates:

• Rendering a single dashboard.
• Rendering a list of dashboards.
• Embedding Bold BI dashboards using React and Python.

Step 2: Embed Authentication in Bold BI

Before embedding a dashboard, Embed Authentication must be enabled.

To enable embedding:

1. Log in to your Bold BI instance.
2. Go to Administration.
3. Navigate to Embed Settings.
4. Enable Embed Authentication.
5. Save the changes.

This step generates the Embed Secret needed for secure dashboard access.

 Step 3: Download the Embed Configuration file

After enabling embed authentication:

1. Go to the dashboard you want to embed.
2. Open the Embed tab.
3. Click Embed Configuration.
4. Download the embedConfig.json file.

The downloaded file contains all the required configuration details for embedding.

Step 4: Add the Embed Configuration file

Copy the downloaded embedConfig.json file and place it in the application location shown in the sample project structure.

The file contains the following settings:

Property	Description
ServerUrl	The URL of your Bold BI server. Example: http://localhost:5000/bi or https://demo.boldbi.com/bi
SiteIdentifier	Enterprise Edition: site/site1; Bold BI Cloud: empty string
Environment	BoldBI.Environment.Cloud or BoldBI.Environment.Enterprise
DashboardId	The dashboard item ID to be embedded
EmbedSecret	The embed secret generated after enabling embed authentication
UserEmail	Admin user email address used for dashboard access
ExpirationTime	Token expiration time in seconds. Default: 10,000 seconds

Step 5: Start the Python Backend

Navigate to the Python project and run:

python manage.py runserver

The Python application will start on:

http://localhost:8000

The backend is responsible for generating secure authentication tokens required by the Embedded SDK.

Step 6: Install React Dependencies

Move to the React application folder and install all required packages:

npm install

Step 7: Start the React Application

After package installation completes, run:

npm start

The React application will launch on:

http://localhost:3000

and connect to the Python backend to securely retrieve dashboard tokens.

Step 8: View Dashboard Listing (Optional)

By default, the sample displays a single embedded dashboard.

To view the dashboard listing page, navigate to:

http://localhost:3000/dashboardlisting

This page displays the available dashboards in a sidebar for selection.

For more guidance on integrating dashboards into a React application, refer to our help documentation.

How the Sample Works

1. Dashboard Initialization in React

The React application uses BoldBI.create() to initialize the embedded dashboard. The configuration includes:

• Dashboard information.
• Server information.
• Token generation endpoint URL.

The tokenGenerationUrl property points to the Python backend's tokenGeneration endpoint.

2. Token Generation

The Python backend exposes a token generation API. It:

• Receives requests from React.
• Communicates with the Bold BI server.
• Retrieves an authentication token.
• Returns the token to the React application.

This ensures the Embed Secret is never exposed in the browser.

3. Dashboard Rendering

Once the token is generated, it's returned to Dashboard.js, Bold BI validates it, and the dashboard renders inside the React application. Users can then interact with the dashboard directly from the embedded page.

Verify the Dashboard

Confirm that:

• The Python backend is running on port 8000.
• The React application is running successfully.
• The dashboard renders inside the React application.
• Authentication occurs securely through the Python backend.

Best Practices for Production Deployment

After successfully embedding dashboards, the next step is to ensure your implementation is production-ready.

• Secure token handling: Always generate tokens on the backend, use HTTPS, and set expiration limits.
• Multi-tenant architecture: Assign roles and restrict access to ensure users only see relevant data.
• Performance optimization: Use caching and optimize queries to improve load times.
• UI and UX consistency: Make dashboards match your application's design and ensure responsiveness.
• Monitoring and logging: Track usage and performance to detect and resolve issues early.

By following these practices, you ensure a stable, scalable, and secure analytics experience.

Why Choose Bold BI for Embedding Dashboards in a React App with Python?

Bold BI® enables secure analytics embedding in React applications using Python for token generation and authentication. With interactive dashboards, the Embedded SDK, and server-side authentication, developers can quickly integrate analytics into their applications.

Bold BI allows users to:

• Embed dashboards directly into React workflows.
• Access the dashboard securely with Python token generation.
• Deliver interactive analytics experiences.
• Simplify integration using the Embedded SDK.
• Scale analytics across users and applications.
• Support multi-tenant SaaS analytics.

Whether you are building SaaS platforms, enterprise applications, or customer portals, Bold BI provides a secure and scalable way to embed analytics into your React applications with Python.

Ready to get started? Download the React with Python sample, configure your embedding settings, and start delivering interactive dashboards. To learn more, explore the documentation, start a free trial, or request a demo to see how Bold BI fits your use case.

Frequently Asked Questions

1. 1.

   Why use Django for embedding dashboards?

   Django securely generates embed tokens and manages backend authentication.
2. 2.

   Can I embed dashboards without a backend?

   For secure token-based embedding, a backend should generate tokens and protect secrets.
3. 3.

   What is tokenGenerationUrl?

   It is the backend API endpoint used by the SDK to generate secure embed tokens.
4. 4.

   Does Bold BI support React integration?

   Yes, through its latest Embed SDK.
5. 5.

   Is this architecture scalable?

   Yes, it supports enterprise and multi-tenant deployments.