DEV Community

Gerald Hamilton Wicks
Gerald Hamilton Wicks

Posted on

How to Deploy a JavaScript Library to npm in 5 Minutes

How to Deploy a JavaScript Library to npm in 5 Minutes

One of the wonderful aspects of JavaScript is its vibrant community. You have the opportunity to leverage libraries created by others or create your own and share them with the world. In this article, we'll dive into how to create your first library from scratch and deploy it to npm in just five minutes!

Step 1: Starting Your Package

  1. Create a New Folder: Begin by creating a new folder for your project. Open your code editor of choice in this directory.
  2. Initialize npm: Open the terminal and run the following command:

    npm init -y
    

This command will generate a package.json file. Open this file and change the value of the "name" field. By default, it will look like this:

"name": "test"
Enter fullscreen mode Exit fullscreen mode

You can change it to "light-fibonacci" (or any name of your choice). Feel free to update other fields in package.json such as "description", "author", and "license" according to your needs.

Step 2: Creating Your Library

Inside your package.json, you will notice the following field:

"main": "index.js"
Enter fullscreen mode Exit fullscreen mode

This means your library will be loaded through index.js. To ensure everything works properly, create a file named index.js in the same directory as your package.json. To enable ES modules in your package, add the following field to package.json:

"type": "module"
Enter fullscreen mode Exit fullscreen mode

Step 3: Adding Some Logic

Now it's time to add some functionality to your library. In this example, we'll create a function called fibonacci that returns the Fibonacci number for a given input n:

export function fibonacci(n) {
    const fibNumbers = [0, 1, 1];

    if (n <= 0) {
        throw new Error(`${n} should be bigger than 0.`);
    }

    if (n <= 3) {
        return fibNumbers[n - 1];
    }

    for (let i = 3; i < n; i++) {
        fibNumbers[0] = fibNumbers[1]; 
        fibNumbers[1] = fibNumbers[2];
        fibNumbers[2] = fibNumbers[0] + fibNumbers[1];
    }            

    return fibNumbers[2];
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Testing Your Library Locally

Before deploying your library, it’s essential to test it. Here’s how you can do that:

  1. Link Your Package: In the root of your library folder, run:

    npm link
    
  2. Test in Another Project: Open another project where you want to test your package. In that project’s root directory, run:

    npm link light-fibonacci
    
  3. Import and Use: Now, you can import the function in a file within your test project:

    import { fibonacci } from "light-fibonacci";
    
    const fibonacciNumber = fibonacci(10);
    
    // rest of the code
    

If everything works as expected, congratulations! Your package is functioning correctly.

Step 5: Publish Your Package to npm

  1. Login to npm: Go back to your package folder and open the terminal. Run:

    npm login
    

Enter your npm username and password (if you don’t have an account, you’ll need to create one).

  1. Publish Your Package: Now, you can publish your package with the command:

    npm publish
    
  2. Check Your Package: Visit the npm packages page in your account to see your newly published package. You can also access it directly via the URL:

   https://www.npmjs.com/package/light-fibonacci
Enter fullscreen mode Exit fullscreen mode

Just replace "light-fibonacci" with your package name.

Step 6: Package Usage

Now that your library is published, you can install it directly from npm. In any project where you want to use it, run:

npm install light-fibonacci
Enter fullscreen mode Exit fullscreen mode

Your package is now installed and ready for use!

Conclusion

Congratulations! You've just created and published your first JavaScript library to npm. With just a few simple steps, you can share your work with the world and contribute to the vibrant JavaScript community.

We’d love to hear from you! What challenges did you face while creating your library? Do you have any tips or suggestions for others looking to publish their own packages? Share your thoughts in the comments or reach out directly. Happy coding!

Top comments (0)