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.
create react library using tsdx
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 = ({ name }) => {
return (
Hello, {name}!
);
};
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:
- Create a
.github/workflows/publish.ymlfile in the root directory of the project. - Add the following code to the
publish.ymlfile:
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.
💡 You can also publish your reusable library package to a component hub like bit.dev. With OSS tools such as Bit, you can independently test, document, version, and publish your UI components which can be reused across multiple projects and teams.
Learn more here:
[Building a Composable UI Component Library
How to build component library. React component library, with composable components.bit.dev](bit.dev/blog/building-a-composable-ui-compo.. "bit.dev/blog/building-a-composable-ui-compo..")
Follow me on Medium to get more updates on ReactJS, NextJS, NodeJS, Web3, Solidity and lots of exciting topics.
Build React Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
[Creating a Developer Website with Bit components
How I built my portfolio using independent React components.blog.bitsrc.io](https://blog.bitsrc.io/creating-a-developer-website-with-bit-components-3f4083a7f050 "blog.bitsrc.io/creating-a-developer-website..")
[How We Build Micro Frontends
Building micro-frontends to speed up and scale our web development process.blog.bitsrc.io](https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc "blog.bitsrc.io/how-we-build-micro-front-end..")
[How we Build a Component Design System
Building a design system with components to standardize and scale our UI development process.blog.bitsrc.io](https://blog.bitsrc.io/how-we-build-our-design-system-15713a1f1833 "blog.bitsrc.io/how-we-build-our-design-syst..")
[How to reuse React components across your projects
Finally, you completed the task of creating a fantastic input field for the form in your app. You are happy with the…bit.dev](bit.dev/blog/how-to-reuse-react-components-.. "bit.dev/blog/how-to-reuse-react-components-..")
[5 Ways to Build a React Monorepo
Build a production-grade React monorepo: From fast builds to code-sharing and dependencies.blog.bitsrc.io](https://blog.bitsrc.io/5-ways-to-build-a-react-monorepo-a294b6c5b0ac "blog.bitsrc.io/5-ways-to-build-a-react-mono..")
[How to Create a Composable React App with Bit
In this guide, you'll learn how to build and deploy a full-blown composable React application with Bit. Building a…bit.dev](bit.dev/blog/how-to-create-a-composable-rea.. "bit.dev/blog/how-to-create-a-composable-rea..")
[How to Reuse and Share React Components in 2023: A Step-by-Step Guide
Learn how easy code sharing and collaboration can be, with Bit’s intuitive approach to reusable React components.blog.bitsrc.io](https://blog.bitsrc.io/how-to-reuse-and-share-react-components-in-2023-a-step-by-step-guide-85642e543afa "blog.bitsrc.io/how-to-reuse-and-share-react..")