Running an PyCharm debugger on a Streamlit app with a React custom component
Hello,
I have a project for work that creates a Streamlit (Python) app that includes a React custom component rendered as an iframe. This is my first time working with TypeScript, React, and web development in general so please be gentle.
I am trying to figure out how to launch a debug session that allows me to step into Streamlit and then into the React custom component. I’ve been getting a lot of errors when passing data back and forth between Streamlit and React so it would save me a lot of headache if I was able to step in and out of them both in one debugger session.
This video has been super helpful to start with and briefly touches on setting up a debugger configuration (10:26) for Streamlit. I also found the documentation for PyCharm that talks about setting up a debugger configuration for React but I'm not sure how to connect these two functionalities together. Plus, the component doesn't render at the localhost for the React configuration (the page comes up blank; you don't see the component until you go into the Streamlit app).
Any help would be appreciated. Thanks very much!
请先登录再写评论。
Your approach is on the right track. The key difference with Streamlit custom components is that the React component only works within Streamlit's iframe - it won't run standalone at
localhost:3000, which is expected behavior.So you may try to create two debugger sessions, one for each:
streamlitand parametersrun your_app.pyCreate a javascript debug run config: Once Streamlit is running at
http://localhost:8501,the URL in PyCharm's Run window to attach the JavaScript debuggerThanks for the reply! I was able to get things somewhat working. I set a single breakpoint in my Python file and my TypeScript file, launched the Python debugger (which runs the react component from its static build files), launched the JavaScript debugger, and both of them ran and stopped at the right spots. However, I keep getting a "Low Memory: The IDE ran out of available memory. Please consider increasing the value of "Maximum Heap Size" setting. " If you've got some more time, would you mind taking a look at the configurations for my two debug sessions and the beginning of the heap report to see if I have done something incorrectly?
Thanks again!
Looks like the JVM run out of memory- try Increasing the Memory Heap
@wacky flip You may need to double check that Prettier is selected as the Default Formatter in WebStorm, as enabling “Run on Save” without the correct formatter configuration will not work.