diff --git a/docusaurus/docs/create-a-plugin/_category_.json b/docusaurus/docs/create-a-plugin/_category_.json deleted file mode 100644 index e02a34575..000000000 --- a/docusaurus/docs/create-a-plugin/_category_.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "position": 20, - "label": "Create a plugin", - "customProps": { - "description": "Guides for creating your Grafana plugin." - }, - "collapsible": true, - "collapsed": true -} diff --git a/docusaurus/docs/create-a-plugin/develop-a-plugin/_category_.json b/docusaurus/docs/create-a-plugin/develop-a-plugin/_category_.json deleted file mode 100644 index ceb352106..000000000 --- a/docusaurus/docs/create-a-plugin/develop-a-plugin/_category_.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "position": 1, - "label": "Develop a plugin", - "customProps": { - "description": "Guides for learning the fundamentals of Grafana plugin development." - }, - "collapsible": true, - "collapsed": true -} diff --git a/docusaurus/docs/create-a-plugin/develop-a-plugin/index.md b/docusaurus/docs/create-a-plugin/develop-a-plugin/index.md deleted file mode 100644 index 2f9a7753b..000000000 --- a/docusaurus/docs/create-a-plugin/develop-a-plugin/index.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -id: develop-a-plugin -title: Develop Grafana plugins -description: Learn about Grafana plugin development. -keywords: - - grafana - - plugins - - plugin - - develop - - development ---- - - diff --git a/docusaurus/docs/create-a-plugin/develop-a-plugin/set-up-github-workflows.md b/docusaurus/docs/create-a-plugin/develop-a-plugin/set-up-github-workflows.md deleted file mode 100644 index 876ddab1f..000000000 --- a/docusaurus/docs/create-a-plugin/develop-a-plugin/set-up-github-workflows.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: set-up-github-workflows -title: Set up GitHub workflows -description: How to automate your plugin development process by using GitHub workflows. -keywords: - - grafana - - plugins - - plugin - - github - - workflows - - CI - - continuous integration - - automation -sidebar_position: 4 ---- - -Automate your development process to minimize errors and make it faster and more cost-efficient. The `create-plugin` tool helps you to configure your GitHub actions workflows to help automate your development process. - -## The CI workflow - -The CI (`ci.yml`) workflow is designed to lint, type check, and build the frontend and backend. It is also used to run tests on your plugin every time you push changes to your repository. The `create-plugin` tool helps to catch any issues early in the development process, before they become bigger problems. - -## The release workflow - -The release (`release.yml`) workflow is designed to build, test, package and sign your plugin whenever you're ready to release a new version. This automates the process of creating releases in GitHub and provides instructions for submitting the plugin to the Grafana plugin catalog. - -:::warning - -This workflow requires a Grafana Cloud API key. Before you begin, follow the instructions for [generating an Access Policy token](../../publish-a-plugin/sign-a-plugin#generate-an-access-policy-token). - -::: - -### Storing your Access Policy token as a repository secret in GitHub - -1. Access Repository Settings: - -- Go to your GitHub repository. -- Navigate to the "Settings" tab. - -2. In the left sidebar, click on Secrets and Variables -> Actions -3. Click on the "New repository secret" button. -4. Add Secret Information: - -- Enter name for your secret - GRAFANA_ACCESS_POLICY_TOKEN. -- Paste the Access Policy Token value into the "Secret" field. - -5. Click on the "Add secret" button to save the secret. - -Once the secret is stored, you can access it in your GitHub Actions workflow: - -```json title="release.yml" -name: Release - -jobs: - release: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - uses: grafana/plugin-actions/build-plugin@release - with: - grafana_token: ${{ secrets.GRAFANA_ACCESS_POLICY_TOKEN }} - -``` - -In this example, the `secrets.GRAFANA_ACCESS_POLICY_TOKEN` variable is used to access the stored token securely within your GitHub Actions workflow. Make sure to adjust the workflow according to your specific needs and the language/environment you are working with. - -### Triggering the workflow - -To trigger the release workflow, push a Git tag for the plugin version that you want to release: - -```bash -git tag v1.0.0 -git push origin v1.0.0 -``` - -## The compatibility check (`is-compatible.yml`) - -The compatibility check (`is-compatible.yml`) workflow is designed to check the Grafana API compatibility of your plugin every time you push changes to your repository. This helps to catch potential frontend runtime issues before they occur. - -The workflow contains the following steps: - -1. Finding `@grafana` npm packages in your plugin. -1. Extracting the exported types of the specified version. -1. Comparing the differences between that version and the latest version. -1. Looking for usages of those changed APIs inside your plugin. -1. Reporting any potential incompatibilities. - -## Run e2e tests diff --git a/docusaurus/docs/create-a-plugin/develop-a-plugin/work-with-backend.md b/docusaurus/docs/create-a-plugin/develop-a-plugin/work-with-backend.md deleted file mode 100644 index 415cf9d87..000000000 --- a/docusaurus/docs/create-a-plugin/develop-a-plugin/work-with-backend.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: work-with-backend -title: Work with the backend -description: A guide to the Go commands frequently used in plugin development. -keywords: - - grafana - - plugins - - plugin - - go - - CLI commands -sidebar_position: 2 ---- - -Develop backend components for a Grafana plugin in [Go](https://go.dev/). The following commands are frequently used during backend plugin development: - -## Update the Go SDK - -To keep the [Grafana plugin SDK for Go](../../key-concepts/backend-plugins/grafana-plugin-sdk-for-go) up to date: -To keep the [Grafana plugin SDK for Go](../../key-concepts/backend-plugins/grafana-plugin-sdk-for-go) up to date: - -```bash -go get -u github.com/grafana/grafana-plugin-sdk-go -go mod tidy -``` - -## Build plugin binaries - -Build backend plugin binaries for Linux, Windows and Darwin: - -| Option | Description | Example | -| -------------- | -------------------------------------------- | --------------------- | -| `build:[arch]` | Builds a binary for a specific architecture. | `mage -v build:Linux` | - -## List available Mage targets - -List all available Mage targets for additional commands: - -```bash -mage -l -``` diff --git a/docusaurus/docs/create-a-plugin/develop-a-plugin/work-with-frontend.mdx b/docusaurus/docs/create-a-plugin/develop-a-plugin/work-with-frontend.mdx deleted file mode 100644 index c607f98b9..000000000 --- a/docusaurus/docs/create-a-plugin/develop-a-plugin/work-with-frontend.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: work-with-frontend -title: Work with frontend components -description: A guide for working with frontend components during Grafana plugin development. -keywords: - - grafana - - plugins - - plugin - - frontend - - CLI -sidebar_position: 1 ---- - -import FrontendCLInpm from '@snippets/createplugin-frontend-npm.md'; -import FrontendCLIpnpm from '@snippets/createplugin-frontend-pnpm.md'; -import FrontendCLIYarn from '@snippets/createplugin-frontend-yarn.md'; - -# Work with frontend components - -Develop the frontend component of a Grafana plugin in Typescript with ReactJS as the View library. Several commands are available within the `plugin` directory for interacting with the frontend. - -:::warning -We [do not support](https://grafana.com/docs/grafana/latest/developers/angular_deprecation/) plugins written in Angular. -::: - -## Frontend CLI reference - -You can run the following commands when developing your plugin: - - diff --git a/docusaurus/docs/create-a-plugin/extend-a-plugin/_category_.json b/docusaurus/docs/create-a-plugin/extend-a-plugin/_category_.json deleted file mode 100644 index 573354196..000000000 --- a/docusaurus/docs/create-a-plugin/extend-a-plugin/_category_.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "position": 2, - "label": "Extend a plugin", - "customProps": { - "description": "Guides for extending your Grafana plugin with additional features to improve its quality." - }, - "collapsible": true, - "collapsed": true -} diff --git a/docusaurus/docs/create-a-plugin/extend-a-plugin/extend-configurations.md b/docusaurus/docs/create-a-plugin/extend-a-plugin/extend-configurations.md deleted file mode 100644 index 42144fe7d..000000000 --- a/docusaurus/docs/create-a-plugin/extend-a-plugin/extend-configurations.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: extend-configurations -title: Extend configurations -description: Advanced configurations of Grafana plugins. -keywords: - - grafana - - plugins - - plugin - - advanced - - configuration ---- - -The `.config/` directory holds the preferred configuration for the different tools used to develop, test, and build a Grafana plugin. Although you can make changes, we recommend against doing so. Instead, follow the guidance in this topic to customize your tooling configs. - -:::danger - -Do not edit the `.config/` directory or extend the tooling configurations. If you attempt to do so, then you may experience issues such as failure to compile or load in Grafana. Instead of changing the files directly, follow the instructions in this topic to make advanced configurations. - -::: - -## Extend the ESLint config - -Edit the `.eslintrc` file in the project root to extend the ESLint configuration: - -**Example:** - -```json title=".eslintrc" -{ - // Eslint configuration provided by @grafana/create-plugin - "extends": "./.config/.eslintrc", - "rules": { - "react/prop-types": "off" - } -} -``` - -The following example can be used to disable deprecation notices. - -```json title=".eslintrc" -{ - // Eslint configuration provided by @grafana/create-plugin - "extends": "./.config/.eslintrc", - "overrides": [ - { - "files": ["src/**/*.{ts,tsx}"], - "rules": { - "deprecation/deprecation": "off" - } - } - ] -} -``` - ---- - -## Extend the Prettier config - -Edit the `.prettierrc.js` file in the project root to extend the Prettier configuration: - -**Example:** - -```js title=".prettierrc.js" -module.exports = { - // Prettier configuration provided by @grafana/create-plugin - ...require('./.config/.prettierrc.js'), - semi: false, -}; -``` - ---- - -## Extend the Jest config - -There are two files in the project root that belong to Jest: `jest-setup.js` and `jest.config.js`. - -**`jest-setup.js`:** This file is run before each test file in the suite is executed. It sets up Jest DOM for the testing library and applies some polyfills. For more information, refer to the [Jest documentation](https://jestjs.io/docs/configuration#setupfilesafterenv-array). - -**`jest.config.js`:** This is the Jest config file that extends the Grafana config. For more information, refer to the [Jest configuration documentation](https://jestjs.io/docs/configuration). - -### ESM errors with Jest - -If you see `SyntaxError: Cannot use import statement outside a module` when running Jest or `npm run test` see [Troubleshooting](../../troubleshooting.md#i-get-syntaxerror-cannot-use-import-statement-outside-a-module-when-running-jest-or-npm-run-test). - ---- - -## Extend the TypeScript config - -To extend the TS configuration, edit the `tsconfig.json` file in the project root: - -**Example:** - -```json title="tsconfig.json" -{ - // TypeScript configuration provided by @grafana/create-plugin - "extends": "./.config/tsconfig.json", - "compilerOptions": { - "preserveConstEnums": true - } -} -``` - ---- - -## Extend the Webpack config - -Follow these steps to extend the Webpack configuration that lives in `.config/`: - -### 1. Create a new Webpack configuration file - -Create a `webpack.config.ts` file in the project root. This file extends the Webpack config provided by `create-plugin`. - -### 2. Merge the Grafana config with your custom config - -Use the following [webpack-merge](https://github.com/survivejs/webpack-merge) command: - -```ts title="webpack.config.ts" -import type { Configuration } from 'webpack'; -import { merge } from 'webpack-merge'; -import grafanaConfig from './.config/webpack/webpack.config'; - -const config = async (env): Promise => { - const baseConfig = await grafanaConfig(env); - - return merge(baseConfig, { - // Add custom config here... - output: { - asyncChunks: true, - }, - }); -}; - -export default config; -``` - -The following alternative customization excludes "libs" via rules in addition to "node_modules". It also provides fallbacks that are no longer present in Webpack v5. - -```ts title="webpack.config.ts" -import type { Configuration } from 'webpack'; -import { mergeWithRules } from 'webpack-merge'; -import grafanaConfig from './.config/webpack/webpack.config'; - -const config = async (env: any): Promise => { - const baseConfig = await grafanaConfig(env); - const customConfig = { - module: { - rules: [ - { - exclude: /(node_modules|libs)/, - }, - ], - }, - resolve: { - fallback: { - crypto: require.resolve('crypto-browserify'), - fs: false, - path: require.resolve('path-browserify'), - stream: require.resolve('stream-browserify'), - util: require.resolve('util'), - }, - }, - }; - return mergeWithRules({ - module: { - rules: { - exclude: 'replace', - }, - }, - })(baseConfig, customConfig); -}; - -export default config; -``` - -### 3. Update the `package.json` to use the new Webpack config - -Update the `scripts` in the `package.json` to use the extended Webpack configuration: - -```diff title="package.json" --"build": "webpack -c ./.config/webpack/webpack.config.ts --env production", -+"build": "webpack -c ./webpack.config.ts --env production", --"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development", -+"dev": "webpack -w -c ./webpack.config.ts --env development", -``` diff --git a/docusaurus/docs/create-a-plugin/extend-a-plugin/index.md b/docusaurus/docs/create-a-plugin/extend-a-plugin/index.md deleted file mode 100644 index a155270aa..000000000 --- a/docusaurus/docs/create-a-plugin/extend-a-plugin/index.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -id: extend-a-plugin -title: Extend Grafana plugins -description: Learn how to extend or customize Grafana plugins. -keywords: - - grafana - - plugins - - plugin - - develop - - development ---- - - diff --git a/docusaurus/docs/create-a-plugin/index.md b/docusaurus/docs/create-a-plugin/index.md deleted file mode 100644 index 328932aa6..000000000 --- a/docusaurus/docs/create-a-plugin/index.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: create-plugin -title: Create a Grafana plugin -description: How to develop and extend a Grafana plugin. -keywords: - - grafana - - plugins - - plugin - - create - - develop - - extend - - enhance ---- - - diff --git a/docusaurus/docs/get-started/best-practices.md b/docusaurus/docs/get-started/best-practices.md index 21a7c9550..a558a8778 100644 --- a/docusaurus/docs/get-started/best-practices.md +++ b/docusaurus/docs/get-started/best-practices.md @@ -7,7 +7,7 @@ keywords: - plugins - plugin - best practices -sidebar_position: 0.5 +sidebar_position: 10 --- # Best practices for plugin development @@ -75,4 +75,4 @@ Is something missing from this list? [Let us know](https://github.com/grafana/pl ## Publishing a plugin - **Add a GitHub badge** - Follow [these steps](https://grafana.com/blog/2024/06/06/6-tips-to-improve-your-grafana-plugin-before-you-publish/#tip-4-add-dynamic-badges-to-your-readme) to help users find your plugin using GitHub badges. -- **Add workflow automation** - If your plugin is available on GitHub, consider [adding the GitHub workflows](../create-a-plugin/develop-a-plugin/set-up-github-workflows.md) for plugin development to your repository. +- **Add workflow automation** - If your plugin is available on GitHub, consider [adding the GitHub workflows](../get-started/set-up-development-environment.mdx#set-up-github-workflows) for plugin development to your repository. diff --git a/docusaurus/docs/get-started/folder-structure.md b/docusaurus/docs/get-started/folder-structure.md index e13bb8619..d03b245be 100644 --- a/docusaurus/docs/get-started/folder-structure.md +++ b/docusaurus/docs/get-started/folder-structure.md @@ -8,10 +8,10 @@ keywords: - plugin - create-plugin - folders -sidebar_position: 2 +sidebar_position: 60 --- -After you [install](./get-started.mdx#step-1-install-the-create-plugin-tool) the `create-plugin` tool and have answered the prompts, your project should look similar to this: +After you [Run](./get-started.mdx#run-the-create-plugin-tool) the `create-plugin` tool and have answered the prompts, your project should look similar to this: ``` myorg-myplugin-datasource/ diff --git a/docusaurus/docs/get-started/get-started.mdx b/docusaurus/docs/get-started/get-started.mdx index eb9c80578..f3e11f38b 100644 --- a/docusaurus/docs/get-started/get-started.mdx +++ b/docusaurus/docs/get-started/get-started.mdx @@ -17,6 +17,12 @@ import ScaffoldYarn from '@snippets/createplugin-scaffold.yarn.md'; import InstallNPM from '@snippets/createplugin-install.npm.md'; import InstallPNPM from '@snippets/createplugin-install.pnpm.md'; import InstallYarn from '@snippets/createplugin-install.yarn.md'; +import BuildFEDevNPM from '@snippets/createplugin-build-fe-dev.npm.md'; +import BuildFEDevPNPM from '@snippets/createplugin-build-fe-dev.pnpm.md'; +import BuildFEDevYarn from '@snippets/createplugin-build-fe-dev.yarn.md'; +import BuildFEProdNPM from '@snippets/createplugin-build-fe-prod.npm.md'; +import BuildFEProdPNPM from '@snippets/createplugin-build-fe-prod.pnpm.md'; +import BuildFEProdYarn from '@snippets/createplugin-build-fe-prod.yarn.md'; # Get started @@ -97,7 +103,7 @@ When you first run `@grafana/create-plugin`, choose your package manager: `npm`, ## Scaffold a plugin -### Step 1: Install the `create-plugin` tool +### Run the `create-plugin` tool Run the following command and answer the prompts: @@ -113,19 +119,9 @@ Run the following command and answer the prompts: For help with the prompts, refer to the [Prompts reference](../reference/prompts.md). -### Step 2: Open the generated folder structure +### Open the generated folder structure -When you've finished installing the tools, open the plugin folder: - - +Open the plugin folder to browse the generated plugin: The directory name `--` is based on the answers you gave to the prompts. Use the name of the generated folder when prompted. This directory contains the initial project structure to kickstart your plugin development. @@ -169,53 +165,107 @@ The file structure should look like this: For more information about these files, refer to [Folder structure](get-started/folder-structure/). -### Step 3: Run your plugin in Docker +## Build and run your plugin in Docker With the `create-plugin` tool, you can use a Docker container to simplify the configuration, loading, and development processes. For more information, refer to [Set up development environment](get-started/set-up-development-environment/). -Key CLI commands include: -- Install (`npm i`) -- Build the frontend in development mode (`npm run dev`) -- Build the backend (optional) (`mage -v build:linux`) -- Run the Grafana server (`npm run server`) +Refer to the "Next steps" terminal output following the [scaffolding of a new plugin](#scaffold-a-plugin) to install dependecies, build and run your plugin. -## Frequently used CLI commands -Use the CLI for essential tasks of plugin development, substituting `npm` for `pnpm`, or `yarn` based on your choice of package manager. +Example output: +``` +## What's next? -### `mage -v` +Run the following commands to get started: -Builds backend plugin binaries for Linux, Windows and Darwin. + * cd ./orgName-pluginName-app + * npm install to install frontend dependencies. + * npm exec playwright install chromium to install e2e test dependencies. + * npm run dev to build (and watch) the plugin frontend code. + * mage -v build:backend to build the plugin backend code. Rerun this command every time you edit your backend files. + * docker-compose up to start a grafana development server. + * Open http://localhost:3000 in your browser to create a dashboard to begin developing your plugin. -### `npm run build` +Note: We strongly recommend creating a new Git repository by running git init in ./org-pluginname-app before continuing. -Compiles and bundles the project using Webpack in production mode. + * Learn more about Grafana Plugin Development at https://grafana.com/developers/plugin-tools -### `npm run dev` +``` -Runs Webpack in watch mode for development, continually monitoring for changes. +### Install dependencies -### `npm run typecheck` + -Performs a type-checking process on the frontend code using TypeScript. +### Build the frontend -### `npm run server` +To build the plugin in watch mode for development, continually monitoring for changes, run: + -Launches the [Grafana development server](https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment) using Docker. -### `npm run sign` +To build for production, run: -Signs the Grafana plugin using the latest version of `@grafana/sign-plugin`. + -:::info +### Build the backend -For a complete list of available CLI commands, refer to the [CLI reference](/reference/cli-commands.md). +If your plugin includes a [backend](../key-concepts/backend-plugins/index.md) component, you can build using mage: -::: +```shell +mage -v build:linux +``` + +#### Build targets + +| Option | Description | Example | +| -------------- | -------------------------------------------- | --------------------- | +| `build:[arch]` | Builds a binary for a specific architecture. | `mage -v build:Linux` | + +List all available Mage targets for additional commands: + +```bash +mage -l +``` + +### Run the Grafana server + +To launch the Grafana development server using Docker, run: + +```shell +docker-compose up --build +``` + +Congratulations! You've just scaffolded your first plugin which you can now access at [http://localhost:3000](http://localhost:3000). ## Next steps - Start your plugin journey with one of our [plugin development tutorials](/tutorials/). -- Learn how to [develop and extend](/create-a-plugin/) its functionality. +- Learn how to [extend](/how-to-guides) its functionality. - Review the [plugin examples](https://github.com/grafana/grafana-plugin-examples) to learn about good practices. - Learn how to [package](/publish-a-plugin/package-a-plugin), [sign](/publish-a-plugin/sign-a-plugin), and [publish](/publish-a-plugin/publish-or-update-a-plugin.md) your plugin to the Grafana [plugin catalog](https://grafana.com/plugins). + +## See also +For a complete list of available CLI commands, refer to the [CLI reference](/reference/cli-commands.md). diff --git a/docusaurus/docs/get-started/set-up-development-environment.mdx b/docusaurus/docs/get-started/set-up-development-environment.mdx index c4a270f01..871565574 100644 --- a/docusaurus/docs/get-started/set-up-development-environment.mdx +++ b/docusaurus/docs/get-started/set-up-development-environment.mdx @@ -1,6 +1,6 @@ --- id: set-up-development-environment -title: Set up development environment +title: Set up your development environment description: Set up your development environment with Docker for Grafana plugin development. - grafana - plugins @@ -8,13 +8,24 @@ description: Set up your development environment with Docker for Grafana plugin - create-plugin - Docker - setup -sidebar_position: 3 + - CI + - continuous integration + - automation + - configuration +sidebar_position: 20 --- import DockerNPM from '@snippets/docker-grafana-version.npm.md'; import DockerPNPM from '@snippets/docker-grafana-version.pnpm.md'; import DockerYarn from '@snippets/docker-grafana-version.yarn.md'; +This guide walks you through setting up your development environment for Grafana plugin development. Including: +- Running a development Grafana server with your plugin installed using Docker +- Setting up GitHub workflows to automate your development and release process +- Extending configurations for ESLint, Prettier, Jest, TypeScript, and Webpack + +## Docker development environment + The [`create-plugin` tool](./get-started.mdx#use-plugin-tools-to-develop-your-plugins-faster) includes a development environment featuring [Docker](https://docs.docker.com/get-docker/). It allows you to start an instance of the Grafana application for plugin developers against which you can code. :::info @@ -23,7 +34,7 @@ It's not necessary to [sign a plugin](/publish-a-plugin/sign-a-plugin.md) during ::: -## Why use the Docker environment +### Why use the Docker environment We have chosen to use Docker because it simplifies the process of creating, deploying, and running applications. It allows you to create consistent and isolated environments for your plugin. This makes it easy to manage dependencies and ensure that the plugin runs the same way across different machines. @@ -31,7 +42,7 @@ With the `create-plugin` tool, the Docker container is configured with the neces The docker environment also allows you to attach a debugger to the plugin backend code, making the development process easier. -## Get started with Docker +### Get started with Docker To start your plugin development project, run the following commands in the order listed: @@ -130,3 +141,252 @@ You will also notice that the `docker-compose.yaml` file also has the following ``` they are necessary to allow delve to attach to the running process and debug it and should not be used in production environments. + +## Set up GitHub workflows + +Automate your development process to minimize errors and make it faster and more cost-efficient. The `create-plugin` tool helps you to configure your GitHub actions workflows to help automate your development process. + +### The CI workflow + +The CI (`ci.yml`) workflow is designed to lint, type check, and build the frontend and backend. It is also used to run tests on your plugin every time you push changes to your repository. The `create-plugin` tool helps to catch any issues early in the development process, before they become bigger problems. For more information on end-to-end testing as part of the CI workflow, refer to our [documentation](../e2e-test-a-plugin/ci.md). + +### The release workflow + +The release (`release.yml`) workflow is designed to build, test, package and sign your plugin whenever you're ready to release a new version. This automates the process of creating releases in GitHub and provides instructions for submitting the plugin to the Grafana plugin catalog. + +:::warning + +This workflow requires a Grafana Cloud API key. Before you begin, follow the instructions for [generating an Access Policy token](../publish-a-plugin/sign-a-plugin#generate-an-access-policy-token). + +::: + +#### Storing your Access Policy token as a repository secret in GitHub + +1. Access Repository Settings: + +- Go to your GitHub repository. +- Navigate to the "Settings" tab. + +2. In the left sidebar, click on Secrets and Variables -> Actions +3. Click on the "New repository secret" button. +4. Add Secret Information: + +- Enter name for your secret - GRAFANA_ACCESS_POLICY_TOKEN. +- Paste the Access Policy Token value into the "Secret" field. + +5. Click on the "Add secret" button to save the secret. + +Once the secret is stored, you can access it in your GitHub Actions workflow: + +```json title="release.yml" +name: Release + +jobs: + release: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: grafana/plugin-actions/build-plugin@release + with: + grafana_token: ${{ secrets.GRAFANA_ACCESS_POLICY_TOKEN }} + +``` + +In this example, the `secrets.GRAFANA_ACCESS_POLICY_TOKEN` variable is used to access the stored token securely within your GitHub Actions workflow. Make sure to adjust the workflow according to your specific needs and the language/environment you are working with. + +#### Triggering the workflow + +To trigger the release workflow, push a Git tag for the plugin version that you want to release: + +```bash +git tag v1.0.0 +git push origin v1.0.0 +``` + +### The compatibility check (`is-compatible.yml`) + +The compatibility check (`is-compatible.yml`) workflow is designed to check the Grafana API compatibility of your plugin every time you push changes to your repository. This helps to catch potential frontend runtime issues before they occur. + +The workflow contains the following steps: + +1. Finding `@grafana` npm packages in your plugin. +1. Extracting the exported types of the specified version. +1. Comparing the differences between that version and the latest version. +1. Looking for usages of those changed APIs inside your plugin. +1. Reporting any potential incompatibilities. + + +## Extend configurations + +The `.config/` directory holds the preferred configuration for the different tools used to develop, test, and build a Grafana plugin. Although you can make changes, we recommend against doing so. Instead, follow the guidance in this topic to customize your tooling configs. + +:::danger + +Do not edit the `.config/` directory or extend the tooling configurations. If you attempt to do so, then you may experience issues such as failure to compile or load in Grafana. Instead of changing the files directly, follow the instructions in this topic to make advanced configurations. + +::: + +### Extend the ESLint config + +Edit the `.eslintrc` file in the project root to extend the ESLint configuration: + +**Example:** + +```json title=".eslintrc" +{ + // Eslint configuration provided by @grafana/create-plugin + "extends": "./.config/.eslintrc", + "rules": { + "react/prop-types": "off" + } +} +``` + +The following example can be used to disable deprecation notices. + +```json title=".eslintrc" +{ + // Eslint configuration provided by @grafana/create-plugin + "extends": "./.config/.eslintrc", + "overrides": [ + { + "files": ["src/**/*.{ts,tsx}"], + "rules": { + "deprecation/deprecation": "off" + } + } + ] +} +``` + +--- + +### Extend the Prettier config + +Edit the `.prettierrc.js` file in the project root to extend the Prettier configuration: + +**Example:** + +```js title=".prettierrc.js" +module.exports = { + // Prettier configuration provided by @grafana/create-plugin + ...require('./.config/.prettierrc.js'), + semi: false, +}; +``` + +--- + +### Extend the Jest config + +There are two files in the project root that belong to Jest: `jest-setup.js` and `jest.config.js`. + +**`jest-setup.js`:** This file is run before each test file in the suite is executed. It sets up Jest DOM for the testing library and applies some polyfills. For more information, refer to the [Jest documentation](https://jestjs.io/docs/configuration#setupfilesafterenv-array). + +**`jest.config.js`:** This is the Jest config file that extends the Grafana config. For more information, refer to the [Jest configuration documentation](https://jestjs.io/docs/configuration). + +#### ESM errors with Jest + +If you see `SyntaxError: Cannot use import statement outside a module` when running Jest or `npm run test` see [Troubleshooting](../troubleshooting#i-get-syntaxerror-cannot-use-import-statement-outside-a-module-when-running-jest-or-npm-run-test). + +--- + +### Extend the TypeScript config + +To extend the TS configuration, edit the `tsconfig.json` file in the project root: + +**Example:** + +```json title="tsconfig.json" +{ + // TypeScript configuration provided by @grafana/create-plugin + "extends": "./.config/tsconfig.json", + "compilerOptions": { + "preserveConstEnums": true + } +} +``` + +--- + +### Extend the Webpack config + +Follow these steps to extend the Webpack configuration that lives in `.config/`: + +#### 1. Create a new Webpack configuration file + +Create a `webpack.config.ts` file in the project root. This file extends the Webpack config provided by `create-plugin`. + +#### 2. Merge the Grafana config with your custom config + +Use the following [webpack-merge](https://github.com/survivejs/webpack-merge) command: + +```ts title="webpack.config.ts" +import type { Configuration } from 'webpack'; +import { merge } from 'webpack-merge'; +import grafanaConfig from './.config/webpack/webpack.config'; + +const config = async (env): Promise => { + const baseConfig = await grafanaConfig(env); + + return merge(baseConfig, { + // Add custom config here... + output: { + asyncChunks: true, + }, + }); +}; + +export default config; +``` + +The following alternative customization excludes "libs" via rules in addition to "node_modules". It also provides fallbacks that are no longer present in Webpack v5. + +```ts title="webpack.config.ts" +import type { Configuration } from 'webpack'; +import { mergeWithRules } from 'webpack-merge'; +import grafanaConfig from './.config/webpack/webpack.config'; + +const config = async (env: any): Promise => { + const baseConfig = await grafanaConfig(env); + const customConfig = { + module: { + rules: [ + { + exclude: /(node_modules|libs)/, + }, + ], + }, + resolve: { + fallback: { + crypto: require.resolve('crypto-browserify'), + fs: false, + path: require.resolve('path-browserify'), + stream: require.resolve('stream-browserify'), + util: require.resolve('util'), + }, + }, + }; + return mergeWithRules({ + module: { + rules: { + exclude: 'replace', + }, + }, + })(baseConfig, customConfig); +}; + +export default config; +``` + +#### 3. Update the `package.json` to use the new Webpack config + +Update the `scripts` in the `package.json` to use the extended Webpack configuration: + +```diff title="package.json" +-"build": "webpack -c ./.config/webpack/webpack.config.ts --env production", ++"build": "webpack -c ./webpack.config.ts --env production", +-"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development", ++"dev": "webpack -w -c ./webpack.config.ts --env development", +``` + diff --git a/docusaurus/docs/create-a-plugin/extend-a-plugin/add-anonymous-usage-reporting.md b/docusaurus/docs/how-to-guides/add-anonymous-usage-reporting.md similarity index 100% rename from docusaurus/docs/create-a-plugin/extend-a-plugin/add-anonymous-usage-reporting.md rename to docusaurus/docs/how-to-guides/add-anonymous-usage-reporting.md diff --git a/docusaurus/docs/create-a-plugin/extend-a-plugin/add-return-to-previous-functionality.md b/docusaurus/docs/how-to-guides/app-plugins/add-return-to-previous-functionality.md similarity index 100% rename from docusaurus/docs/create-a-plugin/extend-a-plugin/add-return-to-previous-functionality.md rename to docusaurus/docs/how-to-guides/app-plugins/add-return-to-previous-functionality.md diff --git a/docusaurus/docs/how-to-guides/data-source-plugins/add-logs-metrics-traces-for-backend-plugins.md b/docusaurus/docs/how-to-guides/data-source-plugins/add-logs-metrics-traces-for-backend-plugins.md index eadffe1c3..9d20707d2 100644 --- a/docusaurus/docs/how-to-guides/data-source-plugins/add-logs-metrics-traces-for-backend-plugins.md +++ b/docusaurus/docs/how-to-guides/data-source-plugins/add-logs-metrics-traces-for-backend-plugins.md @@ -112,7 +112,7 @@ Use a contextual logger to automatically include additional key-value pairs atta :::note -Make sure you are using at least [grafana-plugin-sdk-go v0.186.0](https://github.com/grafana/grafana-plugin-sdk-go/releases/tag/v0.186.0). Refer to [Update the Go SDK](../../create-a-plugin/develop-a-plugin/work-with-backend#update-the-go-sdk) for update instructions. +Make sure you are using at least [grafana-plugin-sdk-go v0.186.0](https://github.com/grafana/grafana-plugin-sdk-go/releases/tag/v0.186.0). Refer to [Update the Go SDK](../../key-concepts/backend-plugins/grafana-plugin-sdk-for-go.md#update-the-go-sdk) for update instructions. ::: @@ -394,7 +394,7 @@ If tracing is disabled in Grafana, `backend.DefaultTracer()` returns a no-op tra :::note -Make sure you are using at least [`grafana-plugin-sdk-go v0.157.0`](https://github.com/grafana/grafana-plugin-sdk-go/releases/tag/v0.157.0). Refer to [Update the Go SDK](../../create-a-plugin/develop-a-plugin/work-with-backend) for update instructions. +Make sure you are using at least [`grafana-plugin-sdk-go v0.157.0`](https://github.com/grafana/grafana-plugin-sdk-go/releases/tag/v0.157.0). Refer to [Update the Go SDK](../../key-concepts/backend-plugins/grafana-plugin-sdk-for-go.md#update-the-go-sdk) for update instructions. ::: diff --git a/docusaurus/docs/create-a-plugin/develop-a-plugin/panel-properties.md b/docusaurus/docs/how-to-guides/panel-plugins/subscribe-events.md similarity index 99% rename from docusaurus/docs/create-a-plugin/develop-a-plugin/panel-properties.md rename to docusaurus/docs/how-to-guides/panel-plugins/subscribe-events.md index b027cc794..edecad9c6 100644 --- a/docusaurus/docs/create-a-plugin/develop-a-plugin/panel-properties.md +++ b/docusaurus/docs/how-to-guides/panel-plugins/subscribe-events.md @@ -12,7 +12,6 @@ keywords: - event bus - subscribe - events -sidebar_position: 5 --- # Subscribe to Grafana events diff --git a/docusaurus/docs/create-a-plugin/develop-a-plugin/plugin-spellcheck.md b/docusaurus/docs/how-to-guides/plugin-spellcheck.md similarity index 100% rename from docusaurus/docs/create-a-plugin/develop-a-plugin/plugin-spellcheck.md rename to docusaurus/docs/how-to-guides/plugin-spellcheck.md diff --git a/docusaurus/docs/key-concepts/backend-plugins/grafana-plugin-sdk-for-go.md b/docusaurus/docs/key-concepts/backend-plugins/grafana-plugin-sdk-for-go.md index a067076df..b27188549 100644 --- a/docusaurus/docs/key-concepts/backend-plugins/grafana-plugin-sdk-for-go.md +++ b/docusaurus/docs/key-concepts/backend-plugins/grafana-plugin-sdk-for-go.md @@ -24,6 +24,15 @@ The Grafana plugin Go SDK is still in development. It is based on the [plugin pr When we update the plugin SDK, those plugins that use an older version of the SDK should still work with Grafana. However, these older plugins may be unable to use the new features and capabilities we introduce in updated SDK versions. +## Update the Go SDK + +To keep the Grafana plugin SDK for Go up to date: + +```bash +go get -u github.com/grafana/grafana-plugin-sdk-go +go mod tidy +``` + ## See also - [SDK source code](https://github.com/grafana/grafana-plugin-sdk-go) diff --git a/docusaurus/docs/migration-guides/migrate-from-toolkit.mdx b/docusaurus/docs/migration-guides/migrate-from-toolkit.mdx index 353a07811..dad681dfd 100644 --- a/docusaurus/docs/migration-guides/migrate-from-toolkit.mdx +++ b/docusaurus/docs/migration-guides/migrate-from-toolkit.mdx @@ -115,8 +115,8 @@ When the migration command finishes running, follow these following steps: 1. Run each npm script inside `package.json` to confirm that the plugin can be built, tested, and signed. -If the plugin had customizations to the toolkit configs (for example, webpack), then refer to [Extend configurations](/create-a-plugin/extend-a-plugin/extend-configurations) to learn how to update them. +If the plugin had customizations to the toolkit configs (for example, webpack), then refer to [Extend configurations](../get-started/set-up-development-environment.mdx#extend-configurations) to learn how to update them. -If the plugin can be built, but there are problems with Jest tests, then see the [Jest advanced configuration](/create-a-plugin/extend-a-plugin/extend-configurations#esm-errors-with-jest) issue regarding es modules. +If the plugin can be built, but there are problems with Jest tests, then see the [Jest advanced configuration](../get-started/set-up-development-environment.mdx#esm-errors-with-jest) issue regarding es modules. For help with other issues, reach out on [Slack](https://grafana.slack.com/) or the [Community forum](https://community.grafana.com/c/plugin-development/30). diff --git a/docusaurus/docs/publish-a-plugin/build-automation.md b/docusaurus/docs/publish-a-plugin/build-automation.md index fbd497824..1c8f4d14d 100644 --- a/docusaurus/docs/publish-a-plugin/build-automation.md +++ b/docusaurus/docs/publish-a-plugin/build-automation.md @@ -15,7 +15,7 @@ keywords: # Automate packaging and signing with GitHub CI -We recommend setting up your plugin to use the supplied [Github workflows](../create-a-plugin/develop-a-plugin/set-up-github-workflows.md) from [create-plugin](../get-started/get-started.mdx) +We recommend setting up your plugin to use the supplied [Github workflows](../get-started/set-up-development-environment.mdx#set-up-github-workflows) from [create-plugin](../get-started/get-started.mdx) to ensure that your plugin will be built and packaged in the correct format. To do so, refer to [these docs](https://github.com/grafana/plugin-actions/blob/main/build-plugin/README.md). diff --git a/docusaurus/docs/reference/prompts.md b/docusaurus/docs/reference/prompts.md index 18c3fff4e..255f092a6 100644 --- a/docusaurus/docs/reference/prompts.md +++ b/docusaurus/docs/reference/prompts.md @@ -51,8 +51,8 @@ App and data source plugins can have a backend component written in Go. Backend ### Do you want to add GitHub CI and Release workflows? -Add [GitHub workflows](/create-a-plugin/develop-a-plugin/set-up-github-workflows) to your development cycle to help catch issues early or release your plugin to the community. +Add [GitHub workflows](../get-started/set-up-development-environment.mdx#set-up-github-workflows) to your development cycle to help catch issues early or release your plugin to the community. ### Do you want to add a GitHub workflow to automatically check Grafana API compatibility on PRs? -Add a [GitHub workflow](/create-a-plugin/develop-a-plugin/set-up-github-workflows#the-compatibility-check-is-compatibleyml) to regularly check that your plugin is compatible with the latest version of Grafana. +Add a [GitHub workflow](../get-started/set-up-development-environment.mdx#the-compatibility-check-is-compatibleyml) to regularly check that your plugin is compatible with the latest version of Grafana. diff --git a/docusaurus/docs/snippets/createplugin-build-fe-dev.npm.md b/docusaurus/docs/snippets/createplugin-build-fe-dev.npm.md new file mode 100644 index 000000000..385d15fec --- /dev/null +++ b/docusaurus/docs/snippets/createplugin-build-fe-dev.npm.md @@ -0,0 +1,3 @@ +```shell +npm run dev +``` diff --git a/docusaurus/docs/snippets/createplugin-build-fe-dev.pnpm.md b/docusaurus/docs/snippets/createplugin-build-fe-dev.pnpm.md new file mode 100644 index 000000000..64edbdd85 --- /dev/null +++ b/docusaurus/docs/snippets/createplugin-build-fe-dev.pnpm.md @@ -0,0 +1,3 @@ +```shell +pnpm run dev +``` diff --git a/docusaurus/docs/snippets/createplugin-build-fe-dev.yarn.md b/docusaurus/docs/snippets/createplugin-build-fe-dev.yarn.md new file mode 100644 index 000000000..559c12e8e --- /dev/null +++ b/docusaurus/docs/snippets/createplugin-build-fe-dev.yarn.md @@ -0,0 +1,3 @@ +```shell +yarn run dev +``` diff --git a/docusaurus/docs/snippets/createplugin-build-fe-prod.npm.md b/docusaurus/docs/snippets/createplugin-build-fe-prod.npm.md new file mode 100644 index 000000000..634d87969 --- /dev/null +++ b/docusaurus/docs/snippets/createplugin-build-fe-prod.npm.md @@ -0,0 +1,3 @@ +```shell +npm run build +``` diff --git a/docusaurus/docs/snippets/createplugin-build-fe-prod.pnpm.md b/docusaurus/docs/snippets/createplugin-build-fe-prod.pnpm.md new file mode 100644 index 000000000..2fdac104a --- /dev/null +++ b/docusaurus/docs/snippets/createplugin-build-fe-prod.pnpm.md @@ -0,0 +1,3 @@ +```shell +pnpm run build +``` diff --git a/docusaurus/docs/snippets/createplugin-build-fe-prod.yarn.md b/docusaurus/docs/snippets/createplugin-build-fe-prod.yarn.md new file mode 100644 index 000000000..942dede3f --- /dev/null +++ b/docusaurus/docs/snippets/createplugin-build-fe-prod.yarn.md @@ -0,0 +1,3 @@ +```shell +yarn run build +``` diff --git a/docusaurus/docs/troubleshooting.md b/docusaurus/docs/troubleshooting.md index 5d14b21af..05f970c88 100644 --- a/docusaurus/docs/troubleshooting.md +++ b/docusaurus/docs/troubleshooting.md @@ -62,7 +62,7 @@ If you're using mounts to access your files, it's likely that webpack isn't dete #### What you can do: - If you're editing your code from a native Windows app (such as VS Code), you need to manually rerun `yarn build` every time you want to see a change in your plugin. -- Use [webpack `watchOption` with `poll`](https://webpack.js.org/configuration/watch/#watchoptionspoll) in your project. Find instructions on how to extend webpack configuration in our [documentation](https://grafana.com/developers/plugin-tools/create-a-plugin/extend-configurations). +- Use [webpack `watchOption` with `poll`](https://webpack.js.org/configuration/watch/#watchoptionspoll) in your project. Find instructions on how to extend webpack configuration in our [documentation](./get-started/set-up-development-environment.mdx#extend-configurations). ### I get `SyntaxError: Cannot use import statement outside a module` when running Jest or `npm run test`. diff --git a/docusaurus/website/docusaurus.config.base.js b/docusaurus/website/docusaurus.config.base.js index ae4afebdb..b74418d4b 100644 --- a/docusaurus/website/docusaurus.config.base.js +++ b/docusaurus/website/docusaurus.config.base.js @@ -165,6 +165,34 @@ const plugins = [ from: ['/create-a-plugin/extend-a-plugin/include-dashboards'], to: '/how-to-guides/data-source-plugins/include-dashboards', }, + { + from: ['/create-a-plugin/develop-a-plugin/work-with-frontend'], + to: '/reference/cli-commands/', + }, + { + from: ['/create-a-plugin/develop-a-plugin/work-with-backend'], + to: '/reference/cli-commands/', + }, + { + from: ['/create-a-plugin/develop-a-plugin/set-up-github-workflows'], + to: '/get-started/set-up-development-environment#set-up-github-workflows', + }, + { + from: ['/create-a-plugin/develop-a-plugin/subscribe-events'], + to: '/how-to-guides/panel-plugins/subscribe-events', + }, + { + from: ['/create-a-plugin/extend-a-plugin/add-anonymous-usage-reporting'], + to: '/how-to-guides/add-anonymous-usage-reporting', + }, + { + from: ['/create-a-plugin/extend-a-plugin/add-return-to-previous-functionality'], + to: '/how-to-guides/app-plugins/add-return-to-previous-functionality', + }, + { + from: ['/create-a-plugin/extend-a-plugin/extend-configurations'], + to: '/get-started/set-up-development-environment#extend-configurations', + }, ], }, ], diff --git a/packages/create-plugin/README.md b/packages/create-plugin/README.md index 7f22d5d4c..121eafc3f 100644 --- a/packages/create-plugin/README.md +++ b/packages/create-plugin/README.md @@ -97,7 +97,7 @@ For more information see [here](https://grafana.com/developers/plugin-tools/migr ## Customizing or extending the basic configs -You can read more about customizing or extending the basic configuration in our [documentation](https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations). +You can read more about customizing or extending the basic configuration in our [documentation](https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-configurations). ## Add provisioning to your existing plugin diff --git a/packages/create-plugin/src/constants.ts b/packages/create-plugin/src/constants.ts index d4bd1dd53..b89416ff8 100644 --- a/packages/create-plugin/src/constants.ts +++ b/packages/create-plugin/src/constants.ts @@ -129,7 +129,7 @@ export const TEXT = { * Run \`yarn build\` and observe the output for any errors. * Test your plugin in grafana and make sure everything works as expected. -See instructions on how to customize your configuration here https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations +See instructions on how to customize your configuration here https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-configurations `, updateCommandWarning: '**⚠️ Warning!**\nThis is going to update files under the `.config/` folder.\nMake sure to commit your changes before running this script.', diff --git a/packages/create-plugin/templates/common/.config/_eslintrc b/packages/create-plugin/templates/common/.config/_eslintrc index 1486ed2e0..b61476097 100644 --- a/packages/create-plugin/templates/common/.config/_eslintrc +++ b/packages/create-plugin/templates/common/.config/_eslintrc @@ -2,7 +2,7 @@ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️ * * In order to extend the configuration follow the steps in - * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-eslint-config + * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-eslint-config */ { "extends": ["@grafana/eslint-config"], diff --git a/packages/create-plugin/templates/common/.config/jest-setup.js b/packages/create-plugin/templates/common/.config/jest-setup.js index 27d6420d7..d0629b471 100644 --- a/packages/create-plugin/templates/common/.config/jest-setup.js +++ b/packages/create-plugin/templates/common/.config/jest-setup.js @@ -2,7 +2,7 @@ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️ * * In order to extend the configuration follow the steps in - * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-jest-config + * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-jest-config */ import '@testing-library/jest-dom'; diff --git a/packages/create-plugin/templates/common/.config/jest.config.js b/packages/create-plugin/templates/common/.config/jest.config.js index 94489cb2b..09704b4fb 100644 --- a/packages/create-plugin/templates/common/.config/jest.config.js +++ b/packages/create-plugin/templates/common/.config/jest.config.js @@ -2,7 +2,7 @@ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️ * * In order to extend the configuration follow the steps in - * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-jest-config + * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-jest-config */ const path = require('path'); diff --git a/packages/create-plugin/templates/common/.config/tsconfig.json b/packages/create-plugin/templates/common/.config/tsconfig.json index 207b28fb5..15e64aca0 100644 --- a/packages/create-plugin/templates/common/.config/tsconfig.json +++ b/packages/create-plugin/templates/common/.config/tsconfig.json @@ -2,7 +2,7 @@ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️ * * In order to extend the configuration follow the steps in - * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-typescript-config + * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-typescript-config */ { "compilerOptions": { diff --git a/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts b/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts index 43cb7dfe7..2cf6bfd7e 100644 --- a/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts +++ b/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts @@ -2,7 +2,7 @@ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️ * * In order to extend the configuration follow the steps in - * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-webpack-config + * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-webpack-config */ import CopyWebpackPlugin from 'copy-webpack-plugin';