Toolkit for Publishing your React Component to the Node Package Manager(NPM)

Subscribe to my newsletter and never miss my upcoming articles

Introduction

Today we are part of the ever growing react community all over the world. Many react developers continuously creating open-source react components and publishing them to the npm repository. The entire ecosystem is an awesome place to be in as a Reactjs developer.

In this article, I am going to introduce you to a toolkit that will help to build, package, test and publish your react component much faster way. Only motivation behind creating the toolkit was, it may encourage you as a react developer to make your re-usable component a public npm package for others to use.

React component as a npm package

If you are already aware about creating a npm package and publish it, great! If not, you can check this article: Build, Test and Publish your NPM, I just did it in few minutes! I am going to explain some of the steps here anyways.

A reactjs component has to go through following steps before it becomes a part of the npm repository as a reusable package,

  • Transpile the react component code to plain old JavaScript using a tool like babel. This step will create a single transpiled output file, say, index.js.
  • ✅ Copy the index.js file and all other required files like, readme, package.json, .css or .sass, image files etc into a directory, say, dist.
  • ✅ At this stage, you can create a tarball for testing it locally using the npm pack command. This tarball can be pointed from any other reacr project as dependency and tested out.
  • ✅ If we are ready to publish, we first need to login to npm repository using npm login. If you do not have a login credential yet, please create one from here.
  • ✅ The final step is to do a publish from the dist folder using npm publish command.

A picture is worth a thousand words. Here are the steps,

Publishnpmflow.png Steps involved in publishing a react component as npm

You may choose to remember and perform all the above steps again and again for publishing your remarkable react component. Otherwise, you can automate things in a script such that, you just focus on writing your component's logic. All other operational parts are taken care by the script.

Meet the Toolkit: react-package-publisher

react-package-publisher provides a centralized script to take care of all that required for publishing to npm. You have to make sure, you have created an account with npm repository as a prerequisite.

  • Fork or Clone the repo react-package-publisher.
  • Change the directory to, react-package-publisher.
  • Edit the package.json with your package name, version, author, license, dependencies, devDependencies etc. Please note, the peerDependencies are already set for a specific version of react and react-dom. Please feel free to change the versions suitable to your need. If you are new to the npm dependency management, please read this.
  • Create your react component file and write the component code.
  • Run the build.sh file. Please use a unix based terminal(example, GitBash) to run the build.sh file. That's all.

    You should start seeing the output being logged like the one shown below. At the end of it, your component should be published as a package to the npm repository.

    publish_log_new.png Logs while publishing to npm

If you find any issues or improvement requests, please log them here. If you like the work, please give the repo a star 🌟!

Conclusion

This toolkit is nothing more than a script automates bunch of things that you have to remember and execute. I find happiness in creating such scripts which are useful and can save time.

I hope, you will use it to publish your super cool react component to the npm repository. You are completely free to bring any changes and enhancements to the tool or become a collaborator! See you there.

The cover image is an improvisation done on top of a Design by Freepik.


If it was useful to you, please Like/Share so that, it reaches others as well. To get e-mail notification on my latest posts, please subscribe to my blog by hitting the Subscribe button at the top of the page.

Comments (2)

Bolaji Ayodeji's photo

Thanks for creating and sharing this Tapas :)

Tapas Adhikary's photo

☝ UI/UX Enthusiast | 💻 Work @MicroFocus | ✍️ Blogger | 👨‍🏫 Mentor | 🎤 Speaker | 🍟 Foodie

Bolaji Ayodeji, Thanks for liking it! Appreciate. Yeah, this tool automation is helping me 😊.