DEV Community

Cover image for How to Publish to NPM the Right Way
Apestein
Apestein

Posted on

8 3 2 2 3

How to Publish to NPM the Right Way

React Library Starter

Starter template for your next react typescript library. Complete with changeset, tsup, and tailwind with prettier-plugin. Publish to npm the right and easy way.

Setup

  1. Go to npm and create your access token with type of "Publish" or "Automation". Copy the token.
  2. Go to your repo, click on "Settings" => "Secrets and variables" => "Actions" => "New repository secret" then create token named "NPM_TOKEN" and paste token from step 1.
  3. Go to your repo, click on "Settings" => "Actions" => "General" then make sure Workflow permissions is set to "Read and write permissions" and check "Allow Github Actions to create and approve pull requests."

How to use

Create your package in package/index. Then import and test from src/App.

Run pnpm changeset then push to your Github and workflow will create a PR for you to merge. Once you merge, your package will be automatically published to npm.

Or run pnpm release to publish directly from your command line. Remember to login with npm login and update version property in package.json.

Video tutorial from Matt Pocock

If you find this useful, please star this repo on Github. Also, follow me on Twitter for tech advise and hot takes.

PS: Currently looking for a new position, hire me. Check my profile for info.

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series πŸ“Ί

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series πŸ‘€

Watch the Youtube series

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay