"Failed to load resource" when using components.html

🎈 Using Streamlit
1

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?

2

Hello @somedood , welcome to the community :slight_smile:

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,
)

Have a look at:

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

Have a nice day,
Fanilo :balloon:

3

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.

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!

4

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

Cool! It works well, I’ve used it a bit and I know another creator that loves this way of doing eheh :slight_smile: 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 :balloon:

6

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?

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.

7

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.