Share your React Component Library (Privately)

In Part I, we created an auth-component-library with our trusty
<HelloWorld />component. In this post, we’ll publish our component libary to a private Github NPM Registry. This will allow the library to stay within your organisation and be consumable for all of your apps.

Photo by Dayne Topkin on Unsplash

1. Create a Personal Access Token

First, we are going to a Create a Personal Access Token within Github to read and write your packages.

1. You can do this by going to:

Github Account -> Settings -> Developer Settings -> 
Personal Access Tokens -> Generate New Token
Note: Private NPM Packages
Select scopes: write:packages, read:packages

2. Click on Generate Token, and copy the token to the Clipboard.

3. With the token copied, in the same directory as your package.json file, create an .npmrc file and add the following line, replacing TOKEN with your personal access token.

//npm.pkg.github.com/:_authToken={TOKEN}

2. Create a Private Repository in Github

Create a Private repository in Github, just like you would normally and copy the URL. Mine would be:

git://github.com/hinammehra/auth-component-library

3. Add publish-config to package.json

To successfully publish, you need to make some small changes to your package.json.

• So far, your package.json should have your folder’s name,
  "name": "auth-component-library" . In order to publish your package, you need to rename it to@owner/repo-name. In my case that’s
  "name": "@hinammehra/auth-component-library".
• "files" : The folder with our generated library, i.e. the ./dist folder.
• "publishConfig" : The registry where you want the package published, which is "registry": "https://npm.pkg.github.com" .
• "repository" : URL of the private Github repository we just created.
• Lastly, if you have the following line in package.json, remove it. Setting
  "private": true in your package.json prevents it from being published at all. Don’t worry, your package will still be published as a private component library without it.

{
    ...
    "private": true  // remove this line
    ...
}

Ultimately, your package.json should look like this:

3. Publish to Github Registry

Try to publish your library with the following command and it should be a success!

$ npm publish

Your package is now visible on Github on:

https://github.com/<owner>/<repo-name>/packages

Ta-da!

4. Consuming private component library

With our private component library published, let’s try to consume it in a React App.

$ create-react-app auth-consumer-app

• Create another .npmrc in your consumer app and adding the following lines.
• For simplicity, my TOKEN is same as Step 1, you should create another Personal Access Token with just read:packages privileges.
• OWNER is your package’s owner, mine is hinammehra .

//npm.pkg.github.com/:_authToken={TOKEN}
registry=https://npm.pkg.github.com/{OWNER}

That’s it!

Now, try to run the installation command:

$ npm install @OWNER/repo-name

Wrapping-Up..

GitHub - hinammehra/auth-consumer-app

• That’s it for Part II. Github themselves have a pretty neat doco, you can refer to that as well.
• In Part III, we’ll use Material UI to add a <SignIn /> component to our private library.