Docker for plugin development with live reload

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://localhost:3000:

    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://localhost:3000.

2 Likes