Posted on Jun 9 Building and publishing your first Node Package Manager(NPM) is an exciting milestone in your journey as a developer. NPM has revolutionized how you share and reuse Code in the JavaScript ecosystem, empowering developers to contribute to the open-source community and enhance the efficiency of their projects.Whether you want to create a reusable library, a command-line tool, or any other piece of code that can be easily installed and integrated into projects, this article will guide you through the essential steps of building and publishing your first NPM package.To fully grasp the concepts presented in this tutorial, the following are required:NPM is a powerful tool transforming how developers share and manage JavaScript code. It is the default package manager for Node.js, a popular runtime environment for executing JavaScript code outside a web browser. NPM is a vast repository of over a million packages, offering developers access to a wide range of open-source libraries, frameworks, and tools.With NPM, developers can easily install, update, and manage dependencies for their projects, streamlining the development process and saving valuable time. Whether you need to integrate third-party libraries or share your code with the community, NPM provides a centralized platform for discovering, distributing, and collaborating on JavaScript packages.This article explains the process of building and publishing a React NPM package rather than creating an elaborate or complex package. Following the steps outlined in a simple example like the one you'll build, you'll develop a solid foundation to apply the same principles to more advanced packages.In this article, you will build a package called capitalizefirstletterofastring. As the name suggests, this package capitalizes the first letter in a string. It is an excellent place to understand the essential steps in building and publishing an NPM package. So let's dive in and explore the process of creating and publishing your capitalizefirstletterofastring package.To begin, you need to prepare your environment. A few ways to build a React package include tools like Bit, Storybook, Lerna, and TSDX. However, for this tutorial, you will use a zero-configuration bundler for tiny modules called Microbundle. With Microbundle, tiny modules can be bundled without any configuration, and it offers the following features:To use microbundle, run the command below in your terminal.The command generates a node_modules folder in your terminal and a package.json file.In the package.json, replace the existing code with the code below.The provided package.json code is a configuration file used in Node.js projects. Here's an explanation of each key-value pair in the code:"name": "capitalizefirstletterofastringpkg" Specifies the name of the package"version": "1.0.0": Indicates the version of the package"type": "module": Indicates that the project uses ECMAScript modules"source": "src/index.js": Specifies the entry file for the source code"main": "dist/index.js": Indicates the main file that will be used when importing the package"module": "dist/index.module.js": Specifies the module file that will be used in ECMAScript module systems"unpkg": "dist/index.umd.js": Specifies the file to be used in the UMD (Universal Module Definition) format"scripts""devDependencies": Lists the development dependencies required for the project. In this case, it includes "microbundle": "^0.15.1""repository": Specifies the repository type and URL of the projectThis package.json file is specifically configured for the capitalizefirstletterofastring package, utilizing the microbundle package for building and watching the code.At this point, your new package.json file should resemble this screenshot and is all set up for local development.To create the package that capitalizes the first letter of a string, In the src/index.js file, paste the code below:The code above exports a concise function named Capitalize that takes a string input and returns the same string with the first character capitalized. It achieves this by using str.charAt(0).toUpperCase() + str.slice(1)Next, try it out and build the package by runningMicrobundle produces esm, cjs, umd bundles with your code compiled to syntax that works everywhere. To publish your package, run the following command to authenticate yourself:You will be prompted to provide your details, provide the required details and hit enter. To test the login's success, enter the command:Your username should be logged into the CLI.Now, you can proceed to publish your package by running the command below:Note that you may not be able to publish the random-number-package if someone else already has a package with the same name in the registry. You can change the package's name to something unique to make it publishable. Check here for guides on naming a package.After the publication is done without error, you can visit your account in the NPM registry to see the package.To test the package, bootstrap a Next.js application by running the command below:On installation, you'll see the following prompts:After the prompts, create-next-app will create a folder with your project name and install the required dependencies. Next, navigate to the project directory and install the published package by running the command below:Next, in the src/app/page.js replace the content with the following code:If you navigate to localhost:3000, you will see the first letter of the string in your package capitalized.Congratulations! You have just successfully created your first React NPM package professionally.Creating your React component library is a valuable investment for teams or individuals seeking to streamline their development process and ensure project consistency. Following the steps detailed in this guide, you can effortlessly build a library of reusable components that can be shared and utilized across various projects.Leveraging the capabilities of React and the flexibility of custom components, the possibilities are endless in terms of what you can create and achieve. Begin constructing your component library today and experience its positive influence on your development workflow!Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse David Asaolu - Jun 6 Debbie O'Brien - Jun 6 Abshir - Jun 6 Drew Womble - May 19 Once suspended, femi_dev will not be able to comment or publish posts until their suspension is removed. Once unsuspended, femi_dev will be able to comment and publish posts again. Once unpublished, all posts by femi_dev will become hidden and only accessible to themselves. If femi_dev is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Femi Akinyemi. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag femi_dev: femi_dev consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging femi_dev will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.