How to publish your projects to NPM?
In this video, you will learn how to open-source your code on NPM. This video will demonstrate how to leverage the command-line to publish your code on GitHub and the package to NPM aka Node Package Manager.
Hello there, My name is Harit Himanshu and today I will show you how you can publish your own code to npm and let other developers around the world utilize your work. There are 2 ways to publish your code to
npm - First, using a command-line, and other using Git workflow. To start simple, today you are going to see how to leverage command-line for publishing.
For this session, we will be creating a
maths library, where I will implement few functions that would be part of the library published on
I will start by creating a directory called maths. Within this directory, I will call
npm init. This will ask series of questions. I will use default answers and give few answers of my choice such as description. For git repository, I will create a repository called maths and keep it public. I will then, provide the URL for this repository in the command-line. I will my name for the author and give it an MIT license. It shows the contents that will be written to package.json and I accept it. See here that the
main file here is listed as
index.js, which I need to create.
So, I will create a file called
index.js. In this file, I will add a function called
sum which takes 2 inputs and return their sum. I have added this function inside
npm I would like to test it.
For that, I will create a new directory called
test-maths in the same level where my
maths directory is located. Then, inside the
test-maths directory, I call
npm install, and provide the relative path to
maths package. As I hit enter, we can see a confirmation message that 1 package has been added. We could also confirm this by listing the contents of
node_modules directory and seeing the
maths module there.
Now, I will create a new file called
test-maths directory and try to use the
sum function from
maths package. For that, I will first import
sum. Then, I am logging the addition of 2 and 3 by calling
sum function from
maths package. As I run this module by calling
node index.js, we could confirm that the correct output is printed on the console. Great! Now that we have tested locally that our
maths package is working correctly, it is time for us to publish it to
For that, you must first create an account on npmjs.com. I am logged into my account, and in my profile, you can see 2 packages and 2 organizations that I have created. I would like
maths package to be published under
h2_demo organization. As you see
@h2_demo is prepended for this package name, this is known as scoped public package - the package is public and is scoped under
@h2_demo. To publish our package, I will. come back to the
maths package and update the name to reflect the scope I am interested in. I will also bump the version to reflect the first version that I am about to publish. I will save the come back to the command-line. You must also be logged into your npm account using
npm login command and with the credentials, you have used to sign up on npmjs.com.
To publish, I will run
npm publish --access=public, because I want the package to be publicly accessible. As I hit enter, the npm compresses and sends the package to npm registry. Once complete, we can confirm that our package with version
1.0.1 has been published. We can also confirm this on the npmjs page where the package shows up.
When I get inside the packaage page, I do not see a lot of help about this package since I did not write a README file for it. Also, the Github links are available but when I follow the links, the code is not there since I have not pushed it to Github yet. For the sake of completeness, I will do that now.
I will initialize a git repository inside
maths directory by calling
git init. I will now call
git add . to stage my changes. I will update the git config to reflect my email and the username as well. Then, I will commit my changes using
git commit command and providing the commit message. I will rename the branch to be
main as required by Github. I will add the remote URL to github. I am changing the URL based on different git profiles I have, you may not need to do this step. And with that, I push my code using
git push command. Back on the Github, we can see the code now.
Now, let's say, I want to update my package by providing a new function to our users. For that, I will update my
index.js file and add a new function called
product which given two inputs returns their multiplication. I will also add a
[README.md](http://readme.md) file to help developers find out what this package has to offer. I will add the relevant details in this file. To publish my newest updates on the library, I will bump up the version number in
package.json file. I now have 2 changes to send to Github. I will stage those changes using
git add command. I will use the same command
npm publish --access=public which will now upload the latest code and publish the new version
Back on the npm website, as I refresh, we could see the documentation on the library page as they are picked up from
[README.md](http://readme.md) file. As I follow Github link, I still do not see my changes as they are not pushed yet. Back on the command-line, I will commit, and push the changes to the
main branch. Now as I come to the Github page, we can see our latest changes. On the npm page for the library, we can see 2 versions that are published.
Now that our versions are published to npm registry, let's use them now as our fellow developers would. Back on the command-line, I will create a directory called
maths-user. I will initialize a default
package.json by running
npm init -y command. I will now install our package using
npm i and providing the package name including its scope
@h2_demo. Once our package is installed, I will create a new file called
index.js. I will import both
product functions from our
maths library. See how, I have used the complete path, including the scope in
require function. I will then call these functions by providing arguments and printing their result on the console. As I run, we can see the correct outputs on the console.
Fantastic! so you learned today how to publish your own packages to npm, update them publishing new changes and versions, and also how to test them locally before and after publishing to npm registry.
Now go forth, and bring your ideas to life! See you next time.