DEV Community

Alexey Pavlov
Alexey Pavlov

Posted on


How to deploy and publish to NPM your own React Components library

Deploy Storybook to GitHub Pages

Now we are going to deploy Storybook to GitHub Pages.

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

Image description

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

For Storybook deploy, we will use 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.

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

Storybook for my project is located here
All project files you can find in my GitHub repo

Publish a package to NPM

I suggest you to use 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
Enter fullscreen mode Exit fullscreen mode

It will ask us some questions, to answer that, you need to be already signed up in npm:

  • 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

To create a GitHub Personal Access Token go to this page , add name to your token, click first checkboxes group (repo) and click "generate token" button. Copy it and paste to terminal.

Image description

Image description

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

Image description

After that, we create a release.yml workflow to release the library. Go to semantic-release docs and copy this code for a new workflow

name: Release
      - master
    name: Release
    runs-on: ubuntu-latest
      - name: Checkout
        uses: actions/checkout@v2
          fetch-depth: 0
      - name: Setup Node.js
        uses: actions/setup-node@v2
          node-version: 'lts/*'
      - name: Install dependencies
        run: npm ci
      - name: Release
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: npx semantic-release
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

instead of

      - name: Install dependencies
        run: npm ci
Enter fullscreen mode Exit fullscreen mode

Then run

Enter fullscreen mode Exit fullscreen mode

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

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:

Image description

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

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.