HMR for verdaccio plugin development

hmr-verdaccio.md

HMR for verdaccio plugin development

Verdaccio doesn't automatically reload plugins when files change, making plugin development a bit painful. So here is my approach for a hot module reload in verdaccio, so that verdaccio restarts whenever your plugin changes.

1. Create a project folder and a subfolder plugins. Bootstrap the plugin in that folder using the generator so that you end up with something like plugin/verdaccio-my-plugi/ folder structure.

2. First, let's add a watch mode for your plugin (if you don't have it yet) by adding the following script to you package.json: In plugin/verdaccio-my-plugin/package.json

  "scripts": {
    "watch": "tsc -w",
    ...
}

Now running npm run watch in your plugin folder will automatically compile any changes you make.

3. Now in your project root we'll create a verdaccio runner. Let's start with the package.json.

First we'll need a few dependencies:

npm install verdaccio@6-next @verdaccio/types@next-6 nodemon ts-node --save-dev

nodemon will watch for file changes and we'll use ts-node to directly run our typescript code.

Now we can add a script that performs the file watching and restarts our typescript runner

"scripts": {
    "watch": "npx nodemon --watch \"verdaccio-sourcify-analytics/src/**\" --ext \"ts,json\" --ignore \"src/**/*.spec.ts\" --exec \"npx ts-node --esm index.ts\""
  },

Next, we add our plugin as a file dependency:

  "dependencies": {
    "verdaccio-sourcify-analytics": "file:plugins/verdaccio-sourcify-analytics"
  }

Expand to see an example of a full package.json

"name": "verdaccio-runner",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "nodemon --watch \"plugins/verdaccio-my-plugin/src/**\" --ext \"ts,json\" --ignore \"src/**/*.spec.ts\" --exec \"npx ts-node --esm index.ts\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@verdaccio/types": "^11.0.0-6-next.25",
    "nodemon": "^2.0.22",
    "ts-node": "^10.9.1",
    "verdaccio": "^6.0.0-6-next.67"
  },
  "type": "module",
  "dependencies": {
    "verdaccio-sourcify-analytics": "file:plugins/verdaccio-my-plugin"
  }
}

4. Add a tsconfig.json

Expand to see an example `tsconfig.json`

{
"compilerOptions": {
  "target": "ES2017",
  "module": "ESNext",
  "declaration": true,
  "moduleResolution": "node",
  "allowJs": false,
  "noImplicitAny": false,
  "strict": true,
  "outDir": "./lib",
  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true
},
"include": [
  "src/*.ts",
  "types/*.ts"
]
}

5. Create the verdaccio runner. Add a file index.ts with the following content:

import { runServer } from "@verdaccio/node-api";

const app = await runServer("./config.yaml");

app.listen(4873, (event) => {});

6. Create config.yaml with your plugin:

middlewares:
  audit:
    enabled: true
  my-plugin:
    enabled: true

7. Run npm run watch in your plugin folder and in a different terminal run npm run watch in your verdaccio runner folder. Any change in your plugin code should now trigger a restart of verdaccio.

I extracted these steps from my project, so if anything in these steps isn't working please tell me.

I'm certain there are better ways to do this, although this works relatively well. If you have found a better way feel free to comment below.