Publish a Private React Component Library — Part II

Publish your private React Component Library to a private Github repository so your library stays within the organisation and your team members can pull it for other projects.

In this four part series, we are going to only focus on building an Auth Component Library.

  • Part I: Created a private React Component Library with a simple<HelloWorld /> component.
  • Part II: Publish your component library to a private Github repository and consume it in other apps.
  • Part III: Add Material-UI as a dependency to your component library, build a <SignUpForm /> and a <SignInForm />component as part of our Auth Component Library, consume that in our Testing Playground.
  • Part IV: Add a Mock-API to our Testing Playground and link that to our components.
Photo by Dayne Topkin on Unsplash

This is Part II. Let’s get started:

1. Authenticating with a personal access token

Create a Personal Access Token within Github to Read and Write your packages. 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

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

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.

Ultimately, your package.json should look like this:

{
"name": "@hinammehra/auth-component-library",
"files": ["./dist"],
"publishConfig": {
"registry": "https://npm.pkg.github.com"
},
"repository": "git://github.com/hinammehra/auth-component-library"
....
}

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
...
}

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 another 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..

That’s it for Part II. Github themselves have a pretty neat doco, you can refer to that as well.

In the next one, we’ll use Material UI to add a<SignUpForm /> and a <SignInForm /> component to our private library, and test it in our library’s testing playground and in our example consumer app.

For the love of reusability.

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