Hey team, I am trying to construct a jupyter web app using node, webpack, typescript locally on my machine. client side url: localhost:3000; jupyter server url: localhost:8888.
I tried to configure my server manager with customized wsurl, baseurl setting:
-----------------------------------code begin---------------------------------------------------------
const customFetch = (input: RequestInfo, init?: RequestInit): Promise<Response> => {
const modifiedInit: RequestInit = {
...init,
headers: {
...init?.headers,
'Access-Control-Allow-Origin': '*',
},
};
return fetch(input, modifiedInit);
};
//create server manager to handle api requests
const serverSettings = ServerConnection.makeSettings({
baseUrl: 'http://localhost:8888/',
fetch: customFetch,
wsUrl: 'ws://localhost:8888',
});
console.log("set up service manager");
//create serviceManager to handle api requests
const manager = new ServiceManager({ serverSettings });
await manager.ready;
console.log('service manager is ready');
const newLab = new JupyterLab({
serviceManager: manager,
});
-------------------------------code end-------------------------------------------------------------
but after I start my app, I got following errors. Basically one error is websocket connection failed, another one is widget already attached.
here is my whole app.tsx file, which should include the main logic of my web app. does any expert have idea on those 2 errors? thanks so much for help!!
------------------------------code begin--------------------------------------------------------------
import React, { useEffect, useRef, useState } from 'react';
import { JupyterLab } from '@jupyterlab/application';
import { ServiceManager, ServerConnection } from '@jupyterlab/services';
import { PageConfig } from '@jupyterlab/coreutils';
import '@jupyterlab/application/style/index.css';
import '@jupyterlab/ui-components/style/index.css';
import { Widget } from "@lumino/widgets";
export const App: React.FC = () => {
const labRef = useRef<HTMLDivElement>(null);
//const [lab, setLab] = useState<JupyterLab | null>(null);
const labInitializedRef = useRef(false);
const labInstanceRef = useRef<JupyterLab | null>(null);
useEffect(() => {
console.log('before initilaizedLab function call');
const initializeLab = async () => {
console.log('initializedLab function called');
if (labInitializedRef.current) {
console.warn('jupyterlab is already initialized')
return;
}
console.log("before try block");
try {
console.log("set up customFetch");
const customFetch = (input: RequestInfo, init?: RequestInit): Promise<Response> => {
const modifiedInit: RequestInit = {
...init,
headers: {
...init?.headers,
'Access-Control-Allow-Origin': '*',
},
};
return fetch(input, modifiedInit);
};
console.log("set baseurl");
PageConfig.setOption('baseUrl', 'http://localhost:8888/');
console.log("set server settings");
//create server manager to handle api requests
const serverSettings = ServerConnection.makeSettings({
baseUrl: 'http://localhost:8888/',
fetch: customFetch,
wsUrl: 'ws://localhost:8888',
});
console.log("set up service manager");
//create serviceManager to handle api requests
const manager = new ServiceManager({ serverSettings });
await manager.ready;
console.log('service manager is ready');
const newLab = new JupyterLab({
serviceManager: manager,
});
labInstanceRef.current = newLab;
console.log('jupyterlab instance created')
if(labRef.current) {
console.log('labref is available.');
const existingMainElement = document.getElementById('main');
if(existingMainElement) {
console.log('existing main element found, removing it');
existingMainElement.remove();
} else {
console.log('no existing main element found');
}
const mainElement = document.createElement('div');
mainElement.id = 'main';
labRef.current.appendChild(mainElement);
console.log('new main element created and appended');
if(!newLab.shell.node.isConnected) {
console.log('shell is not connected, attaching now');
Widget.attach(newLab.shell, mainElement);
console.log('shell attached');
} else {
console.warn('Widget is already attached or node is connected');
}
try {
await newLab.start();
console.log('jupyterlab started');
labInitializedRef.current = true;
} catch (error) {
console.error('Error starting jupyterlab: ', error);
}
} else {
console.error('labref not available.');
}
} catch (error) {
console.error('failed to initialize jupyterlab: ', error);
}
};
initializeLab().catch((error: any) => {
console.error('failed to initialize jupyterlab: ', error);
});
return () => {
if(labInitializedRef.current) {
console.log('disposing jupyterlab instance');
if(labRef.current) {
labRef.current.innerHTML = '';
}
const lab = labInstanceRef.current;
if(lab && lab.shell && !lab.shell.isDisposed) {
try {
if(lab.shell.isAttached || lab.shell.node.isConnected) {
Widget.detach(lab.shell);
console.log('shell detached');
}
lab.shell.dispose();
console.log('shell disposed');
} catch (e) {
console.error('error disposing shell: ', e);
}
}
//setLab(null);
labInitializedRef.current = false;
}
};
}, []);
return (
<div>
<h1>Welcome to jupyter app root</h1>
<div ref={labRef} id="jupyterlab-root"></div>
</div>
);
};
-------------------------------code end-------------------------------------------------------------
