Skip to content
Snippets Groups Projects
Unverified Commit 35d89b05 authored by Jeff Bruemmer's avatar Jeff Bruemmer Committed by GitHub
Browse files

docs - sdk edits (#49480)

parent 8766bfa3
No related branches found
No related tags found
No related merge requests found
......@@ -4,6 +4,10 @@ title: "Embedded analytics SDK - appearance"
# Embedded analytics SDK - appearance
{% include beta-blockquote.html %}
{% include plans-blockquote.html feature="Embedded analytics SDK" sdk=true %}
You can style your embedded Metabase components with a theme.
Here's an example that includes the various styling options available:
......
......@@ -6,7 +6,7 @@ title: Embedded analytics SDK - authentication
{% include beta-blockquote.html %}
{% include plans-blockquote.html feature="Embedded analytics SDK" %}
{% include plans-blockquote.html feature="Embedded analytics SDK" sdk=true %}
Notes on handling authentication when working with the SDK.
......
......@@ -6,7 +6,7 @@ title: Embedded analytics SDK - collections
{% include beta-blockquote.html %}
{% include plans-blockquote.html feature="Embedded analytics SDK" %}
{% include plans-blockquote.html feature="Embedded analytics SDK" sdk=true %}
You can embed Metabase's collection browser so that people can explore items in your Metabase from your application.
......
......@@ -2,11 +2,11 @@
title: Embedded analytics SDK - config
---
{% include beta-blockquote.html %}
# Embedded analytics SDK - config
{% include plans-blockquote.html feature="Embedded analytics SDK" %}
{% include beta-blockquote.html %}
# Embedded analytics SDK - config
{% include plans-blockquote.html feature="Embedded analytics SDK" sdk=true %}
To use the SDK in your app, you need to import the `MetabaseProvider` component and provide it with a `config` object, like so:
......
......@@ -6,7 +6,7 @@ title: "Embedded analytics SDK - dashboards"
{% include beta-blockquote.html %}
{% include plans-blockquote.html feature="Embedded analytics SDK" %}
{% include plans-blockquote.html feature="Embedded analytics SDK" sdk=true %}
You can embed an interactive, editable, or static dashboard.
......
......@@ -6,7 +6,7 @@ title: Embedded analytics SDK
{% include beta-blockquote.html %}
{% include plans-blockquote.html feature="Embedded analytics SDK" %}
{% include plans-blockquote.html feature="Embedded analytics SDK" sdk=true %}
With the Embedded analytics SDK, you can embed individual Metabase components with React (like standalone charts, dashboards, the query builder, and more). You can manage access and interactivity per component, and you have advanced customization for seamless styling.
......
......@@ -4,6 +4,10 @@ title: Embedded analytics SDK - Using the SDK with Next.js
# Embedded analytics SDK - Using the SDK with Next.js
{% include beta-blockquote.html %}
{% include plans-blockquote.html feature="Embedded analytics SDK" sdk=true %}
Some notes on using the Embedded analytics SDK with [Next.js](https://nextjs.org/).
## Using App Router
......
......@@ -6,7 +6,7 @@ title: Embedded analytics SDK - plugins
{% include beta-blockquote.html %}
{% include plans-blockquote.html feature="Embedded analytics SDK" %}
{% include plans-blockquote.html feature="Embedded analytics SDK" sdk=true %}
The Metabase Embedding SDK supports plugins to customize the behavior of components. These plugins can be used in a global context or on a per-component basis.
......
......@@ -6,7 +6,7 @@ title: "Embedded analytics SDK - components"
{% include beta-blockquote.html %}
{% include plans-blockquote.html feature="Embedded analytics SDK" %}
{% include plans-blockquote.html feature="Embedded analytics SDK" sdk=true %}
There are different ways you can embed questions:
......
......@@ -6,6 +6,8 @@ title: Embedded analytics SDK - CLI quickstart
{% include beta-blockquote.html %}
{% include plans-blockquote.html feature="Embedded analytics SDK" sdk=true %}
We built a single command to spin up a Metabase and help you get an embedded dashboard in your app. This setup won't work in production; it's only intended for you to quickly try out the SDK on your local machine.
## Prerequisites
......
---
title: Embedded analytics SDK quickstart guide
title: Embedded analytics SDK - quickstart with sample app
---
# Embedded analytics SDK quickstart guide
# Embedded analytics SDK - quickstart with sample app
{% include beta-blockquote.html %}
{% include plans-blockquote.html feature="Embedded analytics SDK" %}
{% include plans-blockquote.html feature="Embedded analytics SDK" sdk=true %}
This guide sets up the embedded analytics SDK with the [sample React app](https://github.com/metabase/metabase-nodejs-react-sdk-embedding-sample), but you can follow along with your own application.
This guide sets up the embedded analytics SDK with a [sample React app](https://github.com/metabase/metabase-nodejs-react-sdk-embedding-sample), but you can follow along with your own application.
## Prerequisites
- [Node.js 18.x LTS or higher](https://nodejs.org/en) (for the sample application).
- [Metabase version v1.51 or higher](https://www.metabase.com/docs/latest/releases).
## Overview of the quickstart
......@@ -20,29 +21,47 @@ We're going to do some setup in Metabase, and in the sample application.
### Set up Metabase for embedding
1. [Set up Metabase Enterprise Edition](#set-up-metabase-for-embedding) (if you haven't already)
2. [Enable embedding](#enable-embedding-in-metabase)
3. [Enable SSO with JWT](#enable-sso-with-jwt)
1. [Install Metabase Enterprise Edition](#install-metabase-enterprise-edition) (if you haven't already)
2. [Activate your license](#activate-your-license)
3. [Enable embedding](#enable-embedding-in-metabase)
4. [Enable SSO with JWT](#enable-sso-with-jwt)
### Start up the sample application
4. [Get the sample application](#set-up-the-sample-application).
5. [Set up the application environment](#set-up-the-application-environment).
6. [Run the app server](#set-up-the-application-server) to handle authentication with JWT and server the embedded Metabase components.
7. [Run the client application](#set-up-the-client-application) that will contain Metabase components built with the SDK.
5. [Get the sample application](#set-up-the-sample-application).
6. [Set up the application environment](#set-up-the-application-environment).
7. [Run the app server](#set-up-the-application-server) to handle authentication with JWT and server the embedded Metabase components.
8. [Run the client application](#set-up-the-client-application) that will contain Metabase components built with the SDK.
And then fiddle around with styling.
Let's go.
## Set up Metabase for embedding
## Install Metabase Enterprise Edition
- [Run Metabase Pro on a Cloud plan (with a free trial)](https://www.metabase.com/pricing)
- Run Metabase Enterprise Edition locally. This sample app is compatible with [Metabase version v1.50 or higher](https://www.metabase.com/docs/latest/releases). When running locally, you'll need to [activate your license](https://www.metabase.com/docs/latest/paid-features/activating-the-enterprise-edition) to enable SSO with JWT.
You can run Metabase Pro on a Cloud plan (with a free trial)](https://www.metabase.com/pricing).
You can also use your existing Metabase, if you prefer.
Or run it locally. Here's a docker one-liner:
### Enable embedding in Metabase
```sh
docker run -d -p 3000:3000 --name metabase metabase/metabase-enterprise:latest
```
You can also [download the JAR](https://downloads.metabase.com/enterprise/latest/metabase.jar), and run it like so:
```sh
java -jar metabase.jar
```
By default, Metabase will run at `http://localhost:3000`.
If you get stuck, check out our [installation docs](../../installation-and-operation/installing-metabase.md).
## Activate your license
To enable SSO with JWT when self-hosting, you'll need to [activate your license](https://www.metabase.com/docs/latest/paid-features/activating-the-enterprise-edition). Metabase Pro plans on Cloud take care of this for you.
## Enable embedding in Metabase
From any Metabase page, click on the **gear** icon in the upper right and select **Admin Settings** > **Settings** > **Embedding**.
......@@ -53,23 +72,23 @@ Turn on:
Otherwise, this whole thing is hopeless.
### Enable SSO with JWT
## Enable SSO with JWT
From any Metabase page, click on the **gear** icon in the upper right and select **Admin Settings** > **Settings** > **Authentication**.
On the card that says **JWT**, click the **Setup** button.
#### JWT Identity provider URI
### JWT Identity provider URI
In **JWT IDENTITY PROVIDER URI** field, paste
```
```txt
localhost:9090/sso/metabase
```
Or substitute your Cloud URL for /localhost.
Or substitute your Cloud URL for `/localhost`.
#### String used by the JWT signing key
### String used by the JWT signing key
Click the **Generate key** button.
......@@ -77,7 +96,7 @@ Copy the key and paste it in your `.env` file into the env var `METABASE_JWT_SHA
The application server will use this key to sign tokens so Metabase knows the application's requests for content are authorized.
### Save and enable JWT
## Save and enable JWT
Be sure to hit the **Save and enable** button, or all is void.
......@@ -101,7 +120,7 @@ In `.env`, make sure `REACT_APP_METABASE_INSTANCE_URL` and `METABASE_INSTANCE_UR
You're `.env` will look something like:
```
```txt
# FRONTEND
PORT=3100
REACT_APP_METABASE_INSTANCE_URL="http://localhost:3000"
......
......@@ -6,11 +6,19 @@ title: Embedded analytics SDK - versions
{% include beta-blockquote.html %}
{% include plans-blockquote.html feature="Embedded analytics SDK" %}
{% include plans-blockquote.html feature="Embedded analytics SDK" sdk=true %}
The SDK version tracks with the Metabase version.
The SDK stable version tracks with the Metabase version.
So, for example, if you're on Metabase version `1.51.1`, you should use the SDK `1.51`.
So, for example, if you're on Metabase 51 (`0.51.x`, `1.51.x`), _any_ version 1.51.x of the @metabase/embedding-sdk-react npm package will be compatible.
To simplify things, we publish dist-tags for each stable Metabase version, starting from Metabase 51,`51-stable`. To install the latest version of the SDK compatible with Metabase 51, run:
```sh
npm install @metabase/embedding-sdk-react@51-stable
```
To grab the latest version of the SDK that works with Metabase nightly builds, use the `canary` dist-tag.
## Version pinning when using the SDK with Metabase Cloud
......
# Metabase embedded analytics SDK
> This SDK is actively being developed. You can expect some changes to the API. The SDK currently only works with a specific version of Metabase.
> This SDK is in public beta and actively being developed. You can expect some changes to the API, especially during the beta. The SDK currently only works with a Metabase 1.51 or higher.
With Metabase's Embedded analytics SDK, you can embed individual [Metabase](https://www.metabase.com/) components with React (like standalone charts, dashboards, the query builder, and more). You can manage access and interactivity per component, and you have advanced customization for seamless styling.
[Learn more](https://www.metabase.com/docs/latest/embedding/sdk/introduction).
## Installation
## Installing Metabase Enterprise Edition
You can run Metabase Pro on a Cloud plan (with a free trial)](https://www.metabase.com/pricing).
Or run it locally. Here's a docker one-liner:
```sh
docker run -d -p 3000:3000 --name metabase metabase/metabase-enterprise:latest
```
You can also [download the JAR](https://downloads.metabase.com/enterprise/latest/metabase.jar), and run it like so:
```sh
java -jar metabase.jar
```
By default, Metabase will run at `http://localhost:3000`.
If you get stuck, check out our [installation docs](https://www.metabase.com/docs/latest/installation-and-operation/installing-metabase).
## Installing the SDK
You can install Metabase Embedded analytics SDK for React via npm:
......@@ -20,6 +40,14 @@ or using yarn:
yarn add @metabase/embedding-sdk-react
```
## Which SDK version to use
The SDK version tracks with the Metabase version.
So, for example, if you're on Metabase version `1.51.x`, you should use the SDK with the tag `51-stable`.
See [Versioning](https://www.metabase.com/docs/latest/embedding/sdk/version).
## Docs
For how to use the SDK, check out our [docs for the Embedded analytics SDK](https://www.metabase.com/docs/latest/embedding/sdk/introduction).
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment