Example to showcase Jupyter React usage in a Create React application.
This repository is archived and only covers Jupyter React up-to version 0.0.10. Please go to the main Jupyter React repository for updated examples.
Follow the below steps to create your development environment. You will need Miniconda up-and-running on your machine (MacOS or Linux, Windows is not supported as development platform for the time-being).
# Clone the jupyter-react-example repository.
git clone https://github.com/datalayer/jupyter-react-example.git && \
cd jupyter-react-example
# Setup your development environment.
conda deactivate && \
make env-rm # If you want to reset your environment.
make env && \
conda activate jupyter-react
# Install.
make install
# You can start the example and hack the source code.
# The changes will build automatically and will be available in your browser.
echo open http://localhost:3000
yarn start
You can create your own app and add the Datalayer Jupyter React dependency.
npx create-react-app jupyter-react-example --template typescript && \
cd jupyter-react-example && \
yarn add @datalayer/jupyter-react
Once this is done, double-check the following requirements (just checkout this repository for a complete setup).
You will need a Jupyter server up-and-running. We ship the configuration and scripts in this repository. You can add in your package.json
the needed definitions.
"scripts": {
"start": "run-p -c start:*",
"start:jupyter": "make start-jupyter-server",
"start:react": "react-scripts start",
},
"devDependencies": {
"npm-run-all": "4.1.5",
},
It looks like the create-react-app
version 5 does not like sourcemaps pointing to non existing source code. To avoid error messages, please create a .env
file at the top of your folder/repositoriy and add there GENERATE_SOURCEMAP=false
.
// .env
GENERATE_SOURCEMAP=false
You need to add in the public/index.html
the needed information to indicate where you Jupyter server is running.
<script id="datalayer-config-data" type="application/json">
{
"jupyterServerHttpUrl": "http://localhost:8686/api/jupyter",
"jupyterServerWsUrl": "ws://localhost:8686/api/jupyter",
"jupyterToken": "60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6"
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
A create-react-app
requests coherent react.js versions. With JupyterLab, we are pulling various version in the node_modules subfolders. To avoid version conflicts, the resolutions
in package.json
specifies the needed version.
Run make install
. This will apply the following temporary patch on the JupyterLab dependency type definitions.
echo "The following is a temporary fix tested on MacOS - For other OS, you may need to fix manually"
sed -i.bu "s|k: keyof TableOfContents.IConfig|k: string|g" node_modules/\@jupyterlab/notebook/lib/toc.d.ts
sed -i.bu "s|uri: DocumentUri|uri: string|g" node_modules/vscode-languageserver-protocol/lib/common/protocol.diagnostic.d.ts
sed -i.bu "s|uri: DocumentUri|uri: string|g" node_modules/vscode-languageserver-types/lib/umd/main.d.ts
sed -i.bu "s|id: ChangeAnnotationIdentifier|uri: string|g" node_modules/vscode-languageserver-types/lib/umd/main.d.ts
Copyright (c) 2022 Datalayer, Inc.
Released under the terms of the MIT license (see LICENSE).