Skip to main content

Develop

Packaging​

As Jupyter React ships with the in-browser Python kernel Pyodide, packaging your code is not trivial. We recommend using Webpack as bundler for your project. Then you will need to add the following rules to support in-browser kernels:

  "module": {
    "rules": [
      /*
       ... the rules for the JavaScript and CSS assets
      */
      // Rule for the JupyterLite service worker.
      // !important this must result in a file named `service-worker.js`
      // to be served at the root of your website.
      {
        resourceQuery: /text/,
        type: 'asset/resource',
        generator: {
          filename: '[name][ext]',
        },
      },
      // Rule for pyodide kernel
      {
        test: /pypi\/.*/,
        type: 'asset/resource',
        generator: {
          filename: 'pypi/[name][ext][query]',
        },
      },
      {
        test: /pyodide-kernel-extension\/schema\/.*/,
        type: 'asset/resource',
        generator: {
          filename: 'schema/[name][ext][query]',
        },
      }
    ]
  }

Simple Example​

Now you can start an example and hack the source code. The changes will build automatically and will be available in your browser.

# open http://localhost:3208
yarn start # start and example defined in the packages/react/webpack.config.js file.

This will consume kernels from the Datalayer development server in the cloud. You can run your own server with the following command.

# open http://localhost:3208
yarn start-local

The used Jupyter Server configuration is available in this jupyter_server_config.py. The important part of that configuration is the Security part where the settings for CORS access are defined.

Additionally, you can to define in the head section your host index HTML page information for your React application about the location of your Juptyer Server (see for example the content of this index-local.html).

<script id="datalayer-config-data" type="application/json">
  {
    "jupyterServerUrl": "https://oss.datalayer.run/api/jupyter-server",
    "jupyterServerToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
  }
  </script>

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>

Other Examples​

We have more examples, pick one of the following commands and enjoy.

# Create React App example
# open http://localhost:3000
yarn jupyter:ui:cra
#
# Lexical example
# open http://localhost:3208
yarn jupyter:ui:lexical
#
# Docusaurus example
# open http://localhost:3000/docs/intro
yarn jupyter:ui:docusaurus
#
# Next.js example
# open http://localhost:3000
yarn jupyter:ui:nextjs

While running those example, hot reload is supported:

  • Changing the source code of the example and your browser should reflect those changes.
  • If you need to change the core react package @datalayer/jupyter-react, you will need to run yarn watch in the packages/react folder.

PS: We also have some uncomplete or deprecated examples...

# Slate example (deprecated)
# open http://localhost:3266
yarn jupyter:ui:slate
#
# Prosemirror example (deprecated)
# open http://localhost:4567
yarn jupyter:ui:prosemirror