Publishing your first NPM package
Published: 2023-04-14 21:41:44

Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free [npm Registry](https://www.npmjs.com/) 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](https://www.npmjs.com/package/@callit-today/vendure-plugin-back-in-stock) developed over the [past few posts](https://dev.to/prasmalla/extending-vendures-functionality-with-custom-plugins-3l5c). For starters, we setup a dedicated [repo](https://github.com/calliT-today/vendure-plugin-back-in-stock) 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.

```json
{
  "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

```json
{
  "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](https://www.npmjs.com/) 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](https://dev.to/prasmalla/extending-vendures-functionality-with-custom-plugins-3l5c) 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](http://vendure.io/slack), look forward to seeing you there!