Overview of NPM - How Did I Publish a Package on npm?

Overview of NPM - How Did I Publish a Package on npm?

Articles in series:
  1. Overview of NPM - How Did I Publish a Package on npm?
  2. Introduction to NPM - Building and Publishing Packages to NPM
Daily short news for you
  • For a long time, I have been thinking about how to increase brand presence, as well as users for the blog. After much contemplation, it seems the only way is to share on social media or hope they seek it out, until...

    Wearing this shirt means no more worries about traffic jams, the more crowded it gets, the more fun it is because hundreds of eyes are watching 🤓

    (It really works, you know 🤭)

    » Read more
  • A cycle of developing many projects is quite interesting. Summarized in 3 steps: See something complex -> Simplify it -> Add features until it becomes complex again... -> Back to a new loop.

    Why is that? Let me give you 2 examples to illustrate.

    Markdown was created with the aim of producing a plain text format that is "easy to write, easy to read, and easy to convert into something like HTML." At that time, no one had the patience to sit and write while also adding formatting for how the text displayed on the web. Yet now, people are "stuffing" or creating variations based on markdown to add so many new formats that… they can’t even remember all the syntax.

    React is also an example. Since the time of PHP, there has been a desire to create something that clearly separates the user interface from the core logic processing of applications into two distinct parts for better readability and writing. The result is that UI/UX libraries have developed very robustly, providing excellent user interaction, while the application logic resides on a separate server. The duo of Front-end and Back-end emerged from this, with the indispensable REST API waiter. Yet now, React doesn’t look much different from PHP, leading to Vue, Svelte... all converging back to a single point.

    However, the loop is not bad; on the contrary, this loop is more about evolution than "regression." Sometimes, it creates something good from something old, and people rely on that goodness to continue the loop. In other words, it’s about distilling the essence little by little 😁

    » Read more
  • Alongside the official projects, I occasionally see "side" projects aimed at optimizing or improving the language in some aspects. For example, nature-lang/nature is a project focused on enhancing Go, introducing some changes to make using Go more user-friendly.

    Looking back, it resembles JavaScript quite a bit 😆

    » Read more

Introduction

I'm sure that everyone here has heard of, knows, and uses npm daily in their work. NPM is a huge repository of packages, mostly JavaScript libraries used for web development or Node.js. But where do these packages come from? The answer is the community, which includes you - those who have interesting ideas and are willing to share.

After using various packages, I encountered a problem - I couldn't find any component to input OTP for Vue.js at that time (now I'm not sure either :D). As a result, I had to write my own. Instead of using it alone, why not package it and share it online? That's when I thought of the "magical distribution network", npm.

The idea of building a package always arises everywhere, even though there may be dozens or even hundreds of different packages solving the same problem. It's challenging to compete with well-established packages that have a huge number of downloads. However, even a small contribution is still a contribution, right? What you need is to create a highly reliable package, release it at the right time, and have a bit of luck.

Choosing a Platform for Packages

There is a wide variety of packages on npm. For example, there are packages exclusively for browsers or exclusively for Node.js, as well as packages that support both. Also, a package written for Vue.js cannot be used with React.js, and vice versa.

Therefore, it's important to determine which platform you are going to write the package for. For example, I chose to create a package called "OTP Input for Vue.js". Building a package is easier if you find a suitable "framework". Here, a framework refers to a project that has everything set up, from building, development, testing, and so on. Your task is just to focus on the logic. Alternatively, if you don't find or don't want to use an existing framework, you can choose to build from scratch, which means you have to set up everything. Of course, you can omit some components such as development or testing, but that will make your package less "professional".

Here are some popular frameworks that I know of:

After completing the logic for the package, you need to create a README.md file that describes how to use it, its attributes, and any other necessary information for others to understand. Additionally, provide instructions for running development, tests, and contributions. The final step is publishing the package on npm.

Getting Familiar with the npm CLI

The npm CLI helps me push the package to the repository. By default, when installing Node.js, npm is also installed, so if you don't have npm yet, install Node.js!

Check the npm version:

$ npm -v
6.14.12

Log in to npm:

$ npm login

Navigate to the directory containing the project you want to publish, for example, here I move to the vue-otp-2 directory:

$ cd vue-otp-2

Ensure that the package.json file is present in that directory. npm relies on package.json to publish your package, and a basic package.json file must contain the name and version:

{
  "name": "vue-otp-2",  
  "version": "1.0.0",  
}

Here, name is the package name used for installing (npm i vue-otp-2), and version is the package version at the time of publishing.

Then publish it:

$ npm publish

Wait until the publishing process is successful, and you will receive an email notification about it.

Some notes on publishing:

  • Make sure your package version follows the semantic standard. If you're not familiar with it, you can learn more here.

  • Make sure the package name is unique on npm. For example, you cannot name your package vue-opt-2 because I already own that name. However, if you still want to use that name, npm provides an option to add your username to the package name, something like @hoaitx:vue-opt-2. See how to set it up here.

  • Besides the name and version, there are many other interesting parameters to make your package profile look "cool". Learn more here.

Tips & tricks:

  • Some people have successfully published their packages but couldn't use them when installing in a project. This might be because they didn't specify the correct entry point module in the package. Specifically, package.json has a property called main, which is used to determine which file to import when using require/import. By default, it is index.js. For example, if a package named foo is imported with require("foo"), it corresponds to the path node_modules/foo/index.js.

  • Try on RunKit is an application that allows you to test packages before deciding whether to install them :D.

Conclusion

In this article, I've briefly described the process of publishing my package on npm. In the next article, I will go into detail on each step of creating a package. Oh, for those who have been wondering why there hasn't been a link to my package from the beginning until now, here it is: vue-otp-2.

Premium
Hello

5 profound lessons

Every product comes with stories. The success of others is an inspiration for many to follow. 5 lessons learned have changed me forever. How about you? Click now!

Every product comes with stories. The success of others is an inspiration for many to follow. 5 lessons learned have changed me forever. How about you? Click now!

View all

Subscribe to receive new article notifications

or
* The summary newsletter is sent every 1-2 weeks, cancel anytime.

Comments (0)

Leave a comment...