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!
Top comments (0)