{"id":24427700,"url":"https://github.com/makerkit/react-embeddable-widget","last_synced_at":"2025-04-12T09:50:42.234Z","repository":{"id":269375470,"uuid":"907215907","full_name":"makerkit/react-embeddable-widget","owner":"makerkit","description":"A Starter for building and deploying Javascript embeddable widgets using React and Tailwind CSS","archived":false,"fork":false,"pushed_at":"2024-12-23T05:22:39.000Z","size":61,"stargazers_count":27,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T01:42:55.047Z","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/makerkit.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-23T05:07:48.000Z","updated_at":"2025-04-07T06:08:37.000Z","dependencies_parsed_at":"2024-12-23T06:22:25.777Z","dependency_job_id":"31e3af66-7b66-48eb-afd4-f2a145494889","html_url":"https://github.com/makerkit/react-embeddable-widget","commit_stats":null,"previous_names":["makerkit/react-embeddable-widget"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makerkit%2Freact-embeddable-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makerkit%2Freact-embeddable-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makerkit%2Freact-embeddable-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makerkit%2Freact-embeddable-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/makerkit","download_url":"https://codeload.github.com/makerkit/react-embeddable-widget/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248550633,"owners_count":21122932,"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":"2025-01-20T12:12:34.608Z","updated_at":"2025-04-12T09:50:42.214Z","avatar_url":"https://github.com/makerkit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Embeddable Widget Starter by MakerKit\n\nThis is a starter template for creating embeddable widgets with React by [MakerKit](https://makerkit.dev).\n\nTo learn more about how we created this template, check out our [blog post](https://makerkit.dev/blog/tutorials/embeddable-widgets-react).\n\n## ✨ Features\n\n- 🛡️ **Fully Isolated** - Shadow DOM encapsulation prevents style conflicts\n- 🚀 **Modern Stack** - Built with React 19, TypeScript, and Vite\n- 🔌 **Simple Integration** - Single line of code to embed\n- 🛠️ **Developer Experience** - Hot reload, TypeScript, and modern tooling\n\n## Getting Started\n\nTo get started, follow these steps:\n\n1. Clone this repository to your local machine.\n2. Install the dependencies by running `npm install` or `pnpm install` depending on your preferred package manager.\n3. Run the development server by running `npm run dev` or `pnpm dev`.\n4. Open your browser and navigate to `http://localhost:3000` to see the widget in action.\n\n### Structure\n\nThe project is structured as follows:\n\n```\n.\n├── dist/               # Output directory for the widget\n├── public/             # Public assets for the widget\n├── src/                # Source code for the widget\n│   ├── App.css         # CSS file for the development Vite app\n│   ├── App.tsx         # Entry point for the development Vite app\n│   ├── widget/         # Source code for the widget\n│   │   ├── components/ # Components for the widget\n│   │   ├── lib/        # Utility functions for the widget\n│   │   ├── index.tsx   # Entry point for the widget\n│   │   └── styles/     # CSS styles for the widget\n```\n\n1. **Widget code**: The source code for the widget is located in the `src/widget` directory.\n2. **Development app code**: The source code for the development app is located in the `src` directory. Useful for development and testing your widget in a Vite app.\n3. **Widget distribution**: The widget is bundled into the `dist` directory.\n4. **Public assets**: Public assets like images, fonts, and CSS files are located in the `public` directory.\n\n### Cloning the Repository\n\nTo clone the repository, you can use the following command:\n\n```bash\ngit clone https://github.com/makerkit/react-widget-starter.git\n```\n\n### Installing Dependencies\n\nTo install the dependencies, you can use the following commands:\n\n```bash\nnpm install\n```\n\nor\n\n```bash\npnpm install\n```\n\n### Running the Development Server\n\nTo run the development server, you can use the following command:\n\n```bash\nnpm run dev\n```\n\nor\n\n```bash\npnpm dev\n```\n\n### Opening the Widget in Your Browser\n\nOnce the development server is running, you can open your browser and navigate to `http://localhost:3000` to see the widget in action.\n\n## Bundling the Widget\n\nTo bundle the widget, you can use the following command:\n\n```bash\nnpm run build:widget\n```\n\nor\n\n```bash\npnpm build:widget\n```\n\nThis will create a `dist` directory with the bundled widget files.\n\nFor running the widget in production mode, you can use the following command:\n\n```bash\nnpm run build:widget:production\n```\n\nor\n\n```bash\npnpm build:widget:production\n```\n\nProduction mode will use the environment variables from the `.env.production` file.\n\n## Testing the bundled widget\n\nTo test the bundled widget, you can use the following command:\n\n```bash\nnpm run serve\n```\n\nor\n\n```bash\npnpm serve\n```\n\nThis will start a local server and serve the widget at `http://localhost:33333/index.html`.\n\n## Deploying the Widget to a CDN\n\nDepending on which provider you want to use, you can deploy the widget to a CDN, or simply host it on your own server.\n\nCopy the bundled files from the `dist` directory to your server and have the consumers of the widget use the script tags to load the widget.\n\nIf your widget is hosted on a CDN, you can use the following script tag:\n\n```html\n\u003cscript async src=\"https://example.com/widget.js\"\u003e\u003c/script\u003e\n```\n\n## Contributing\n\nWe welcome contributions to this project. If you find a bug or have a suggestion for improvement, please open an issue or submit a pull request.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.\n\n## About Makerkit, the production-ready SaaS Starter Kit\n\n[Makerkit](https://makerkit.dev) is a SaaS Starter Kit for building a production-ready SaaS application. Check it out for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakerkit%2Freact-embeddable-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmakerkit%2Freact-embeddable-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakerkit%2Freact-embeddable-widget/lists"}