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
- 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.
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 TokenNote: 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.
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:
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
"files": The folder with our generated library, i.e. the
"publishConfig": The registry where you want the package published, which is
"repository": URL of the private Github repository we just created.
Ultimately, your package.json should look like this:
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:
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
.npmrc in your consumer app and adding the following lines.
- For simplicity, my
TOKENis same as Step 1, you should create another Personal Access Token with just read:packages privileges.
OWNERis your package’s owner, mine is
Now, try to run the installation command:
$ npm install @OWNER/repo-name
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.