{"id":19782440,"url":"https://github.com/steadylearner/react-embed-with-rollup","last_synced_at":"2026-03-19T11:41:28.027Z","repository":{"id":41622531,"uuid":"271989559","full_name":"steadylearner/react-embed-with-rollup","owner":"steadylearner","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-06T08:46:58.000Z","size":4336,"stargazers_count":0,"open_issues_count":24,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-11T02:32:55.830Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/steadylearner.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":"2020-06-13T10:44:47.000Z","updated_at":"2020-06-13T11:32:18.000Z","dependencies_parsed_at":"2023-02-05T18:00:31.696Z","dependency_job_id":null,"html_url":"https://github.com/steadylearner/react-embed-with-rollup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Freact-embed-with-rollup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Freact-embed-with-rollup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Freact-embed-with-rollup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Freact-embed-with-rollup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steadylearner","download_url":"https://codeload.github.com/steadylearner/react-embed-with-rollup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241113291,"owners_count":19911859,"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-11-12T06:05:09.503Z","updated_at":"2026-03-02T21:33:02.089Z","avatar_url":"https://github.com/steadylearner.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Build React umd file with Rollup\n\nProject with CRA to dev and Rollup to build umd lib file to embed.\n\n## How to use it.\n\n- Use your libary component or app in src/ folder.\n- Specify entry file in rollup's config input property (`rollup.config.js`). src/index.js is the entry point currrently.\n- Test run your bundle by running `yarn start`.\n- Run `yarn build` to bundle the production project to embed.\n- $node cdn-server/index.js and $node cdn-server/index.js in differnet console.\n- Visit localhost:3001/page and edit myapp.init() inside cdn-client/index.html\n\n## Development and Production difference\n\nInside src/index.js, you will see the code snippet below with comments.\n\nComment init() part before you make production files to embed with $yarn build\n\nUncomment init() part when you want to back to develop React project again.\n\nI have attempted to make it work without manual control. But, it wasn't easy to find how in short period of time.\n\nI think that you can easily find the better way.\n\n```js\nexport const init = (config = \"Window\") =\u003e {\n    alert(config);\n    ReactDOM.render(\u003cApp config={config} /\u003e, document.getElementById('root'));\n}\n\ninit() \n```\n\n## Read More\n\n* [How to bundle React app with Rollup](https://medium.com/better-programming/lets-build-react-components-library-part-3-b2e7aec478a2)\n* [How to Build React components library](https://medium.com/better-programming/lets-build-react-components-library-part-3-b2e7aec478a2)\n* [Base Rollup repository for React](https://github.com/codenaz/create-react-package-tutorial)\n* [Resolving modules from browser globals](https://engineering.mixmax.com/blog/rollup-externals/)\n* [Import undefined rollup](https://www.google.com/search?client=firefox-b-d\u0026q=import-undefined-when-bundling-ui-library-with-rollup)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadylearner%2Freact-embed-with-rollup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteadylearner%2Freact-embed-with-rollup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadylearner%2Freact-embed-with-rollup/lists"}