{"id":27959134,"url":"https://github.com/datalayer-examples/jupyter-react-vite-example","last_synced_at":"2025-10-18T15:46:12.373Z","repository":{"id":184396731,"uuid":"616958601","full_name":"datalayer-examples/jupyter-react-vite-example","owner":"datalayer-examples","description":"🪐 ⚛️ Jupyter React Vite example","archived":false,"fork":false,"pushed_at":"2024-05-21T04:45:06.000Z","size":32,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-05-21T05:45:40.078Z","etag":null,"topics":["example","jupyter","react","vite"],"latest_commit_sha":null,"homepage":"https://jupyter-ui.datalayer.tech","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datalayer-examples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-03-21T12:29:59.000Z","updated_at":"2024-05-21T04:45:09.000Z","dependencies_parsed_at":"2023-10-23T07:27:16.006Z","dependency_job_id":"75a0718d-a1d5-42d4-a358-58b1191d8675","html_url":"https://github.com/datalayer-examples/jupyter-react-vite-example","commit_stats":null,"previous_names":["datalayer-examples/jupyter-react-vite-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datalayer-examples%2Fjupyter-react-vite-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datalayer-examples%2Fjupyter-react-vite-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datalayer-examples%2Fjupyter-react-vite-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datalayer-examples%2Fjupyter-react-vite-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datalayer-examples","download_url":"https://codeload.github.com/datalayer-examples/jupyter-react-vite-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252933441,"owners_count":21827508,"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":["example","jupyter","react","vite"],"created_at":"2025-05-07T18:28:50.886Z","updated_at":"2025-10-18T15:46:12.365Z","avatar_url":"https://github.com/datalayer-examples.png","language":"TypeScript","funding_links":["https://github.com/sponsors/datalayer"],"categories":[],"sub_categories":[],"readme":"[![Datalayer](https://assets.datalayer.tech/datalayer-25.svg)](https://datalayer.io)\r\n\r\n[![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026style=flat\u0026color=1ABC9C)](https://github.com/sponsors/datalayer)\r\n\r\n# 🪐 ⚛️ Jupyter React Vite Example\r\n\r\n\u003e Live example on https://jupyter-react-vite-example.vercel.app\r\n\r\nExample to run [Jupyter React](https://github.com/datalayer/jupyter-ui/tree/main/packages/react) in a [Vite.js](https://vitejs.dev) Web application.\r\n\r\n```bash\r\nnpm i\r\nnpm run dev\r\n```\r\n\r\nEnsure to add the following script in the head of your HTML.\r\n\r\n```html\r\n    \u003c!-- Needed for ipywidgets --\u003e\r\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js\"\u003e\u003c/script\u003e\r\n    \u003cscript type=\"module\"\u003e\r\n      globalThis.__webpack_public_path__ = \"\";\r\n    \u003c/script\u003e\r\n```\r\n\r\nTo create a production build, you first need to patch `@jupyter-widgets/controls` to avoid issues with early loadings via `require.js`.\r\n\r\n```patch\r\ndiff --git a/node_modules/@jupyter-widgets/controls/lib/index.js b/node_modules/@jupyter-widgets/controls/lib/index.js\r\nindex 0063f69..ade0862 100644\r\n--- a/node_modules/@jupyter-widgets/controls/lib/index.js\r\n+++ b/node_modules/@jupyter-widgets/controls/lib/index.js\r\n@@ -22,5 +22,5 @@ export * from './widget_tagsinput';\r\n export * from './widget_string';\r\n export * from './widget_description';\r\n export * from './widget_upload';\r\n-export const version = require('../package.json').version;\r\n+export const version = \"0.1.0\";\r\n //# sourceMappingURL=index.js.map\r\n\\ No newline at end of file\r\ndiff --git a/node_modules/@jupyter-widgets/controls/src/index.ts b/node_modules/@jupyter-widgets/controls/src/index.ts\r\nindex 912458d..5edaa11 100644\r\n--- a/node_modules/@jupyter-widgets/controls/src/index.ts\r\n+++ b/node_modules/@jupyter-widgets/controls/src/index.ts\r\n@@ -24,4 +24,4 @@ export * from './widget_string';\r\n export * from './widget_description';\r\n export * from './widget_upload';\r\n \r\n-export const version = (require('../package.json') as any).version;\r\n+export const version = \"5.0.12\";\r\n```\r\n\r\nThen run the following command to build and test the artifacts in the `dist` folder.\r\n\r\n```bash\r\n# make run\r\nnpm run build\r\ncd dist\r\npython -m http.server 8675 # Or any other local server.\r\nopen http://localhost:8675\r\n```\r\n\r\n\u003cdiv align=\"center\" style=\"text-align: center\"\u003e\r\n  \u003cimg alt=\"Jupyter React Gallery\" src=\"https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-gallery.gif\" /\u003e\r\n\u003c/div\u003e\r\n\r\n## ⚖️ License\r\n\r\nCopyright (c) 2025 Datalayer, Inc.\r\n\r\nReleased under the terms of the MIT license (see [LICENSE](https://github.com/datalayer/jupyter-ui/blob/main/LICENSE).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatalayer-examples%2Fjupyter-react-vite-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatalayer-examples%2Fjupyter-react-vite-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatalayer-examples%2Fjupyter-react-vite-example/lists"}