Skip to main content

Web App

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

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

This will consume kernels from the Datalayer development free servers in the cloud. If you need your own server (on your local machine or on your cloud), refer to this Jupyter Server documentation

We have a variety of examples, pick one in the following commands and enjoy.

# Create React App example
# open http://localhost:3000
npm run jupyter:ui:cra
# Lexical example
# open http://localhost:3208
npm run jupyter:ui:lexical
# Docusaurus example
# open http://localhost:3000/docs/intro
npm run jupyter:ui:docusaurus
# Next.js example
# open http://localhost:3000
npm run 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 npm watch in the packages/react folder.
note

We also have some uncomplete or deprecated examples...

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