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

Learn how to create a React library using TSDX and automate its publishing with GitHub Actions.

Typescript

React

Github

Web Development

Programming

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


Get latest updates

I post blogs and videos on different topics on software
development. Subscribe newsletter to get notified.


You May Also Like

Resolving the Prisma Puzzle: Achieving Seamless Integration with AWS Lambda and Serverless Framework

Resolving the Prisma Puzzle: Achieving Seamless Integration with AWS Lambda and Serverless Framework

Discover how to seamlessly integrate Prisma with AWS Lambda and the Serverless Framework, solving the puzzle for smoother development and deployment experiences.

React 19 is Coming Soon: Discover the Future of UI Development!

React 19 is Coming Soon: Discover the Future of UI Development!

Get ready for the next evolution in React with React 19! Explore groundbreaking features like the React Compiler and Actions, revolutionizing UI development for the modern era.

Mastering CSS Theming with CSS Variables

Mastering CSS Theming with CSS Variables

Explore the versatility of CSS variables in frontend development. Learn how to implement dynamic theming, switch between themes effortlessly, and create customizable user interfaces with practical examples.