Suggested Approach for Troubleshooting Streamlit Component

Custom Components
1

Streamlit Community,

I’m looking for troubleshooting guidance for getting custom Streamlit components working, especially for myself having weak familiarity with npm, js/react, etc.

I’ve cloned the components-template/examples repo and want to get the MaterialLogin example working as a starting point. I’ve followed the steps listed in the README:

  1. Setup my virtual environment (however using conda instead of venv)
  2. Activate environment, npm install, npm run start (with result: ‘compiles successfully’)
  3. Activate environment, streamlit run material_login.py using what seems like the correct url (http://localhost:3001)
  4. Ssh port forward streamlit to another machine, and semi-successfully open the app in a browser

THE PROBLEM: The page renders with no login component at all. All it shows is “None”, which seems to be the default return value from the component which is being printed to the screen through the st.write command. In other words, material_login.py seems to be running fine but I have no evidence that I’m successfully connecting to using the component.

How can I get the web component to render?? I don’t know the steps I should be going through to troubleshoot this. Please provide guidance.

2

Hey @daniel.remine - welcome to Streamlit, and thanks for checking out Components!

Since you’re serving the component’s frontend from a dev server (via npm run start), you’ll need to port-forward :3001 as well.

Alternately, you could compile the component as a release build. This involves compiling the frontend code and serving that code from Streamlit itself (rather than from a dev server, which is only intended for in-development components).

The “Publish Streamlit Components” section of the docs has more detail on making a release build: https://docs.streamlit.io/en/stable/publish_streamlit_components.html

1 Like
3

Great, thanks Tim. This has resolved the issue I was running into. :star:

1 Like