Skip to main content

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.

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

# This will start a Jupyter Server and a Webpack Server.
# open http://localhost:8686/api/jupyter-server?token=60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6
# open http://localhost:3208
cd packages/react
yarn start-local

The Jupyter Server and the Jupyter Token can be provided in the Jupyter Context

const NotebookLocalJupyter = () => (
  <Jupyter
    jupyterServerUrl="http://localhost:8686/api/jupyter-server"
    jupyterServerToken="60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
    startDefaultKernel
  >
    <Notebook
      path="ipywidgets.ipynb"
      id="notebook-jupyter-id"
      height="calc(100vh - 250px)" // (Height - Toolbar Height).
    />
  </Jupyter>
)

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).

<!DOCTYPE html>
<html>
<head>
  <script id="datalayer-config-data" type="application/json">
    {
      "jupyterServerUrl": "http://localhost:8686/api/jupyter-server",
      "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
    }
  </script>
</head>
</html>

Optionally, you can use the JupyterReactTheme component

const NotebookLocalJupyter = () => {
  useJupyter({
    jupyterServerUrl: "http://localhost:8686/api/jupyter-server",
    jupyterServerToken: "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
  })
  return (
    <JupyterReactTheme>
      <Notebook
        startDefaultKernel
        path="ipywidgets.ipynb"
        id="notebook-jupyter-react-themeid"
      />
    </JupyterReactTheme>
  );
}
note

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

<head>
  <script id="jupyter-config-data" type="application/json">
    {
      "baseUrl": "http://localhost:8686/api/jupyter-server",
      "wsUrl": "ws://localhost:8686/api/jupyter-server",
      "token": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
    }
  </script>
</head>
info

The values defined in the Jupyter context are taking precedence on the values set in the host HTML.

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.

warning

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

⚠️ Use the following at your own risk!.
#################
# Authentication
#################

c.IdentityProvider.token = '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6'

#################
# Security
#################

c.ServerApp.disable_check_xsrf = False
# ORIGIN = 'http://localhost:3208'
# c.ServerApp.allow_origin = ORIGIN # Best to restrict the ORIGIN
c.ServerApp.allow_origin_pat = '.*'
c.ServerApp.allow_credentials = True
c.ServerApp.tornado_settings = {
  'headers': {
#    'Access-Control-Allow-Origin': ORIGIN,  # Best to restrict the ORIGIN
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': 'Accept, Accept-Encoding, Accept-Language, Authorization, Cache-Control, Connection, Content-Type, Host, Origin, Pragma, Referer, sec-ch-ua, sec-ch-ua-mobile, sec-ch-ua-platform, Sec-Fetch-Dest, Sec-Fetch-Mode, Sec-Fetch-Site, Upgrade, User-Agent, X-XSRFToken, X-Datalayer, Expires',
    'Access-Control-Allow-Credentials': 'true',
    'Content-Security-Policy': f"frame-ancestors 'self' {ORIGIN} ",
  },
  'cookie_options': {
    'SameSite': 'None',
    'Secure': True
  }
}
c.IdentityProvider.cookie_options = {
  "SameSite": "None",
  "Secure": True,
}
info

If you are using the JupyterLabApp component, additional information will be needed (see index-local.html)

  <script id="jupyter-config-data" type="application/json">
    {
      "baseUrl": "https://oss.datalayer.run/api/jupyter-server",
      "wsUrl": "wss://oss.datalayer.run/api/jupyter-server",
      "token": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6",
      "appUrl": "/lab",
      "themesUrl": "/lab/api/themes",
      "disableRTC": false,
      "terminalsAvailable": "false",
      "mathjaxUrl": "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
      "mathjaxConfig": "TeX-AMS_CHTML-full,Safe"
    }
  </script>