Docker for plugin development with live reload

Grafana Plugin Development Share & showcase
1

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.

2 Likes