Hi there,
I am developing a grafana panel plugin. I did npx @grafana/create-plugin@1.9.0 to create my plugin. I’m working on windows, and use ubuntu in the wsl subsystem. After that I run npm run install.
In the developing phase, i want to use the hot reload possibility. For that I use npm run dev and in a second console window npm run server. If I change a text in the sample panel plugin source, and reload grafana in the browser, the text will not be changed.
Do I make a mistake or is no hot reload possible?
Hey @phdehner - what text are you trying to change? I ask as if its in plugin.json then you’d have to restart, if its in module.ts the hot reload should work. So might just be something as simple as that.
May also be due to caching in the browser Stop Caching Plugins in Development
@davidharris3 Thanks for the fast reply!
I changed texts in the module.ts and in SimplePanel.tsx
I deleted the cache already 
No problem - apologies the reply didn’t help 
Could you try running npx envinfo --system --binaries --browsers --npmPackages="@grafana/*" in the plugin directory and sharing the results?
Is this for a public plugin where we can check out the source code too?
No problem, you couldn’t know what I’ve done already 
The result is
System:
OS: Linux 5.4 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
CPU: (2) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
Memory: 2.12 GB / 3.84 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 20.5.0 - ~/.nvm/versions/node/v20.5.0/bin/node
Yarn: 1.22.10 - /mnt/c/Users/phdehner/AppData/Roaming/npm/yarn
npm: 9.8.0 - ~/.nvm/versions/node/v20.5.0/bin/npm
npmPackages:
@grafana/data: 9.5.3 => 9.5.3
@grafana/e2e: 9.5.3 => 9.5.3
@grafana/e2e-selectors: 9.5.3 => 9.5.3
@grafana/eslint-config: ^6.0.0 => 6.0.0
@grafana/runtime: 9.5.3 => 9.5.3
@grafana/tsconfig: ^1.2.0-rc1 => 1.2.0-rc1
@grafana/ui: 9.5.3 => 9.5.3
The panel plugin is public, it is the plugin which is created by the npx @grafana/create-plugin@1.9.0
Hi @phdehner we don’t support “hot reload” in plugins in Grafana. only regular full page reload, but it does seem that is what you are doing.
I tested a setup like you described but with linux arch as the host machine:
- new panel plugin generated from create plugin
- run
npm install
- run
npm run dev
- run
npm run server[1]
- open
http://localhost:3000 in my browser
It all worked as expected. When I did a change in my SimplePanel.tsx I saw the page fully reload (no hot reload) and the changes appeared in my dashboard.
A few things to try and question for you:
- Make sure you let
npm run dev run and finish the first compile before you start the server.
- Make sure you are opening the correct local instance
localhost:3000
- Make sure you don’t have any other local grafana instance running (maybe from other plugin?)
- Make sure you are editing the plugin files from the same folder where you ran
dev and serve. You can’t, for instance, run server in plugin-a, edit files of plugin-b and expect to see the changes.
- When you edit a file in your plugin, observe the console where you run
dev and see if it generates more output. Usually on every file change you see an update of webpack compiling such as assets by status... (and so on).
For the sake of discard, maybe you can do the whole process again with a new plugin and make sure you are running all the commands only in the newly created plugin and make sure you stop all other server(s) you ran before.
I know many of the recommendations here look too basic but oh so many times I felt victim of not being in the correct directory or opening the wrong file that it is now the first thing I check.
Finally you are using nodejs 20. Grafana create-plugin supports the current LTS (at the moment of writing that is nodejs 18). I tested it all the previous with nodejs 20 and it worked fine but maybe try to use 18 and see if maybe that’s the problem.
Let me know if this helps fix the issue.
[1] It is important you only run server after you let dev run and do the first compile.
2 Likes
Hi @academo, thank you very much for your detailed answer. In my case I couldn’t see any change in the console after a code change.
My environment is the following:
- Windows 10 PC with WSL
- Plugin code in file system of the windows OS
- Running the npm commands in WSL, but in the following workspace:
/mnt/d/source/pluginCode/
I cannot run the commands in WSL with code which is mounted from the windows partitions. If I do everything in WSL or everything only in Windows, it is working.
For me it’s okay now. But do you know if this is just like that or if it is a bug?
Can you clarify this part please?
Do you mean you only experience the bug when you mix commands some running in WSL and others in native window?
You should know that WSL doesn’t really play well when you mix environments. e.g. run watch commands in linux and do file modifications in windows.
What you can do is run npm run dev manually when you do changes in your plugin or you can try with watchOptions.poll = true in webpack Watch and WatchOptions | webpack
I did npx @grafana/create-plugin@latest in the WSL environment, but the path where I run the the command, was the /mnt/d/source/pluginCode/. So the plugin code is created in the window partition which is mounted to the WSL system. In this case the page reload is not possible / I cannot see anything in the console after a change.
If I go to my home directory in WSL (cd ~), create the plugin here, and run the npm run dev here, it is working.
Is that clearly described?
@phdehner yes that’s clear. Your use case is not supported well by WSL and you won’t be able to work like that without doing some modifications either on your workflow or the plugin webpack configuration.
See the links I sent you previously regarding working across file systems and webpack poll watchOptions. Here’s how to extend the basic webpack config in your project.
Beyond that we can’t support your specific use case because WSL itself doesn’t support it.
1 Like
Hi I am having issue also when working at windows OS for developing plugin.
When I tried the “npx @grafana/create-plugin@latest” on my windows command it says that “Windows OS is not supported”.
I wonder how you solve this problem?
I tried a bunch of tutorial about WSL but still having the problem.
My environment is as follows:
Windows 11
Node16
Regards,
Henjoe
Hi @rikutozumoko Native windows is not supported for create-tools. If you are getting the error Windows Os is not supported is because you are running the create commands in a powershell or windows terminal (native windows)
WSL has its own terminal that you should use (not powershell, not windows cmd). Microsoft has a great tutorial on how to use it here Get started with Windows Subsystem for Linux (WSL). - Training | Microsoft Learn
@academo Do you have more information about the restriction from WSL? (links etc.) I’d like to know more about that limitation of the windows mounts.
The link in the linked pages refers to a 404 page…: https://grafana.github.io/plugin-tools/docs/advanced-configuration/
1 Like
@phdehner
If I go to my home directory in WSL (cd ~ ), create the plugin here, and run the npm run dev here, it is working.
I am experiencing exactly the same problem - can you please tell me how do you link the plugin in cd ~ directory to the Grafana running on Windows machine?
I just use npm run server → WSL calls docker compose on my windows system. Is that what you want to know?
My Grafana instance is on my Windows machine (not in docker).
WSL has it’s own files.
If I create a plugin inside the WSL Ubuntu file system (as you specified inside the ~ path) how do I link these new plugins to the Grafana instance on my Windows machine? (Grafana on my windows is not under docker).
Sorry, I do not understand. For me it is working if i create the plugin in wsl, run the npm install, the npm run dev and the npm run server even if docker is called from the windows system.
EDIT: Ok, now I did everything one more time, now I have also the problem i cannot reach docker
Solution:
@phdehner
I am sorry but my Grafana doesn’t run in Docker.
It is installed locally. 
using the Windows .msi installer (found here).
Mhmm I cannot imagine what the difference could be…
Hi @phdehner regarding how to do the correct file system linking in WSL I am not really the best person to provide aid and it goes beyond the scope of the create-plugin tool. See this article from microsoft about working across file systems Working across file systems | Microsoft Learn beyond this my only good advice is to either run all your commands always inside WSL or search for more support in the Microsoft forums.
We are doing some changes in our documentation structure and I sent you the link just before we changed it. This is the correct link: Extend configurations | Grafana Plugin Tools
1 Like
