End-to-end: How to publish a React component with TypeScript as an NPM package

I recently wanted to learn what it takes to publish a React component, written in TypeScript, as an NPM package. I found a number of great tutorials covering different part of the work and workflow. Having needed to piece together several guides, I’m putting it all together in one place.

One of the most complete guides I came across (minus the TypeScript setup) was Building a React component as an NPM module by Manoj Singh Negi. This post covers setting up the module to be published and a sample app to use / test the module.

I then came across another great guide, which focused on development with TypeScript. A very clearly named post, How to Create a Typescript and React Module by Eli Yukelzon. This post also covers Jest testing, a great bonus nugget.

At this point, I had the component I wanted to publish to NPM setup. I had a sample app using the component. Yet the workflow had many manual steps. I needed to build the package, then stop the sample app; run yarn in the sample app to get the latest version of the package; then yarn start to start the sample app.

To solve workflow efficiency problem, following a guide on symlinking, I connected the module’s build output to the sample app’s package repository.

The last step was to use Watch, via a guide on automatically running any command when files changes occur. With this enhancement, the workflow was complete. The future NPM package can be developed and automatically built and synced with the sample app. One challenge yet to overcome is the ~5 second delay between saving changes to the module to building to hot-reloading of the sample app.

The last step is to publish to NPM using npm publish, with detailed instructions in the first linked guide.