Publish your first NPM package - next step towards open-source

A while back I wrote an article about custom Vue 3 boilerplate where I swiftly went over how to stack your own reusable boilerplate. With surprisingly positive feedback, it became obvious that I’ll open-source it. So, while hosting it on GitHub, I decided to also publish my boilerplate on NPM — Node Package Manager — to make easily manageable and quickly install-able package.

With Node.js becoming more and more popular among programmers, correlatively numerous popular modules were being re-published and maintained on NPM "registry". I too wanted to give back to open-source community, therefore in this article/tutorial I will go through the process of publishing my custom boilerplate on NPM as an example.

---

Prerequisite

One of the first things you'll need are verified NPM account and installed Node.js. Obviously. 😅

Create NPM account

Go ahead, visit NPM Signup page, fill out the sign up form and verify your account with one time password (sent to your e-mail).

⚡Ideally, setup 2-Factor Authentification protection before you continue.

Install Node.js

Now it's time to install Node.js (it comes together with NPM command-line tool) - visit https://nodejs.org/en/download/ and select installation depending on your OS and CPU cores of the machine.

⚡Note - if you have 2 or more CPU cores, you should use 64bit installer.

Run the installer. You'll be fine by going with default settings, just make sure you've selected "Add to path" - this will allow you to run NPM command-line.

After installation is done - open up terminal and test if you can use Node.js & NPM command-line tool:

node -v // Node.js Version
npm -v  // NPM version

👏 It works!

Initialize our package

Great, now we can initialize our package of choice. In my case, I'll open up my Vue 3 boilerplate directory and start NPM initialization process:

cd vue3-boilerplate
npm init

⚡Feel free to use my Vue 3 boilerplate for the sake of this tutorial.

You'll now be asked to fill in the basic package information, such as - name, version, description, keywords and etc. Once done, new package.json file will be created in your project's root, containing all the package information.

⚡Remember - make your package more reachable… add as detailed information as possible, as well as many keyword combinations as possible. You can learn more about configuring package.json here.

Login

Before we can publish, we'll have to login to NPM:

npm login
Username: <your_username>
Password: <your_password>
Email: (this IS public) <your_e-mail>

If you don't have 2FA setup (which I strongly advice you to do), you'll be sent an One-Time Password to your e-mail. Copy it and finish your login process:

npm notice Please check your email for a one-time password (OTP)
Enter one-time password: 12345678
Logged in as <your_username> on https://registry.npmjs.org/.

Final test

There are many npm link tutorials out there on how to test a package before publishing, so in contrary I'll do the other, much simpler way.

Create ./test directory in ./vue3-boilerplate project's root directory, go into ./test directory and initialize test install in the folder:

mkdir test
cd test
npm i "../"
// or
npm i "absolute/path/to/<your_package_name>"

⚡Always test before publishing!

Publish package

Now - 🥁(drumroll) the moment of truth - time to publish our solution to NPM public repository (remember, you have to be inside your project directory when running this):

npm publish --access public

You'll be asked for either 2FA code or One-Time Password sent to your e-mail. Enter one of them and finish the publishing process.

If everything was entered correctly, you should see this in the end:

npm notice Publishing to https://registry.npmjs.org/
+ vue3-boilerplate@1.0.6`

⚡To publish privately, remove --access public parameter. Remember, you have to have at least Pro subscription to have access to private package hosting on NPM.

Updating package

In order to update your package, you'll have to update the version number as well. For testing purposes, let's open up our package.json file and increase the version number from 1.0.0 to 1.0.1.

...
"version": "1.0.1"
...

Save and re-publish your package again. This time you can use one of the version control commands:

npm version patch // 1.0.1 => 1.0.2
npm version minor // 1.1.0 => 1.2.0
npm version major // 1.0.0 => 2.0.0

Then:

npm publish --access public

Now, if you visit your package's NPM repository page, you should see the newly updated version.

🎉Congratulations!

You're ready to open-source your own NPM packages. 👏

---

Final words

In conclusion I just want to mention a couple crucial points regarding publishing packages:

• Always - and I mean ALWAYS - test before publishing. Nobody wants to install a broken package. There are many different testing tools depending on your stack.
• 403 - Forbidden - an error during publishing can mean many things - your newly created account e-mail is not verified, the name of your package is already taken, you don't have Pro subscription to publish privately or you're updating the same version.
• Write README.md file. Imagine - you're reaching the views, but nobody is downloading your solution because, well.. there is no documentation on how to use your solution. 🤨
• NPM has a lot more great commands up its sleeves - simply hit npm help or npm help <command> to list them all or read its documentation. I found this article with some great NPM tips & tricks.
• Automate your NPM package installation with NPX or NPM CLI. It is a great idea to give developers the possibility to configure your package during main installation process.

If you're having trouble following my steps above, or simply liked this article - I'll appreciate it if you reach out in the comments below. 👋