Let's Build & Publish Your Own NPM Package!


Responsive image

Requirements:

NodeJs installed on your machine & a registered NPM account!

Let's Get Started!

Step 1: Initiating package.json

We will be building a simple package, which will provide a functionality to convert a normal string into camelCase string.

Example, 'this is normal string' will be converted to 'thisIsNormalString'.

Create project directory - mkdir camel-it

Navigate to the directory - cd camel-it

Open this directory in a code editor.(I'll be using VSCode)

Open the terminal & run npm init command.

It'll present you with questions like
- package name (make sure you provide a unique package-name)
- version (keep it as it is i.e. 1.0.0)
- description : A short info about the package
- entry point (index.js): This prompt is important one, since it indicate the entry point of our package. We will create a file index.js later.
- test Command as of now, we are not going to write tests, so this promp can be blank
- git repository : as of now, we are not initiating github repo, so this can be updated later.
- keywords : These are words relevant to your package, that helps the package to get visibility in search results
- author: You can put your name here
- license : This is the place where you'll mention the license, as of now, we are leaving it blank
- After this, command line will show us a preview of previous question-answers, if everything is okay, type y in terminal - This will create a package.json file.

Initiating index.js

When we executed the npm init command, one fo the question was to mention the entry point of our package.

For us, it was index.js

So we will create a new file index.js

In this file, we will write a function, that will convert a string into camelCase string

function camelIt (string) { 
        const preString = string.split(' ').map( item  => 
        item.charAt(0).toUpperCase() + item.slice(1)).join('') 
        return(preString.charAt(0).toLocaleLowerCase() + preString.slice(1))
    } 
module.exports = camelIt;
                        

Then we will export this function with the module.exports statement.

With this our package is ready to be published, but we need to test it before publishing.

Testing Package Locally

Run npm link command in our package folder

This will allow us to install the package locally.

Now, create a separate folder test, outside of our package's folder.

Open this test folder in Code editor

Open the terminal & run command npm link package-name - in our case, npm link camel-it

This will install our package in the test folder - You can verify this in the automatically created node_module folder, inside the test folder

create a file script.js where we will use our package's functionalities

import the package using require statement - const camelIt = require('camel-it')

For testing - console.log(camelIt('this is normal string')) - this will return thisIsNormalString

Sicne we are getting the expected behavior, we can publish this package.

Publishing Package

To publish packages to npm, you need to sighUp on npm

Once you register, navigate back to our packages folder

run npm login caoomand.

It'll ask for credentials - username - password - email - OTP sent on the email

once you are logged in, run npm publish command

If your package-name is unique & other details in the package.json file are valid, your package will get published on npm.

You can verify this by searching your package name on npm

Adding README.md file

Once our package is published, it should contain a file that describe the package & instructions for using the package

This information is entered in the README.md

create a file README.md, & enter the description

After this, navigate to package.json file & update the version from 1.0.0 to 1.0.1 (or to the next version in case if the your base version is not 1.0.0) & then run npm publish.

There ypu have it, your package is published on npm!

Here is mine 👇

npmjs.com/package/camel-it

Responsive image