Publishing your first NPM package

Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of JavaScript code sharing, and with more than two million packages, the largest software registry in the world.

Today, we will be releasing the custom Back-In-Stock plugin for Vendure developed over the past few posts. For starters, we setup a dedicated repo for the plugin and copy over the contents from src/plugins/back-in-stock-plugin/ to the src folder of the new repo and the generated folder to the root of the project, updating path to all files that reference it.

Add README.md with plugin specific details and create a package.json for the plugin to be released. The README might take a while to show up after publishing, this is normal. Notice the name scoped to the user/organization to avoid polluting the global namespace.

{
  "name": "@callit-today/vendure-plugin-back-in-stock",
  "version": "1.0.2",
  "description": "Back-In-Stock Notification Plugin For Vendure",
  "author": "CALLiT.today <plugins@callit.today>",
  "repository": "https://github.com/calliT-today/vendure-plugin-back-in-stock",
  "license": "MIT",
  "private": false,
  "engines": {
    "node": ">=16.0.0"
  },
  "main": "dist/src/index.js",
  "types": "dist/src/index.d.ts",
  "files": [
    "dist",
    "README.md"
  ],
  "scripts": {
    "build": "rimraf dist && tsc"
  },
  "devDependencies": {
    "@vendure/admin-ui-plugin": "1.9.3",
    "@vendure/asset-server-plugin": "1.9.3",
    "@vendure/core": "1.9.3",
    "@vendure/email-plugin": "^1.9.5",
    "@vendure/ui-devkit": "1.9.3",
    "rimraf": "^4.1.2",
    "typescript": "4.9.5"
  }
}

Create a .gitignore file in the project root

__data__
dist
generated/
node_modules

Add a tsconfig.json to the project root

{
  "compilerOptions": {
    "lib": ["es2022"],
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2022",
    "strict": true,
    "sourceMap": false,
    "skipLibCheck": true,
    "types": ["node"],
    "declaration": true,
    "strictPropertyInitialization": false,
    "outDir": "dist"
  },
  "include": ["src/"],
  "exclude": ["src/plugins/**/ui/*"]
}

Before publishing to npm, run yarn to install all the dependencies and verify there are no errors. Now, run yarn build to create the package for distribution in dist folder and commit/push the repo with version tag. Register an account and sign-in with the npm-cli npm login

Finally, we can publish the package with npm publish --access public. The --access flag is required when publishing the first version. Don't forget to yarn build before releasing updates and then you can publish with npm publish without any flags.

Pat yourself in the back! this concludes the series on extending Vendure with custom plugin series. Now, the plugin can be used in any project by running yarn add @callit-today/vendure-plugin-back-in-stock

Share your accomplishments in the Vendure slack channel, look forward to seeing you there!