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.

Full Transcript

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 npm.

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 module.exports so that I can import this function from other JavaScript modules. This is my library, and before I publish it on 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 index.js inside 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 npm.

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 package.json for 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 1.0.2.

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 sum, and 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.