# Developing Datasource Plugin in React

**URL:** <https://community.grafana.com/t/developing-datasource-plugin-in-react/21280>\
**Category:** Grafana\
**Tags:** templating, api\
**Created:** [September 22, 2019, 12:15pm UTC](https://community.grafana.com/t/developing-datasource-plugin-in-react/21280 "2019-09-22T12:15:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![danielle9897](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/danielle9897/32/8186_2.png) [@danielle9897](https://community.grafana.com/u/danielle9897)\
**Post date:** [September 22, 2019, 12:15pm UTC](https://community.grafana.com/t/developing-datasource-plugin-in-react/21280/1 "2019-09-22T12:15:49Z")

</div>

I need to develop a **Datasource** plugin.

1. Does Grafana already provide full support for **React data-sources plugins**?
2. Is there some example repository for a react datasource plugin anywhere ?

Any help is appreciated

---

<div class="post-metadata">

**Author:** ![marcusolsson](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/marcusolsson/32/7922_2.png) [@marcusolsson](https://community.grafana.com/u/marcusolsson)\
**Post date:** [September 22, 2019, 2:08pm UTC](https://community.grafana.com/t/developing-datasource-plugin-in-react/21280/2 "2019-09-22T14:08:34Z")

</div>

There is support for React plugins!

We certainly want to do more to help people getting started with plugins. Here are a few resources that might help:

A bare bones example that will eventually be used as the template we will use to create new plugins, is available here:

> **[grafana/simple-datasource](https://github.com/grafana/simple-datasource)**
>
> Boilerplate data source example. Contribute to grafana/simple-datasource development by creating an account on GitHub.

I’m also working on another example here:

> **[marcusolsson/grafana-csv-datasource](https://github.com/marcusolsson/grafana-csv-datasource)**
>
> Contribute to marcusolsson/grafana-csv-datasource development by creating an account on GitHub.

I’ve also started writing a guide on writing data source plugins, which you can find here:

> <https://github.com/marcusolsson/grafana-csv-datasource/blob/master/docs/getting-started-datasource-plugin.md>

  

> <https://github.com/marcusolsson/grafana-csv-datasource/blob/master/docs/adding-datasource-backend.md>

The guide still needs some more work, but I hope it still might be useful.

If you get stuck, I’d love to know where, so I can improve the guide! 🙂

/Marcus

---

<div class="post-metadata">

**Author:** ![danielle9897](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/danielle9897/32/8186_2.png) [@danielle9897](https://community.grafana.com/u/danielle9897)\
**Post date:** [September 22, 2019, 5:06pm UTC](https://community.grafana.com/t/developing-datasource-plugin-in-react/21280/3 "2019-09-22T17:06:08Z")

</div>

Thank you very much, we shall try using this!

---

<div class="post-metadata">

**Author:** ![danielle9897](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/danielle9897/32/8186_2.png) [@danielle9897](https://community.grafana.com/u/danielle9897)\
**Post date:** [September 23, 2019, 8:52am UTC](https://community.grafana.com/t/developing-datasource-plugin-in-react/21280/4 "2019-09-23T08:52:00Z")

</div>

Following the csv example docs - I am trying to run: `grafana-toolkit plugin:build`

1. Suggesting to change the docs to say: `yarn grafana-toolkit plugin:build`
2. Should the plugin directory (`grafana-csv-datasource`) be placed under the grafana/data/plugin folder ?
3. The build command fails with:  
=\> `Cannot read property 'name' of null`  
(after the previous steps were successful - Cleaning,Preparing,Prettier check,Linting,Tests)

It fails from somewhere inside the following code in `bundle.js:`

```
    compiler = webpack(webpack_plugin_config_1.getWebpackConfig({
        watch: watch,
        production: production,
    }));
```

---

<div class="post-metadata">

**Author:** ![marcusolsson](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/marcusolsson/32/7922_2.png) [@marcusolsson](https://community.grafana.com/u/marcusolsson)\
**Post date:** [September 23, 2019, 2:00pm UTC](https://community.grafana.com/t/developing-datasource-plugin-in-react/21280/5 "2019-09-23T14:00:20Z")

</div>

You can either place the plugin directory inside data/plugins, symlink it there, or configure the path to the plugin in the config file.

Hm, I’m thinking it could be related to your dependencies. Can you make sure you have the latest versions? Something like this:

```
"devDependencies": {
    "@grafana/data": "latest",
    "@grafana/runtime": "latest",
    "@grafana/toolkit": "next",
    "@grafana/ui": "latest",
    "@types/grafana": "github:CorpGlory/types-grafana.git"
  }
```

---

<div class="post-metadata">

**Author:** ![danielle9897](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/danielle9897/32/8186_2.png) [@danielle9897](https://community.grafana.com/u/danielle9897)\
**Post date:** [September 23, 2019, 3:17pm UTC](https://community.grafana.com/t/developing-datasource-plugin-in-react/21280/6 "2019-09-23T15:17:17Z")

</div>

I have found the problem 🙂  
Since I am working in Windows, I had to change the following in your file `webpack.plugin.config.js`

`var idx = id.indexOf('/src/');`  
=\>  
`var idx = id.indexOf('\\src\\');`

Are there more places like this to fix ?

---

<div class="post-metadata">

**Author:** ![danielle9897](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/danielle9897/32/8186_2.png) [@danielle9897](https://community.grafana.com/u/danielle9897)\
**Post date:** [September 24, 2019, 11:31am UTC](https://community.grafana.com/t/developing-datasource-plugin-in-react/21280/7 "2019-09-24T11:31:14Z")

</div>

1. Is the _‘ **backend plugin** ’_ mandatory in order to communicate with the server from which the data is fetched ?  
-or- can any code be executed in the `query` method in _DataSource.ts_ ?

2. Must the backend plugin be written in **GO**?

3. The plugin build command worked for me and the _dist_ folder was created -  
but after executing `yarn add @grafana/runtime --dev` then it no longer compiles -  
error on the `lodash` import statement.  
To solve that I added:  
`"noImplicitAny": false,` under “compilerOptions” in tsconfig.json

---

<div class="post-metadata">

**Author:** ![danielle9897](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/danielle9897/32/8186_2.png) [@danielle9897](https://community.grafana.com/u/danielle9897)\
**Post date:** [September 26, 2019, 7:41am UTC](https://community.grafana.com/t/developing-datasource-plugin-in-react/21280/8 "2019-09-26T07:41:14Z")

</div>

question is also [here](https://community.grafana.com/t/backend-datasource-react-plugin/21415)