How to deploy and publish to NPM your own React Components library
Tags: javascript, react, tutorial, programming
Published: 2022-09-08 04:08:06

## Deploy Storybook to GitHub Pages

Now we are going to deploy Storybook to [GitHub Pages](https://pages.github.com/).


For that we create a new branch "gh-pages" in our repo.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cf114fbffuzkwzymrqkg.png)

Then go to _settings_ -> _pages_ and we can find there a link for Storybook. If "gh-pages" branch wasn't chosen automatically, do it manually.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igsev7lp4hkqh4nat952.png)

For Storybook deploy, we will use [github-pages-deploy-action](https://github.com/JamesIves/github-pages-deploy-action)
 
Create a new workflow file `storybook.yml` in the `workflows` folder and past code below. The workflow starts for every `push` that contain changes in `storybook` or `src` directories.


{% embed https://gist.github.com/alpavlove/45f5cb1566204600eb3d9f471c492f01.js %}


Let's push it to GitHub and check that it works. For that, we need to do some changes in any file `storybook` or `src` directories and push it. Go to _GitHub repo _-> _actions_ and check the workflow. When it finishes, we can open a live Storybook page using the link we noticed before (_settings_ -> _pages_).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3yx6wkol254qqlzafvx.png)


Storybook for my project is located [here] (https://alpavlove.github.io/fancy-ui-reat-lib/?path=/story/button--default) 
All project files you can find in my [GitHub repo](https://github.com/alpavlove/fancy-ui-reat-lib)


## Publish a package to NPM

I suggest you to use [semantic-release](https://semantic-release.gitbook.io/semantic-release/) - fully automated version management and package publishing. It makes the process of publishing super easy.

To start, run this command in your project directory. It will set up semantic-release for your project.

```
npx semantic-release-cli setup
```
It will ask us some questions, to answer that, you need to be already signed up in [npm](https://www.npmjs.com/):
- What is your npm registry? (I left this field by default)
- What is your npm username? (use your personal username)
- What is your npm password? (use your personal password)
- What is your NPM two-factor authentication code?
- Provide a GitHub Personal Access Token (follow instructions bellow to create it)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btfcd4x9cgvuj5yff3op.png)

To create a GitHub Personal Access Token go to [this page ](https://github.com/settings/tokens/new), add name to your token, click first checkboxes group (repo) and click "generate token" button. Copy it and paste to terminal.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzpu1kxc0qty3ub0xfra.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nak732y7cw4jvzgzpw6.png)

Then the script offers us some CI for choosing. Chose "GitHub Actions"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8swzwftkdodt2tc5bgo.png)

After that, we create a `release.yml` workflow to release the library. Go to semantic-release [docs](https://semantic-release.gitbook.io/semantic-release/recipes/ci-configurations/github-actions) and copy this code for a new workflow

```
name: Release
on:
  push:
    branches:
      - master
jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 'lts/*'
      - name: Install dependencies
        run: npm ci
      - name: Release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: npx semantic-release
```
 
In my project, I will only change a command to install dependencies for a command I already use in other workflows

```
      - name: Install deps and build (with cache)
        uses: bahmutov/npm-install@v1
```
instead of 

```
      - name: Install dependencies
        run: npm ci
```

Then run

```
yarn
```

And push changes to GitHub repo.

Important notice! You can publish only a package with unique name for NPM registry. Be sure a name you are using in `package.json` `name` field in unique.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jc3sgn6phldk0snv8j0t.png)

After workflow finishes, you will be able to find your package on NPM.

One more benefit of using semantic-release, you can use commit message to choose a [release type](https://semantic-release.gitbook.io/semantic-release/#commit-message-format):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gkklggo8aixu8fduibf.png)

Hope you find this article useful and will easily deploy and push your package to NPM!