Streamlit component does not display while accessing from the network url

[Vinay_Kamisetty]

Background: I have developed a custom navigation bar using streamlit component. it was running successfully and exported the component using npm build function. It has created a build folder

I have copied the build folder and pasted it in the components folder of my main app.
I am calling this new build from the main app init.py - using the following command -
" _st_navbar = components.declare_component(“st_navbar”, path=navbar_dir)"

I have also set up the navbar path as follows:
navbar_dir = os.path.join(parent_dir, “components/NavBar/build”)
(I have pasted the above react generated custom component build folder here)

Issue: when i run the app the component is visible in the localhost. The same component is giving me warning: " Your app is having trouble loading the init.st_navbar component" when i connect using my network url.

screenhots - I have attache the screenshots for your reference
first screenshot - component is visible when i connect streamlit using localhost
second screenshnot - component is throwing warning when i connect to the network url.

Attempts:

1. I have tried this using enable CORS = True and False. The error would be the same.

Can some one guide me on resolving this issue.

[asehmi]

Hi Vinay - I see your app is coming a long nicely. Have you tried navbar_dir = os.path.join(parent_dir, "components", "NavBar", "build") and printed out the path being used? (Make sure the quotes are plain.)

[Vinay_Kamisetty]

Hi @asehmi thanks for your prompt response. I have tried this, but it did not resolve the problem. Is it got something to do with proxy? Do I need to run this behind caddy or nginx?

[asehmi]

Try deploying the component as a separate web app and use it’s address for url in declare_component.

[Vinay_Kamisetty]

This approach worked @asehmi Thank you