{"id":16065144,"url":"https://github.com/knowankit/build-react-npm","last_synced_at":"2026-01-21T02:07:27.900Z","repository":{"id":38984004,"uuid":"407365086","full_name":"knowankit/build-react-npm","owner":"knowankit","description":"⚡️A CLI tool for building react npm packages.","archived":false,"fork":false,"pushed_at":"2023-01-08T03:42:45.000Z","size":12100,"stargazers_count":1,"open_issues_count":27,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-09-21T06:56:12.255Z","etag":null,"topics":["babel","build-react-npm","cli","component","react","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/knowankit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-17T01:27:48.000Z","updated_at":"2022-12-27T16:18:58.000Z","dependencies_parsed_at":"2023-02-08T04:45:56.891Z","dependency_job_id":null,"html_url":"https://github.com/knowankit/build-react-npm","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/knowankit/build-react-npm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowankit%2Fbuild-react-npm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowankit%2Fbuild-react-npm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowankit%2Fbuild-react-npm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowankit%2Fbuild-react-npm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knowankit","download_url":"https://codeload.github.com/knowankit/build-react-npm/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knowankit%2Fbuild-react-npm/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28622473,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T23:49:58.628Z","status":"online","status_checked_at":"2026-01-21T02:00:08.227Z","response_time":86,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","build-react-npm","cli","component","react","webpack"],"created_at":"2024-10-09T05:11:27.911Z","updated_at":"2026-01-21T02:07:27.880Z","avatar_url":"https://github.com/knowankit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📦 build-react-npm\n\n\u003e CLI for creating reusable, modern React libraries using **Webpack** and **create-react-app**.\n\n## Intro\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"600\" src=\"https://github.com/knowankit/build-react-npm/blob/develop/demo.gif\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://twitter.com/knowankit\"\u003e\n    \u003cimg alt=\"Twitter: Ankit Kumar\" src=\"https://img.shields.io/twitter/follow/knowankit.svg?style=social\" target=\"_blank\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Features 🚀\n\n- A modern and easy to use CLI\n- Rapid development of the component\n- Generates modern JS feature files\n- [create-react-app](https://github.com/facebookincubator/create-react-app) for example usage and local dev\n- [Webpack](https://webpack.js.org/) for bundling\n- [Babel](https://babeljs.io/) for transpiling\n- Optional support for TypeScript\n- Sourcemap creation\n- Publish github pages with one command\n- Easy to build and test your component with the example template\n\n## How is it different from the other library CLI?\n\n- It is using latest version of webpack. Currently, other CLI's are using rollup.\n- Development is fast here because we are not directly consuming the component. First we are building it peacefully, and once it is ready then we do `npm pack` to test in our local environment\n\n## Install globally\n\n```bash\nnpm install -g build-react-npm\n```\n\nor\n\n```bash\nnpx build-react-npm\n```\n\n## Development\n\n```bash\nbuild-react-npm\n```\n\nOnce you run the CLI, you will be asked to answer few questions. Complete the steps and you should have a react project with an example component.\n\nIf you are using `npm`\n\n```bash\nnpm run dev\n```\n\nelse\n\n```bash\nyarn dev\n```\n\nYou will have a example component running in the browser. You can start developing your component here by adding some Javscript and CSS.\n\n## Test\n\nLooks like you have build your awesome react component. Now, we need to test it as an individual component by importing it. To do this first we need to build our component.\n\nTo build the component run\n\n```bash\nyarn build\n```\nor\n\n```bash\nnpm run build\n```\n\nThis will build the file and also pack you npm package in the format of `tgz`. You can see a new file has been created with the name of your package at the root level. Something like `[name-of-package-version-number].tgz` This file will be used in our example dir where we will be testing.\n\nGo to the example directory and check the `package.json`, you will see your package name in the dependency. You need to change it as per your package name or just rename whatever it is in the `[name-of-package-version-number].tgz` filename.\n\n```bash\nnpm install\n```\n\nThis will install your package and you can test it in in your local project before publishing.\n\n\n## Publish\n\nOnce you have tested your component, you can go the root directory and run\n\n```bash\nnpm publish\n```\n\nIf you want to create the demo page as well using the git hub page then you can style your example directory and run\n\n```bash\nnpm run deploy\n```\n\nCongratlations 🎉, you have published your package\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"200\" src=\"https://github.com/knowankit/build-react-npm/blob/develop/success.gif\"\u003e\n\u003c/p\u003e\n\n## Libraries bootstrapped from this CLI - build-react-npm\n\n* [React bubble effect button](https://github.com/knowankit/react-bubbly-effect-button)\n* [Particle effect on text](https://github.com/knowankit/particle-text-effect)\n\n## License\n\nMIT © [Ankit Kumar](https://github.com/knowankit)\n\nSupport my OSS work by \u003ca href=\"https://twitter.com/knowankit\"\u003efollowing me on twitter \u003cimg src=\"https://storage.googleapis.com/saasify-assets/twitter-logo.svg\" alt=\"twitter\" height=\"24px\" align=\"center\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknowankit%2Fbuild-react-npm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknowankit%2Fbuild-react-npm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknowankit%2Fbuild-react-npm/lists"}