Initialize and run the component template frontend [ Run npm start
in FOLDER \chem_streamlit-main\chemstreamlit_js\frontend, if you use win, you have to run npm start in SHELL(AS an administrator)].
From a separate terminal, run the template’s Streamlit app [ Run "streamlit run app.py in FOLDER \chem_streamlit-main\chemstreamlit_js, in CMD or other terminal, win10 ]
IF in the localhost:8501 show bug (3001 things), i think verify the url=“http://localhost:3001” to url=[http://localhost:3000/]” can fix it. or just open two windows in step 1.
I also am not able to get it to work when “_RELEASE=True”. The frontend compiled correctly so I am not able to figure out what went wrong. I get the same error as @LeChuck.
I have also got trapped in this deployment. Essentially, it is a two-step process: Start react-JSME then run Streamlit which in turn embeds the first process.
I have created a Dockerised version of the code by @iwatobipen and I am getting no errors by either Node or Streamlit. Unfortunately, JSME seems not to be running correctly though - as when I open localhost:3000 I can see that my browser has loaded all components but the page is blank - and I have no idea where to start debugging it. Note that I am not a JS developer so I might easily be missing something important.
My next attempt will be running the original react-JSME code to see whether or not the code by Douglas runs fine. The Streamlit part runs fine instead but of course, the component is just embedding a blank page…
I am happy to share with you my Dockerfile:
FROM node:12.22.8-buster-slim
COPY --from=python:3.8.12-slim-buster / /
# Install required packages
COPY env/ /env
RUN python -m pip install -r /env/requirements.txt \
&& pip cache purge
# Install NPM daemon manager
RUN npm install pm2 -g
# Install JSME
COPY jsme/ /jsme
RUN cd /jsme && npm install
COPY src/ /app
EXPOSE 8501
EXPOSE 3000
WORKDIR /app
CMD [ "run" ]
A little update on this. I have repeated the Dockerisation on @iwatobipen code without changing anything in the structure of the folders, just in case, but the result is the same: I can run Node and Streamlit but localhost:3000 is just a blank page for which the explorer says that all elements have been loaded correctly. Clearly, if the code works for some of us there is just a reproducibility problem. My guess is that depends on the Node version. @iwatobipen what Node version did you use to deploy your app?
I did not have much time to spend on this but finally, I have come up with a diagnosis of the problem. I have reviewed the small JS class that renders the JSME react component and I can actually show that on the browser if I comment out withStreamlitConnection() and I just export the editor:
However, if I do that, then I lose the connection between the editor and Streamlit when I launch my app. Feels like a bug in withStreamlitConnection()?
Hi @llzhu,
Thanks for providing this.
Unfortunately I am failing to build your code.
I get the following error message when I run “npm run build”:
Creating an optimized production build...
Failed to compile.
[...]st-jsme/st_jsme/frontend/src/StJsme.tsx
TypeScript error in [...]st-jsme/st_jsme/frontend/src/StJsme.tsx(2,22):
Could not find a declaration file for module 'jsme-react'. '[...]st-jsme/st_jsme/frontend/node_modules/jsme-react/dist/index.js' implicitly has an 'any' type.
Try `npm install @types/jsme-react` if it exists or add a new declaration (.d.ts) file containing `declare module 'jsme-react';` TS7016
1 | import React, { useEffect } from "react";
> 2 | import { Jsme } from 'jsme-react'
| ^
3 |
4 | import {
5 | Streamlit,
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! st_jsme@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the st_jsme@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! [...]2022-02-11T08_10_44_214Z-debug.log
Any idea what I’m doing wrong?
I’m on Linux. From your github instructions it looks like you’re on Windows.
Hi @LeChuck, not sure if we had the same error but I just submitted a pull request to @llzhu with some fixes that made my npm run build work, you can find it here:
I am having the issue while running the streamlit component.please help me to get out of this.
Your app is having trouble loading the streamlit_terran_timeline.streamlit_terran_timeline component.
(The app is attempting to load the component from http://localhost:3001, and hasn’t received its “streamlit:componentReady” message.)
If this is a development build, have you started the dev server?
If this is a release build, have you compiled the frontend?
