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.
One of the first things you'll need are verified NPM account and installed Node.js. Obviously. 😅
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.
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!
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 -
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
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/.
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.
./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!
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/ + firstname.lastname@example.org`
⚡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.
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
... "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
npm publish --access public
Now, if you visit your package's NPM repository page, you should see the newly updated version.
You're ready to open-source your own NPM packages. 👏
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.
README.mdfile. 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 <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. 👋