Publish your first NPM package - next step towards open-source
Tags: npm, node, opensource, git
Published: 2022-08-14 20:03:00


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ovhl8bmylofg8e1uytf.png)

_A while back I wrote an article about [custom Vue 3 boilerplate](https://medium.com/js-dojo/custom-vue3-boilerplate-9635806acde3) 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](https://github.com/richardevcom/vue3-boilerplate), I decided to also publish my boilerplate on [NPM](https://www.npmjs.com/package/@richardev/vue3-boilerplate) — Node Package Manager — to make easily manageable and quickly install-able package._


![JavaScript, JavaScript everywhere](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfry5s0m5hlhieurut4u.gif)

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](https://medium.com/r/?url=https%3A%2F%2Fwww.npmjs.com%2Fsignup), 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/`](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](https://medium.com/js-dojo/custom-vue3-boilerplate-9635806acde3)** directory and start **NPM** initialization process:

```
cd vue3-boilerplate
npm init
```

_⚡Feel free to use my **[Vue 3 boilerplate](https://medium.com/js-dojo/custom-vue3-boilerplate-9635806acde3)** 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](https://docs.npmjs.com/cli/v8/configuring-npm/package-json)._


## 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 _**O**ne-**T**ime **P**assword_ 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 _**O**ne-**T**ime **P**assword_ 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. 👏


![SpongeBob approves](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udcrer8dfmn7gctn2s25.gif)

---

## 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](https://docs.npmjs.com/cli/v6/commands). I found [this article](https://glebbahmutov.com/blog/npm-tips-and-tricks/) with some great NPM tips & tricks.
- Automate your **NPM** package installation with **[NPX](https://docs.npmjs.com/cli/v8/commands/npx)** or **[NPM CLI](https://docs.npmjs.com/cli/v8)**. _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. 👋_