This project provides a boilerplate to help you create and publish reusable React components to npm.
- Vite: Fast development and optimized bundling for your component library.
- Vitest: Fast testing with Vite.
- Tailwind CSS: Utility-first CSS framework for rapidly building custom designs.
- pnpm: Efficient package management with improved performance and disk space usage.
- TypeScript: Static typing for better code quality and maintainability.
- Commitizen: Standardized commit messages for better collaboration.
- GitHub Actions: Automated Continuous Integration and Deployment.
- Release Please: Automated semantic versioning and release management through Pull Requests.
- The consumer of your npm package will need to have TailwindCSS installed in their project.
- This project supports css modules. So, you can use
*.module.css
files to style your components. To import modules into your components you have to generate types for css modules. To easily generate the typ definitions, you can use typed-css-modules package.
To start using this boilerplate and manually release, follow these steps:
-
- Clone this repository:
git clone https://github.com/ByteMeBaby/react-lib-starter.git
- Or, since this is a template repository, you can click on the "Use this template" button to create a new repository from this template.
-
Do the necessary changes to the
package.json
file: such as- Change the
name
field to your package name. - Change the
description
field to your package description. - Change the
repository
field to your repository URL. - Change the
author
field to your name. - Change the
license
field to your license. - Change the
keywords
field to your keywords. - Change the
homepage
field to your homepage URL. - Change the
bugs
field to your repository issues URL. - Change the
publishConfig
field to your npm registry URL.
- Change the
-
Install dependencies using pnpm:
pnpm install
-
Start the development server:
pnpm dev
This project uses Release Please for semantic release. To release a new version of your component library, follow these steps:
- Copy the content of
github
to.github
. - Create a new GitHub token as
GITHUB_TOKEN
with therepo
scope. - In repository settings -> Actions -> General -> workflow permissions, Allow github actions to create and approve pull requests.
- Create a new NPM token as
NPM_TOKEN
and put it under your repository secrets. - You can change the release workflow in
.github/workflows/release.yml
file.
This is a commitizen friendly project. So, you can use pnpm commit
to commit your changes. It will automatically generate a commit message for you. When you merge your changes into the main branch, Release Please will automatically create a release PR for you, based on the commit messages.
- Create a new branch for your changes:
git checkout -b feature/your-feature
. - Make your changes and commit them using Commitizen:
pnpm commit
. - Push your changes to your fork and create a Pull Request.
- The Release Please GitHub Action will automatically create a release PR when new changes are merged into the main branch.
- Review the release PR and merge it to create a new release.
To manually release a new version of your component library, follow these steps:
-
Build the library for production:
pnpm build
-
Publish the library to npm:
pnpm publish
- Fork this repository and clone it to your local machine.
- Install dependencies:
pnpm install
. - Create a new branch for your changes:
git checkout -b feature/your-feature
. - To ensure all the githooks are instakked run
pnpm husky install
. This should enable Commitizen forgit commit
. - Push your changes to your branch and create a Pull Request to
main
branch.
This repository offers its contents without any warranty or guarantee of its accuracy or reliability. Users are advised to use the materials at their own risk.
The project is licensed under MIT License. For a detailed understanding of the terms and conditions, please refer to the LICENSE file within the repository.