"Failed to load resource" when using components.html

[somedood]

I’m trying to use components.html to load a local HTML file, but including CSS and JavaScript files in it throws an error “Failed to load resource: the server responded with a status of 404 (Not Found)” as it’s trying to access “http://localhost:8501/bootstrap.min.css” instead of the bootstrap.min.css in the local folder. Any idea how to solve this?

On a side note, is there any way to use bi-directional components without React or TypeScript? Or is rewriting an HTML site to those formats the only way?

[andfanilo]

Hello @somedood , welcome to the community

@somedood

“Failed to load resource: the server responded with a status of 404 (Not Found)” as it’s trying to access “http://localhost:8501/bootstrap.min.css” instead of the bootstrap.min.css in the local folder. Any idea how to solve this?

Can you put the code snippet you are using?I would rather refer to bootstrap not on your local machine but on a remote CDN like in the following.

import streamlit as st
import streamlit.components.v1 as components

# bootstrap 4 collapse example
components.html(
    """
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <div id="accordion">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Collapsible Group Item #1
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #1 content
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Collapsible Group Item #2
            </button>
          </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #2 content
          </div>
        </div>
      </div>
    </div>
    """,
    height=600,
)

@somedood

On a side note, is there any way to use bi-directional components without React or TypeScript? Or is rewriting an HTML site to those formats the only way?

Have a look at:

• Code snippet: create Components without any frontend tooling (no React, Babel, Webpack, etc)

For the following you will need npm though to install JS packages:

• Reactless Component Template
• Streamlit quick & dirty Leaflet component that sends back coordinates on map click (github.com)

Have a nice day,
Fanilo

[somedood]

I’m just refering to the scripts locally, like so:

<link href="assets/js/bootstrap.min.css" rel="stylesheet">

CDNs seem to solve the problem for CSS and js scripts, but it seems like the problem also persists for local files like images and videos as well, which is still an issue.

@andfanilo

Have a look at:

• Code snippet: create Components without any frontend tooling (no React, Babel, Webpack, etc)

For the following you will need npm though to install JS packages:

• Reactless Component Template
• Streamlit quick & dirty Leaflet component that sends back coordinates on map click (github.com)

The last 2 links require some form of TypeScript, hence prompting me to ask the question. The first link looks to be what I’m looking for though, I’ll give it a look!

[andfanilo]

@somedood

I’m just refering to the scripts locally, like so:

<link href="assets/js/bootstrap.min.css" rel="stylesheet">

For local resources, check out the following link for the static assets Streamlit can load from: Restrict Download of Images & Videos on Streamlit App - #2 by andfanilo

@somedood

The first link looks to be what I’m looking for though, I’ll give it a look!

Cool! It works well, I’ve used it a bit and I know another creator that loves this way of doing eheh we can namedrop if you have issues with the non typescript way.

Also you can absolutely do the reactless component in vanilla JS, no Typescript (rename to .js and remove any sign of types from the file), only the npm part will be required.

Have a nice day,
Fanilo

[somedood]

@andfanilo

For local resources, check out the following link for the static assets Streamlit can load from: Restrict Download of Images & Videos on Streamlit App - #2 by andfanilo

That does solve the issue, thanks. However, I’m trying out the implementation without any frontend tooling, and that method does not call components.html, so I’m unsure how to access the static videos for that.

Also, using CDNs are fine for external CSS and JS files, but what about local CSS files I made myself? Do I need to try to host them online and convert them to a CDN in order to implement them?

@andfanilo

Cool! It works well, I’ve used it a bit and I know another creator that loves this way of doing eheh we can namedrop if you have issues with the non typescript way.

That would be great! The solution has been working decently well for me, other than a few issues such as video controls being weird. I would love to have more references on this way of implementing it.