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.
Prerequisites
To fully grasp the concepts presented in this tutorial, the following are required:
- A GitHub account
- Node.js ( v10+) installed
- NPM account created
- Basic understanding of JavaScript
What is NPM
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.
What are you building
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.
Getting Started
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.
Why microbundle?
With Microbundle, tiny modules can be bundled without any configuration, and it offers the following features:
- Single dependency for bundling with just a
package.json - ESnext & async/await support through Babel and async-promises
- Produce highly optimized code for all inputs
- Zero-configuration TypeScript support
- Includes built-in Terser compression and tracks gzipped bundle size
- Creates multiple output formats for each entry (CJS, UMD & ESM)
- Supports multiple entry modules (
*cli.js*+*index.js*, etc) # Building the package ## Install microbundle
To use microbundle, run the command below in your terminal.
npm i -D microbundle
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.
{
"name": "capitalizefirstletterofastringpkg",
"version": "1.0.0",
"type": "module",
"source": "src/index.js",
"main": "dist/index.js",
"module": "dist/index.module.js",
"unpkg": "dist/index.umd.js",
"scripts": {
"build": "microbundle",
"dev": "microbundle watch"
},
"devDependencies": {
"microbundle": "^0.15.1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/femakin01/CapitalizeFirstLetterofaString.git"
}
}
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"-
"build": "microbundle": Executes themicrobundlecommand to build the package. -
"dev": "microbundle watch": Executes themicrobundle watchcommand to start a development server that watches for changes
-
"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 project
This 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.
Package Development
To create the package that capitalizes the first letter of a string, In the src/index.js file, paste the code below:
export const Capitalize = ({ str }) => {
return str.charAt(0).toUpperCase() + str.slice(1)
}
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 running
npm run build
Microbundle produces esm, cjs, umd bundles with your code compiled to syntax that works everywhere.
Publishing the package
To publish your package, run the following command to authenticate yourself:
npm login
You will be prompted to provide your details, provide the required details and hit enter. To test the login's success, enter the command:
npm whoami
Your username should be logged into the CLI.
Now, you can proceed to publish your package by running the command below:
npm publish
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.
Testing the Package
To test the package, bootstrap a Next.js application by running the command below:
npx create-next-app@latest
On installation, you'll see the following prompts:
What is your project named? my-app
Would you like to use TypeScript with this project? No / Yes
Would you like to use ESLint with this project? No / Yes
Would you like to use Tailwind CSS with this project? No / Yes
Would you like to use `src/` directory with this project? No / Yes
Use App Router (recommended)? No / Yes
Would you like to customize the default import alias? No / Yes
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:
npm i capitalizefirstletterofastringpkg
Next, in the src/app/page.js replace the content with the following code:
import React from 'react'
import { Capitalize } from 'capitalizefirstletterofastringpkg'
function page() {
return (
<div> `This is a Sample Usuage {<Capitalize str={'example'} />}`</div>
)
}
export default page
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.
Conclusion
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!
Top comments (6)
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍
Thank you @fruntend 🙌
If you find this post time consuming and error prone.
Using tsup and little configuration you can create your react or node packages easily:
medium.com/@sundargautam2022/creat...
Thank me later
Thanks @sundargautam18. I had used tsup for my securestorage package and now it also seems helpful for react packages too. I suggest everyone to view this as it's better than the current blog.
How exactly is this a React component package? This is just a basic, non-react, utility function that is bundled as a package and deployed to NPM, showcasing the process. Which is fine, but the name of this post suggests something totally different.
I want to publish a package with a collection of React hooks and components. The source files are written with .jsx extensions, and they import their own .scss files for styling. Is microbundle still the easiest way to create the build files? Will this result in a /dist folder with the same file structure such that I can import the components in any project that installs this package?