Creating a React Library Using TSDX and Automating Publishing with GitHub Actions

React is a popular library for building web applications and creating reusable React components can save a lot of development time. TSDX is a tool that helps in creating, testing and publishing React libraries. It is easy to set up, comes with several pre-configured libraries, and supports TypeScript out of the box. In this tutorial, we will learn how to create a React library using TSDX and automate its publishing with GitHub Actions.

Step 1: Setting up the Project

To start, we will create a new project with TSDX by running the following command in the terminal:

npx tsdx create my-react-library

This command will create a new project with a pre-configured TSDX environment. Once the project is created, we can start adding our components to it.

Step 2: Creating the Components

We will create a simple React component that displays a greeting message. We will add this component to the library we are creating. Here is the code for the component:

import React, { FC } from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: FC<GreetingProps> = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
};

export default Greeting;

Once the component is created, we need to add it to the index.ts file, which exports all the components in the library. Here is the code for the index.ts file:

export { default as Greeting } from './components/Greeting';

Step 3: Testing the Library

We can test our library by running the following command in the terminal:

npm run test

This command will run the tests in the src directory. We can add more tests in the __tests__ directory.

Step 4: Publishing the Library

We can publish our library to the npm registry by running the following command in the terminal:

npm publish

This command will publish the library to the npm registry, and it will be available for other developers to use in their projects.

Step 5: Automating the Publishing Process with GitHub Actions

We can automate the publishing process with GitHub Actions, which allows us to automatically run scripts and tasks when certain events occur, such as pushing code to the repository. Here are the steps to automate the publishing process with GitHub Actions:

1. Create a .github/workflows/publish.yml file in the root directory of the project.
2. Add the following code to the publish.yml file:

name: Publish

on:
  push:
    branches:
      - main

jobs:
  build-and-publish:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14.x'

      - name: Install Dependencies
        run: npm ci

      - name: Build Library
        run: npm run build

      - name: Publish to NPM
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}
        run: npm publish

3. This GitHub Action will run when the code is pushed to the main branch. It will check out the code, set up Node.js, install dependencies, build the library, and publish it to the npm registry using the NODE_AUTH_TOKEN environment variable.

Conclusion

Creating a reusable library package is very useful when we need to use similar functionality or UI component in different projects. By using the above steps it will help you to create a library and publish it to NPM with a one-time setup of GitHub Actions.