Streamlit Component creation: at the beginning

[ryanrecharged_github]

Following the tutorial here precisely: https://www.youtube.com/watch?v=BuD3gILJW-Q

At the 3:00 mark, “streamlit run my_component/__init__.py” produces the template component to http://localhost:8501/. When I do it, I just get a blank page with “init_” in the browser tab and no errors. See image.

It’s funny, because I had this example app working before following the tutorial, cleaned slate to follow the tutorial, and busted. Previously, I invoked the ‘example.py’ file directly and the template component worked.

[ryanrecharged_github]

According to this page: Intro to custom components - Streamlit Docs, there is a command
pip install -e . # install template as editable package
that alters the dynamic somehow. It also requires a readme.md file in the root directory.

After following this step, I can now invoke example.py directly (which is not the same as the tutorial)

I have no idea why any of this works one way and not the other; and I am further wondering how this will all play out when I eventually want to use the component in development. While this appears to get me past this hurdle, I have no idea why. Appreciate more insight

[blackary]

Hi @ryanrecharged_github,

It looks like since that video was made (3 years ago), the template repo has also changed.

The basic difference is:

• In the previous version, it appears that the __init__.py must have had some example code in it, so that if you ran it directly, the sample code that actually uses the component also shows it in-action
• In the new version of the template, the __init__.py essentially just declares the component component-template/template/my_component/__init__.py at master · streamlit/component-template · GitHub, but does NOT actually use it

In the new version of the template, the example of actually using it has been moved to example.py, which is different from what is shown in the video.

In regards to what is the best way to test the component now, following the exact steps from the docs is the best way:

• pip install -e . says “install the current package, and install it in ‘editable’ mode, so that if I change the code, the package changes”. It’s very similar to doing pip install streamlit or pip install requests, except rather than looking at pypi.org for the package, it just looks for a package in the current folder. Installing a package doesn’t require a README normally, but in this case the setup.py has this line component-template/template/setup.py at master · streamlit/component-template · GitHub which looks for a README.md to add a description to the package.
• I would recommend following the instructions that you mentioned from the docs Intro to custom components - Streamlit Docs, as those are a lot more up-to-date than that video. Although the video has a great explanation of how things actually work behind-the-scenes, it’s not necessarily up to date with the example templates.