Docker for plugin development with live reload

[jackwestbrook]

I recently read @marcusolsson’s wonderful post on How I use Docker for plugin development to give me a kick start with getting a development environment up and running. Something that became bothersome for me whilst working on a panel plugin was needing to (or forgetting to) refresh the browser every time I made a change. In this post, I’ll show you how to automatically refresh the browser while developing your plugin.

The live reload webpack plugin allows Webpack to spin up a server that can trigger a webpage to reload after a successful build.

To implement the webpack plugin in a Grafana plugin Docker environment:

1. Create a Dockerfile to extend the Grafana image. This sets up some useful environment variables and uses sed to inject the livereload.js into the index.html file so the Webpack plugin can function.

   # Dockerfile
   FROM grafana/grafana:latest
   
   # Make it as simple as possible to access the grafana instance for development purposes
   # Do NOT enable these settings in a public facing / production grafana instance
   ENV GF_AUTH_ANONYMOUS_ORG_ROLE "Admin"
   ENV GF_AUTH_ANONYMOUS_ENABLED "true"
   ENV GF_AUTH_BASIC_ENABLED "false"
   # Set development mode so plugins can be loaded without need to sign
   ENV GF_DEFAULT_APP_MODE "development"
   # Load useful plugins to help with development
   ENV GF_INSTALL_PLUGINS "marcusolsson-static-datasource"
   
   # Inject livereload script into grafana index.html
   USER root
   RUN sed -i 's/<\/body><\/html>/<script src=\"http:\/\/localhost:35729\/livereload.js\"><\/script><\/body><\/html>/g' /usr/share/grafana/public/views/index.html
   

   I like docker compose as it saves me having to remember the run commands for spinning up containers.

2. Create a docker-compose.yml file.

   # docker-compose.yml
   version: "3.0"
   
   services:
     grafana:
       container_name: grafana-basic-panel
       # build the Dockerfile so the container image has the livereload script embedded
       build: .
       ports:
         - 3000:3000
       volumes:
         # mount the plugin "dist" directory inside the container
         - ./dist:/var/lib/grafana/plugins/basic-panel
   

3. Run the following to build the Dockerfile image and start a Docker container running on http://grafana.staged-by-discourse.com:

   docker-compose up -d
   

4. Install the Webpack plugin.

   yarn install --dev webpack-livereload-plugin
   

5. Create a webpack.config.js to extend the @grafana/toolkit webpack config with the following:

   const LiveReloadPlugin = require("webpack-livereload-plugin");
   
   module.exports.getWebpackConfig = (config, options) => ({
     ...config,
     plugins: [...config.plugins, new LiveReloadPlugin()],
   });
   

6. Run yarn dev to start developing a plugin.

When webpack rebuilds the plugin it triggers a browser refresh on http://grafana.staged-by-discourse.com.