{"id":16666714,"url":"https://github.com/nerdo/react-component-boilerplate","last_synced_at":"2025-06-24T23:11:29.253Z","repository":{"id":40763675,"uuid":"203716927","full_name":"nerdo/react-component-boilerplate","owner":"nerdo","description":"A simple boilerplate setup for creating a React component library.","archived":false,"fork":false,"pushed_at":"2023-01-06T09:48:42.000Z","size":2578,"stargazers_count":1,"open_issues_count":16,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T02:27:36.792Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/nerdo.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":"2019-08-22T04:53:14.000Z","updated_at":"2021-01-12T15:22:16.000Z","dependencies_parsed_at":"2023-02-05T20:00:24.015Z","dependency_job_id":null,"html_url":"https://github.com/nerdo/react-component-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nerdo/react-component-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdo%2Freact-component-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdo%2Freact-component-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdo%2Freact-component-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdo%2Freact-component-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nerdo","download_url":"https://codeload.github.com/nerdo/react-component-boilerplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdo%2Freact-component-boilerplate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261771218,"owners_count":23207224,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-10-12T11:11:51.691Z","updated_at":"2025-06-24T23:11:29.231Z","avatar_url":"https://github.com/nerdo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Component Boilerplate\n\nA simple boilerplate setup for creating a React component library.\n\n## Installation\nWhile in the boilerplate repository path, run this command to create a fresh copy of the boilerplate, replacing `/path/to/component/repo` with an absolute or relative path to where you want the new repository to end up.\n\n```\nnpx make-fresh-repo /path/to/component/repo\n```\n\n## Setup\nChange into the component repository's directory and install the necessary modules:\n\n```\ncd /path/to/component/repo\nnpm install\n```\n\nEdit `package.json`. Find and change the name, description, author, repository, license, etc. to\nvalues appropriate for your library. You should also probably do a find in files to find references\nto `Boilerplate` and rename any of those files to the name of your component.\n\nDon't forget to also change the `README.md` and `LICENSE` files.\n\n## Testing\nThe boilerplate is configured with [Jest](https://jestjs.io) and [react-testing-library](https://github.com/testing-library/react-testing-library) which are [recommended testing tools for React](https://reactjs.org/docs/testing.html).\n\nTo run tests, simply run...\n```\nnpm run test\n```\n\n...which runs `jest`\n\n## Workflow\nSource code for the library should reside in the `src` directory.\n\n`index.js` is the entry point and should export whatever you want for your library.\n\n### Development (built-in)\nIn order to facilitate working with your library as it would be used in a host application, a barebones React app is included in the `dev` directory. Its `index.js` is the entry point for the host test bed.\n\nIt also contains a `Dev` component which is the component root for development purposes.\n\nFor development, run\n\n```\nnpm run dev\n```\n\n...which spins up a web server, serving content from the `dev` directory.\n\n#### Adding dependencies as you develop\nThis boilerplate is set up so that 3rd party libraries, like react, should be set up as peer dependencies so that the only thing in your bundle is your component code. Hosts using this component will need to install any peer dependencies within the host application.\n\nWhen developing your component, you should add any `npm` dependencies as dev dependencies (i.e. `npm install --save-dev` or `npm i -D`). Then, edit `package.json` and copy those dependencies into the `peerDependencies` section where `react` and `react-dom` are.\n\nWhen using the built-in development environment, you may also need to edit `dev/serve/index.html` and add any stylesheets that aren't included in your bundle. The development bundle otherwise includes any of the dependencies your component needs and no other manual configuration should be necessary.\n\n### Development (external host)\nYou may also want to develop your component inside an existing/external host app.\n\nThe best way to do this is to...\n\n1. Ensure you've edited your `package.json` and given your component the proper `name`.\n2. Run `npm link` inside of `/path/to/component/repo`. This will allow you to symlink your component via npm using the `name` in `package.json`.\n3. Go to your host app and run `npm link the-name-in-package-json`.\n\nFor example:\n\n```\ncd /path/to/component/repo\n# edit package.json to have the name 'foo-component'\nnpm link\ncd /path/to/host/app\nnpm link foo-component\n```\n\nAt this point you can go back to your component directory and run `npm watch` which builds the\ncomponent for production and watches the directory for changes. Run your host app and develop to\nyour heart's content :)\n\n## Building for production\nTo build the production version of the component to the `dist` directory:\n\n```\nnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnerdo%2Freact-component-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnerdo%2Freact-component-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnerdo%2Freact-component-boilerplate/lists"}