Looking to learn how to publish NPM package for the first time
Unanswered
aardani posted this in #help-forum
aardaniOP
I had a package that i want to publish. Its really just a wrapper function that wrap existing code so one way to approach this to not just make installable module and just make it copy paste-able like [server-only-context](https://github.com/manvalls/server-only-context/blob/main/src/index.ts).
Another reason is because publishing in NPM gives a certain amount of inherent expectation of maintainance and commitment to the package.
However, that aside now i would like to learn how to publish my first package (even though its just a wrapper 😠) in NPM. I have no experience in CI/CD tools beside
Here is my repo https://github.com/alfonsusac/nextjs-better-unstable-cache. As you can see its using github repo to host the files hence the output lib is not ignored.
Another reason is because publishing in NPM gives a certain amount of inherent expectation of maintainance and commitment to the package.
However, that aside now i would like to learn how to publish my first package (even though its just a wrapper 😠) in NPM. I have no experience in CI/CD tools beside
npm run dev and tsc build so any guidance such as recommended tools and step by step setup is appreciated, or just a simple link to an article.Here is my repo https://github.com/alfonsusac/nextjs-better-unstable-cache. As you can see its using github repo to host the files hence the output lib is not ignored.
8 Replies
aardaniOP
cc @not-milo.tsx , but others are welcome to join
Ok, so... In order for you to be able to publish a package to the npm registry first you'll have to create an account and you can do that by going to the [npm signup page](https://www.npmjs.com/signup) and following the prompts (pretty standard stuff). Before you go any further you'll have to verify your email, if you don't you won't be able to publish anything 👀
The fun part begins once you've done that ✨
For the publishing process I strongly recommend using a tool to manage versioning like [Changesets](https://github.com/changesets/changesets), and that's what I'll be using for the demo.
First of all you'll need to install the Changesets cli as a dev dependency to your project. If you're using pnpm you'll do it like so:
Then you'll have to initialise Changesets by running
Once Changesets is initialised you can start using it. Generally the process looks something like this:
- something changed in your code base
- you run
- after following the prompts in the terminal a temporary changeset markdown file is generated
- you then run
- once you did that you commit the newly generated/updated files
- and finally after all this you run
After all this is done you can start installing your package wherever you like and with whichever package manager you prefer
For the publishing process I strongly recommend using a tool to manage versioning like [Changesets](https://github.com/changesets/changesets), and that's what I'll be using for the demo.
First of all you'll need to install the Changesets cli as a dev dependency to your project. If you're using pnpm you'll do it like so:
pnpm add -D @changesets/cliThen you'll have to initialise Changesets by running
pnpm changeset init (note there's no s at the end). This will create a .changeset directory with a config.json and README.md file in it. Again, nothing fancy.Once Changesets is initialised you can start using it. Generally the process looks something like this:
- something changed in your code base
- you run
pnpm changeset from the root of the project- after following the prompts in the terminal a temporary changeset markdown file is generated
- you then run
pnpm changeset version, and this command generates a CHANGELOG.md file or appends to it the latest release info- once you did that you commit the newly generated/updated files
- and finally after all this you run
pnpm publish. This last command will ask you to authenticate with your npm account and it will publish the package for youAfter all this is done you can start installing your package wherever you like and with whichever package manager you prefer
As an example I've built and published a demo package called
hello-alfon. You can try it with pnpm add hello-alfon and see the source code here: https://github.com/milovangudelj/hello-alfonThis is far from a complete and thorough explanation of the package publishing process/world. It's just meant to get you up and running as fast as possible. There's a lot more to it, and you can go as deep as you'd like.
A good next step would be to use GitHub Actions to automate the process as described both on [pnpm's Changesets guide](https://pnpm.io/using-changesets#using-github-actions) and [Changesets' automation documentation](https://github.com/changesets/changesets/blob/main/docs/automating-changesets.md).
A good next step would be to use GitHub Actions to automate the process as described both on [pnpm's Changesets guide](https://pnpm.io/using-changesets#using-github-actions) and [Changesets' automation documentation](https://github.com/changesets/changesets/blob/main/docs/automating-changesets.md).
Hope this helps you and you don't get overwhelmed by it 