Kickstart your JupyterLab based application 🚀
This template:
- is heavily inspired by the JupyterLab standalone examples
- provides the basic structure to use a custom
JupyterFrontEnd.IShell
Create a new repo using this template:
Alternatively, clone the repo with the following command to retrieve the source:
git clone https://github.com/jtpio/jupyterlab-app-template
cd jupyterlab-app-template/
Then:
# create a new environment
mamba create -n jupyterlab-app-template -c conda-forge/label/jupyterlab_server_rc -c conda-forge nodejs yarn python jupyterlab_server=2 -y
conda activate jupyterlab-app-template
# install the dependencies
yarn
# build the app
yarn run build
# run the app
python main.py
There is also a watch command to automatically rebuild the application when there are new changes:
yarn run watch
One of the main benefits of building a JupyterLab-based application is that it makes it easier to reuse existing plugins and extensions that have been developed for JupyterLab.
Since this template uses the same plugin system as the one used in JupyterLab, and exposes a JupyterFrontEnd.IShell
as the application shell, reusing other components becomes seamless.
The first step is to add the dependency to the package.json
. Here using the jupyterlab-plugin-graph JupyterLab extension available on npm:
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
"@jupyterlab/theme-light-extension": "^3.0.0-rc.10",
"@jupyterlab/ui-components": "^3.0.0-rc.10",
"@lumino/widgets": "^1.14.0",
+ "jupyterlab-plugin-graph": "^0.2.0",
"es6-promise": "~4.2.8"
},
"devDependencies": {
Run yarn
to install the dependency.
To load the plugin on startup, add it to the list of mods in index.ts
:
--- a/src/index.ts
+++ b/src/index.ts
@@ -19,7 +19,8 @@ async function main(): Promise<void> {
const mods = [
require('./plugins/paths'),
require('./plugins/top'),
- require('./plugins/example')
+ require('./plugins/example'),
+ require('jupyterlab-plugin-graph')
];
app.registerPluginModules(mods);
Since this plugin exposes the jupyterlab-plugin-graph:open
command, we can for example add it to the menu:
--- a/src/plugins/example/index.ts
+++ b/src/plugins/example/index.ts
@@ -60,7 +60,10 @@ const plugin: JupyterFrontEndPlugin<void> = {
});
if (menu) {
- menu.helpMenu.addGroup([{ command: CommandIDs.open }]);
+ menu.helpMenu.addGroup([
+ { command: CommandIDs.open },
+ { command: 'jupyterlab-plugin-graph:open' }
+ ]);
}
}
};
Finally, rebuild the app with:
yarn run build
And reload the page to see the changes:
Additionally, you can also add more custom plugins by following the pattern used for the example plugin.
If you think there should be other defaults as part of this template, please open a new issue or pull request!