From e5d7110a21e3e4e2dc77cd3964503f0809e90b7b Mon Sep 17 00:00:00 2001 From: Eric Charles Date: Wed, 11 Dec 2024 11:42:44 +0100 Subject: [PATCH] example: local server (#335) --- .../docs/deployments/jupyter-server/index.mdx | 47 +++++++++++--- packages/react/src/examples/Localhost.tsx | 33 ---------- .../src/examples/NotebookLocalServer.tsx | 65 +++++++++++++++++++ packages/react/webpack.config.js | 6 +- 4 files changed, 106 insertions(+), 45 deletions(-) delete mode 100644 packages/react/src/examples/Localhost.tsx create mode 100644 packages/react/src/examples/NotebookLocalServer.tsx diff --git a/docs/docs/deployments/jupyter-server/index.mdx b/docs/docs/deployments/jupyter-server/index.mdx index d5dba1b8..9a4b1154 100644 --- a/docs/docs/deployments/jupyter-server/index.mdx +++ b/docs/docs/deployments/jupyter-server/index.mdx @@ -1,6 +1,6 @@ # Jupyter Server -To connect to a Jupyter Server, you have to define the URL for the Jupyter Server as well as a the Jupyter Token. +To connect to a Jupyter Server, you have to define the URL for the `Jupyter Server` as well as a the `Jupyter Token`. Assuming you have Jupyter Server correctly installed on your machine, you can run your local server with the following command. @@ -15,12 +15,19 @@ yarn start-local The Jupyter Server and the Jupyter Token can be provided in the [Jupyter Context](/docs/components/context) ```ts - - - +const NotebookLocalJupyter = () => ( + + + +) ``` Alternatively, you can to define a `script` tag in the head section your host index HTML page information for your React applicatio with those 2 configurations (see for example the content of this [index-local.html](https://github.com/datalayer/jupyter-ui/blob/main/packages/react/public/index-local.html)). @@ -39,11 +46,32 @@ Alternatively, you can to define a `script` tag in the head section your host in ``` +Optionally, you can use the JupyterReactTheme component + +```ts +const NotebookLocalJupyter = () => { + useJupyter({ + jupyterServerUrl: "http://localhost:8686/api/jupyter-server", + jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6", + }) + return ( + + + + ); +} +``` + :::note If you are also using a `jupyter-config-data`, ensure you set the correct values over there. ```html + + ``` ::: @@ -63,7 +92,7 @@ The values defined in the Jupyter context are taking precedence on the values se If you are delivering the React.js web application from a different URL than your Jupyter Server, the Jupyter Server should be configured to accept Cross-origin request with for example in the `jupyter_server_config.py` the following traits. -:::info +:::warning Please tune the following example to fit your security requirements, this is in no way production-ready configuration. @@ -130,4 +159,4 @@ If you are using the [JupyterLabApp](/docs/components/jupyterlab-app) component, ``` -::: \ No newline at end of file +::: diff --git a/packages/react/src/examples/Localhost.tsx b/packages/react/src/examples/Localhost.tsx deleted file mode 100644 index e7bfb656..00000000 --- a/packages/react/src/examples/Localhost.tsx +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Copyright (c) 2021-2023 Datalayer, Inc. - * - * MIT License - */ - -import { createRoot } from 'react-dom/client'; -import { Jupyter } from '../jupyter'; -import { Notebook } from '../components/notebook/Notebook'; -import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar'; -import { CellSidebarButton } from '../components/notebook/cell/sidebar/CellSidebarButton'; - -const div = document.createElement('div'); -document.body.appendChild(div); -const root = createRoot(div); - -root.render( - - - -); diff --git a/packages/react/src/examples/NotebookLocalServer.tsx b/packages/react/src/examples/NotebookLocalServer.tsx new file mode 100644 index 00000000..0de4e762 --- /dev/null +++ b/packages/react/src/examples/NotebookLocalServer.tsx @@ -0,0 +1,65 @@ +/* + * Copyright (c) 2021-2023 Datalayer, Inc. + * + * MIT License + */ + +import { createRoot } from 'react-dom/client'; +import { Text } from '@primer/react'; +import { Jupyter, useJupyter } from '../jupyter'; +import { JupyterReactTheme } from '../theme'; +import { Notebook } from '../components/notebook/Notebook'; +import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar'; +import { CellSidebarButton } from '../components/notebook/cell/sidebar/CellSidebarButton'; + +const NotebookJupyter = () => ( + + + +) + +const NotebookJupyterReactTheme = () => { + useJupyter({ + jupyterServerUrl: "http://localhost:8686/api/jupyter-server", + jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6", + }) + return ( + + + + ); +} + +const div = document.createElement('div'); +document.body.appendChild(div); +const root = createRoot(div); + +root.render( + <> + {/* + Local Jupyter Server (with a Jupyter Context) + + */} + Local Jupyter Server (with a Jupyter React Theme) + + +); diff --git a/packages/react/webpack.config.js b/packages/react/webpack.config.js index e79067f5..2e42e502 100644 --- a/packages/react/webpack.config.js +++ b/packages/react/webpack.config.js @@ -20,7 +20,7 @@ const ENTRY = // './src/app/App'; // './src/examples/Bokeh'; // './src/examples/Bqplot'; - './src/examples/Cell'; + // './src/examples/Cell'; // './src/examples/CellLite'; // './src/examples/Cells'; // './src/examples/CellsExecute'; @@ -41,10 +41,9 @@ const ENTRY = // './src/examples/KernelExecute'; // './src/examples/KernelExecutor'; // './src/examples/Kernels'; - // './src/examples/Localhost'; // './src/examples/Lumino'; // './src/examples/Matplotlib'; - // './src/examples/Notebook'; + './src/examples/Notebook'; // './src/examples/NotebookCellSidebar'; // './src/examples/NotebookCellToolbar'; // './src/examples/NotebookColorMode'; @@ -53,6 +52,7 @@ const ENTRY = // './src/examples/NotebookLess'; // './src/examples/NotebookLite'; // './src/examples/NotebookLiteContext'; + // './src/examples/NotebookLocalServer'; // './src/examples/NotebookMutationsKernel'; // './src/examples/NotebookMutationsServiceManager'; // './src/examples/NotebookNbformat';