https://github.com/datalayer-examples/jupyter-react-vite-example
🪐 ⚛️ Jupyter React Vite example
https://github.com/datalayer-examples/jupyter-react-vite-example
example jupyter react vite
Last synced: 4 months ago
JSON representation
🪐 ⚛️ Jupyter React Vite example
- Host: GitHub
- URL: https://github.com/datalayer-examples/jupyter-react-vite-example
- Owner: datalayer-examples
- Created: 2023-03-21T12:29:59.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-21T04:45:06.000Z (over 1 year ago)
- Last Synced: 2024-05-21T05:45:40.078Z (over 1 year ago)
- Topics: example, jupyter, react, vite
- Language: TypeScript
- Homepage: https://jupyter-ui.datalayer.tech
- Size: 31.3 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://datalayer.io)
[](https://github.com/sponsors/datalayer)
# 🪐 ⚛️ Jupyter React Vite Example
> Live example on https://jupyter-react-vite-example.vercel.app
Example to run [Jupyter React](https://github.com/datalayer/jupyter-ui/tree/main/packages/react) in a [Vite.js](https://vitejs.dev) Web application.
```bash
npm i
npm run dev
```
Ensure to add the following script in the head of your HTML.
```html
globalThis.__webpack_public_path__ = "";
```
To create a production build, you first need to patch `@jupyter-widgets/controls` to avoid issues with early loadings via `require.js`.
```patch
diff --git a/node_modules/@jupyter-widgets/controls/lib/index.js b/node_modules/@jupyter-widgets/controls/lib/index.js
index 0063f69..ade0862 100644
--- a/node_modules/@jupyter-widgets/controls/lib/index.js
+++ b/node_modules/@jupyter-widgets/controls/lib/index.js
@@ -22,5 +22,5 @@ export * from './widget_tagsinput';
export * from './widget_string';
export * from './widget_description';
export * from './widget_upload';
-export const version = require('../package.json').version;
+export const version = "0.1.0";
//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/node_modules/@jupyter-widgets/controls/src/index.ts b/node_modules/@jupyter-widgets/controls/src/index.ts
index 912458d..5edaa11 100644
--- a/node_modules/@jupyter-widgets/controls/src/index.ts
+++ b/node_modules/@jupyter-widgets/controls/src/index.ts
@@ -24,4 +24,4 @@ export * from './widget_string';
export * from './widget_description';
export * from './widget_upload';
-export const version = (require('../package.json') as any).version;
+export const version = "5.0.12";
```
Then run the following command to build and test the artifacts in the `dist` folder.
```bash
# make run
npm run build
cd dist
python -m http.server 8675 # Or any other local server.
open http://localhost:8675
```
## ⚖️ License
Copyright (c) 2025 Datalayer, Inc.
Released under the terms of the MIT license (see [LICENSE](https://github.com/datalayer/jupyter-ui/blob/main/LICENSE).