The Beginner’s Guide to Writing and Publishing a React NPM Package

A step-by-step guide to publishing your own React component to npm as a package

Victoria Lo
Dec 2, 2020 · 5 min read
Hand holding compass
Hand holding compass
Photo by Aron Visuals on Unsplash.

In this article, we will learn how to publish a React component as an npm package and then set up a pipeline to automate testing and future publishes.

Before We Start

  1. Make sure you have an npm account. If you don’t, create one.
  2. Make sure you have Node and npm installed on your machine. If you don’t, get it.
  3. A basic understanding of React will be needed.

Our Simple Package

For this tutorial, we are making a simple React component that can immediately draw a specified polygon in any specified color.

We will then publish this component as an npm package for anyone to install and use. Let’s get started!

Step 1: Create React App

First, let’s create a new React app with the following command:

npx create-react-app polygon-maker

Step 2: Polygon.js

Next, create a Polygon.js file that will be the component we publish as a package.

The component will accept props with properties such as color and shape to determine the type of polygon and its color.

In this example, I have created a simple square that will be the returned <div> style attribute if props.shape is square:

Step 3: App.js

In App.js, we can import Polygon at the top like so:

import Polygon from "./Polygon";

And in the return function, simply add the Polygon component. Pass in shape and color as props:

<div style={{display:"flex", backgroundColor:"black"}}>
<Polygon shape="square" color="red"/>
<div>

And the square is rendered on the browser!

Red square on black rectangle
Red square on black rectangle

Step 4: Add More Shapes

You can add more shapes in Polygon.js so you can easily draw these shapes using this component. I made more, such as rectangles, triangles, trapezoids, etc. Now I can pass them as shape in the Polygon component in App.js.

In App.js:

In the browser:

Different shapes on black rectangle
Different shapes on black rectangle

Step 5: Preparing to Publish

We’ve finished making this simple component. Let’s now publish it to npm!

1. Install babel to help transpile ES6 JavaScript:

npm install --save-dev @babel/cli @babel/preset-react

2. Delete the public folder.

3. Go to the package.json file. Under scripts, add this line:

"publish": "rm -rf dist && mkdir dist && babel src/Polygon.js -d dist --copy-files"

This script will make a directory called dist and copy the compiled Polygon file inside it.

4. Still in package.json, set the private property to false and add the following:

"babel": { "presets": [ "@babel/preset-react" ] }

Great! Now we are ready to publish this as an npm package.

Step 6: Publish to npm

In your command prompt/terminal, log into your npm account with:

npm login

Then, run our publish script with:

npm run publish

You should see a dist directory appear in your root folder with Polygon.js inside it. Rename that file to index.js.

Finally, run:

npm publish

And our Polygon maker package should be live on npm!

Package on npm
Package on npm

Next Steps: Automating Tests and Updates

After publishing your npm package, it is a good idea to set up a pipeline to automate future tests and version updates. Buddy CI/CD is an intuitive tool that we can use to achieve this easily.

Add a pipeline

To get started, simply create a Buddy account and add your project by choosing the Git provider you use.

List of Git providers
List of Git providers

After adding your project to Buddy, you can click “Add a new pipeline” to set up a pipeline. Set Trigger mode to “On push” and the branch as “master” to ensure that the pipeline will automatically run when we make changes to our project.

Adding a new pipeline
Adding a new pipeline

Build and run tests

Next, add a Node action into the pipeline. In the terminal, the following commands will build and run tests to make sure your npm package is error-free.

Running tests
Running tests

Authenticate and publish

After we test our package, we can publish it to npm. To do that, we will need to log into our npm account.

Add a Node action with the following commands in the terminal:

Logging in
Logging in

This command will allow us to authenticate ourselves using the npm-cli-login package and environment variables such as NPM_USER, NPM_PASSWORD, and NPM_EMAIL.

To install npm-cli-login and then run npm publish, click on the Environment tab and add this line in the terminal as shown in the image below:

Command
Command

Now we need to specify our environment variables by heading over to the Variables tab and adding the three variables as appropriate.

Adding variables
Adding variables

Add email notification

Last but not least, we add an email action into our pipeline to notify us when the package is successfully tested and published to npm.

Email notification
Email notification

Run pipeline!

Let’s try a test run. As seen in the image below, the execution was successful and we have created an automated pipeline to test and publish any updates to our npm package.

Successful execution
Successful execution

Conclusion

That is how you can build a simple React component and publish it to npm. After that, you can simply automate testing and future updates using a CI/CD tool like Buddy. You can even configure a pipeline to deploy React with zero downtime!

Thanks for reading. I hope this article has been helpful. Feel free to share any thoughts in the comments below. Cheers!

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Victoria Lo

Written by

A nerd in books, tea and programming.

Better Programming

Advice for programmers.

Victoria Lo

Written by

A nerd in books, tea and programming.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store