Skip to content

Commit e5d7110

Browse files
echarlesecharles
authored
example: local server (#335)
1 parent 15200c0 commit e5d7110

File tree

4 files changed

+106
-45
lines changed

4 files changed

+106
-45
lines changed

‎docs/docs/deployments/jupyter-server/index.mdx

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Jupyter Server
22

3-
To connect to a Jupyter Server, you have to define the URL for the Jupyter Server as well as a the Jupyter Token.
3+
To connect to a Jupyter Server, you have to define the URL for the `Jupyter Server` as well as a the `Jupyter Token`.
44

55
Assuming you have Jupyter Server correctly installed on your machine, you can run your local server with the following command.
66

@@ -15,12 +15,19 @@ yarn start-local
1515
The Jupyter Server and the Jupyter Token can be provided in the [Jupyter Context](/docs/components/context)
1616

1717
```ts
18-
<Jupyter
19-
"jupyterServerUrl": "http://localhost:8686/api/jupyter-server"
20-
"jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
21-
>
22-
<Notebook/>
23-
</Jupyter>
18+
const NotebookLocalJupyter = () => (
19+
<Jupyter
20+
jupyterServerUrl="http://localhost:8686/api/jupyter-server"
21+
jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
22+
startDefaultKernel
23+
>
24+
<Notebook
25+
path="ipywidgets.ipynb"
26+
id="notebook-jupyter-id"
27+
height="calc(100vh - 250px)" // (Height - Toolbar Height).
28+
/>
29+
</Jupyter>
30+
)
2431
```
2532

2633
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,18 +46,40 @@ Alternatively, you can to define a `script` tag in the head section your host in
3946
</html>
4047
```
4148

49+
Optionally, you can use the JupyterReactTheme component
50+
51+
```ts
52+
const NotebookLocalJupyter = () => {
53+
useJupyter({
54+
jupyterServerUrl: "http://localhost:8686/api/jupyter-server",
55+
jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
56+
})
57+
return (
58+
<JupyterReactTheme>
59+
<Notebook
60+
startDefaultKernel
61+
path="ipywidgets.ipynb"
62+
id="notebook-jupyter-react-themeid"
63+
/>
64+
</JupyterReactTheme>
65+
);
66+
}
67+
```
68+
4269
:::note
4370

4471
If you are also using a `jupyter-config-data`, ensure you set the correct values over there.
4572

4673
```html
74+
<head>
4775
<script id="jupyter-config-data" type="application/json">
4876
{
4977
"baseUrl": "http://localhost:8686/api/jupyter-server",
5078
"wsUrl": "ws://localhost:8686/api/jupyter-server",
5179
"token": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
5280
}
5381
</script>
82+
</head>
5483
```
5584

5685
:::
@@ -63,7 +92,7 @@ The values defined in the Jupyter context are taking precedence on the values se
6392

6493
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.
6594

66-
:::info
95+
:::warning
6796

6897
Please tune the following example to fit your security requirements, this is in no way production-ready configuration.
6998

@@ -130,4 +159,4 @@ If you are using the [JupyterLabApp](/docs/components/jupyterlab-app) component,
130159
</script>
131160
```
132161

133-
:::
162+
:::

‎packages/react/src/examples/Localhost.tsx

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎packages/react/src/examples/NotebookLocalServer.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*
2+
* Copyright (c) 2021-2023 Datalayer, Inc.
3+
*
4+
* MIT License
5+
*/
6+
7+
import { createRoot } from 'react-dom/client';
8+
import { Text } from '@primer/react';
9+
import { Jupyter, useJupyter } from '../jupyter';
10+
import { JupyterReactTheme } from '../theme';
11+
import { Notebook } from '../components/notebook/Notebook';
12+
import { NotebookToolbar } from './../components/notebook/toolbar/NotebookToolbar';
13+
import { CellSidebarButton } from '../components/notebook/cell/sidebar/CellSidebarButton';
14+
15+
const NotebookJupyter = () => (
16+
<Jupyter
17+
jupyterServerUrl="http://localhost:8686/api/jupyter-server"
18+
jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
19+
startDefaultKernel
20+
>
21+
<Notebook
22+
path="ipywidgets.ipynb"
23+
id="notebook-jupyter-id"
24+
height="calc(100vh - 250px)" // (Height - Toolbar Height).
25+
cellSidebarMargin={60}
26+
CellSidebar={CellSidebarButton}
27+
Toolbar={NotebookToolbar}
28+
/>
29+
</Jupyter>
30+
)
31+
32+
const NotebookJupyterReactTheme = () => {
33+
useJupyter({
34+
jupyterServerUrl: "http://localhost:8686/api/jupyter-server",
35+
jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
36+
})
37+
return (
38+
<JupyterReactTheme>
39+
<Notebook
40+
startDefaultKernel
41+
path="ipywidgets.ipynb"
42+
id="notebook-jupyter-react-themeid"
43+
height="calc(100vh - 250px)" // (Height - Toolbar Height).
44+
cellSidebarMargin={60}
45+
CellSidebar={CellSidebarButton}
46+
Toolbar={NotebookToolbar}
47+
/>
48+
</JupyterReactTheme>
49+
);
50+
}
51+
52+
const div = document.createElement('div');
53+
document.body.appendChild(div);
54+
const root = createRoot(div);
55+
56+
root.render(
57+
<>
58+
{/*
59+
<Text as="h1">Local Jupyter Server (with a Jupyter Context)</Text>
60+
<NotebookJupyter/>
61+
*/}
62+
<Text as="h1">Local Jupyter Server (with a Jupyter React Theme)</Text>
63+
<NotebookJupyterReactTheme/>
64+
</>
65+
);

‎packages/react/webpack.config.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const ENTRY =
2020
// './src/app/App';
2121
// './src/examples/Bokeh';
2222
// './src/examples/Bqplot';
23-
'./src/examples/Cell';
23+
// './src/examples/Cell';
2424
// './src/examples/CellLite';
2525
// './src/examples/Cells';
2626
// './src/examples/CellsExecute';
@@ -41,10 +41,9 @@ const ENTRY =
4141
// './src/examples/KernelExecute';
4242
// './src/examples/KernelExecutor';
4343
// './src/examples/Kernels';
44-
// './src/examples/Localhost';
4544
// './src/examples/Lumino';
4645
// './src/examples/Matplotlib';
47-
// './src/examples/Notebook';
46+
'./src/examples/Notebook';
4847
// './src/examples/NotebookCellSidebar';
4948
// './src/examples/NotebookCellToolbar';
5049
// './src/examples/NotebookColorMode';
@@ -53,6 +52,7 @@ const ENTRY =
5352
// './src/examples/NotebookLess';
5453
// './src/examples/NotebookLite';
5554
// './src/examples/NotebookLiteContext';
55+
// './src/examples/NotebookLocalServer';
5656
// './src/examples/NotebookMutationsKernel';
5757
// './src/examples/NotebookMutationsServiceManager';
5858
// './src/examples/NotebookNbformat';

0 commit comments

Comments
 (0)