You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/content/en/latest/architecture/supported_frameworks/_index.md
+3-1Lines changed: 3 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,9 @@ weight: 28
6
6
no_list: true
7
7
---
8
8
9
-
As of now, there is direct support only for [React](../../quick_start/) and [Angular 9+](./angular/). There are no near-future plans to introduce guides for any other platforms or frameworks.
9
+
As of now, there is direct support only for [React](../../quick_start/) and [Angular 9+](./angular/) and indirect for [Next.js](./nextjs/)
10
+
11
+
There are no near-future plans to introduce guides for any other platforms or frameworks.
10
12
11
13
GoodData.UI also support [Web Components](../../learn/embed_dashboards/web_components/), as we understand, that sometimes, you don't want to use the React, due to the innert complexity it would bring.
Next.js is not supported out-of-the-box by GoodData.UI.
8
+
9
+
However, rendering the GoodData visualizations in your Next.js project is not as daunting as it seems. This article serves as a quick demo of how to integrate GoodData visualizations into your project.
10
+
### Step 1: Install all necessary dependencies
11
+
12
+
The following packages deal with GoodData backend:
13
+
14
+
```bash
15
+
npm i @gooddata/api-client-tiger @gooddata/sdk-backend-tiger
16
+
```
17
+
18
+
The following package contains *all* components of GoodData UI SDK:
19
+
20
+
```bash
21
+
npm i @gooddata/sdk-ui-all
22
+
```
23
+
24
+
{{% alert title="Install only some components"%}}
25
+
If you do not need to install all components, you can select only those you need. For more information refer to the [documentation](../../../learn/integrate_and_authenticate/cn_and_cloud_integration/#IntegrateCNandCloudintoanExistingApplication-Step1Installthenecessarydependencies).
26
+
{{% /alert %}}
27
+
28
+
The following package will help you generate a file with code representation of all available metrics and attributes in your GoodData Cloud:
29
+
30
+
```bash
31
+
npm i -D @gooddata/catalog-export
32
+
```
33
+
34
+
### Step 2: Extend package.json
35
+
36
+
You need to modify `package.json`, and add the following properties:
37
+
38
+
```bash
39
+
"gooddata": {
40
+
"hostname": "<your-gooddata-host>",
41
+
"workspaceId": "<your-workspace-id>",
42
+
"catalogOutput": "app/gooddata-export.ts",
43
+
"backend": "tiger"
44
+
}
45
+
```
46
+
47
+
This configuration is for the `catalog-export` tool, which exports all available metrics and attributes to a single file that you can reference in your code.
48
+
49
+
### Step 3: Add a new script to package.json
50
+
51
+
```bash
52
+
"scripts": {
53
+
"dev": "next dev",
54
+
"build": "next build",
55
+
"start": "next start",
56
+
"lint": "next lint",
57
+
"refresh-md": "gdc-catalog-export"<-- this is the new script you need to add!
58
+
},
59
+
```
60
+
61
+
### Step 4: Add API token
62
+
63
+
```bash
64
+
export TIGER_API_TOKEN=<your-api-token>
65
+
```
66
+
67
+
*Note: more info on how to get API token is in the [documentation](https://www.gooddata.com/developers/cloud-native/doc/cloud/getting-started/create-api-token/).*
68
+
69
+
### Step 5: Configure CORS in GoodData
70
+
71
+
If your Next.js application runs on a different domain than GoodData (which is the most probable scenario), you need to configure CORS. Basically, you need to go to `<your-gooddata-host>/settings` and add Cross-origin resource sharing (CORS). If your Next.js application runs on domain *https://super-cool-app.com*, you need to add *https://super-cool-app.com* to CORS. You can find more information in the [documentation](https://www.gooddata.com/developers/cloud-native/doc/cloud/manage-organization/set-up-cors-for-organization/).
72
+
73
+
### Step 6: Run catalog-export tool to export metrics and attributes
74
+
75
+
```bash
76
+
npm run refresh-md
77
+
```
78
+
79
+
The successful result is:
80
+
The result generated from the workspace with id is located at `/app/gooddata-export.ts`.
0 commit comments