Deploying an interactive html app to streamlit

Community Cloud
1

Hello,

I’m trying to deploy an html app to streamlit cloud. Even if it currently works in local host, it doesn’t work in the cloud. Just showing an empty streamlit page. The app, whose details are here GitHub - mskilab/gGnome: R API for browsing, analyzing, and manipulating reference-aligned genome graphs in a GenomicRanges framework, is as follows:

Before any streamlit intervention, the app was working with a simple bash script that contains

open http://localhost:8080/index.html
npm start

and it has the files index.html, package.json, server.js, index.js etc.

My first naive attempt was to just call subprocess.run(['bash','/gGnome.js/start.sh']) in a python script. Even if it works locally, it doesn’t work in the cloud. So, I follow the suggestions mentioned here: Showing a pyLDAvis html - #3 by ghass002

I did

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

html_string = 'index.html' # load your HTML from disk here
st.components.v1.html(html_string)

in app.py, but it doesn’t show anything even locally. I appreciate it if someone can tell me how to do it.

P.S.: I pushed necessary files to github and streamlit has an access to it and the app.py file as executable.

2

You need to pass actual HTML, not a file name.

3

ok, I did as you said, copy pasted the content of index.html as

st.components.v1.html(
"""
<head>
  <meta charset="UTF-8">
  <title>gGnome.js</title>
...
  <script src="./js/fragment.js"></script>
  <script src="./js/regl-canvas.js"></script>
</body>
"""
)

but it cannot access all the elements of it. I can only see the button titles in a disorganized way, drop down menu is empty etc. When i click the hyperlink. gGnome.js, it returns the error

You have requested page /index.html, but no corresponding file was found in the app's pages/ directory. 
Running the app's main page.

Screenshot 2023-02-14 at 1.43.12 PM
Screenshot 2023-02-14 at 1.43.12 PM792×314 7.61 KB

4

Looks like some files are not reachable from the current directory. You may have to adjust the paths.

5

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