I am working on a Streamlit app deployed on Heroku and facing challenges in modifying the index.html file (located in site-packages/streamlit/static folder). Why would you want to update index.html? Here are a few reasons
Updating Title/Description: To improve how the app appears in Google Search results. By default, all apps are literally titled Streamlit with a description of You need to enable JavaScript to run this app which looks terrible in search results
SEO and Open Graph Tags: To ensure proper display of thumbnails when the site is shared and so that your app pops up in search results when users search for it.
Integrating Google Analytics: For tracking app usage and metrics.
Issue: Despite attempts to manually patch index.html post Heroku’s dynamic installation of Streamlit (dynamic meaning it installs it from a requirements.txt), my changes do not persist or reflect in the deployed app.
Specific Questions:
Persistence of Changes: How can I ensure that modifications to index.html persist, considering Streamlit’s dynamic installation on Heroku?
Deployment Best Practices: Are there any recommended practices or alternative approaches for modifying index.html in this context?
Success Stories: Has anyone successfully made persistent changes to index.html in a Streamlit app deployed on Heroku or similar platforms? If so, could you share your approach?
Any guidance would be really appreciated. This seems like a pretty basic task that I’m stuck on.
PS. I considered forking the Streamlit repo, making edits to that, and then use the Forked repo’s Github path in requirements.txt.However I tried it and it doesn’t work (Fork and install streamlit with pip)
@DouglasTavare I spent many days trying out various things. There was only one working solution - deploying with Docker.
It is quite an involved workaround, but it’s the only way that lets you modify index.html. I’m deploying with Heroku, so I had to change my build process to go through heroku.yml instead of the normal Procfile, and heroku.yml builds based on my specified Dockerfile. I’m happy to spare you time and effort. My repo is private, but here is the file that is working for me.
This sets all the meta tags for proper display on Open Graph. I don’t have Google Analytics set up yet, but the process would be the same (add the analytics code you want to inject into the Dockerfile)
I’m thinking of writing up a longer form debriefing of all the limitations of Streamlit and my workarounds. Streamlit gets you 90% of the way there, but boy oh boy that last 10% to go from proof of concept to production MVP is very hard and takes a lot of effort.
*Edit: I just saw that you need to deploy with community cloud. I don’t have any experience with that , but this solution is for self hosted
Dockerfile
FROM python:3.11-slim
# Set the working directory
WORKDIR /app
# Install system dependencies including Node.js
RUN apt-get update -y && \
apt-get install -y libgl1-mesa-glx wget libglib2.0-0 curl && \
curl -fsSL https://deb.nodesource.com/setup_16.x | bash - && \
apt-get install -y nodejs
# Manually install npm
RUN apt-get install -y npm
# Verify Node.js and npm installation
RUN node --version && npm --version
# Copy the requirements file and install Python dependencies
COPY requirements.txt .
RUN pip install -r requirements.txt
# Copy the entire application code
COPY . .
# Replace the existing title and noscript tags and inject the new meta tags
RUN sed -i 's|<title>.*</title>|<title>Market Mage</title>|' /usr/local/lib/python3.11/site-packages/streamlit/static/index.html && \
sed -i 's|<noscript>.*</noscript>|<noscript>Find the best psychological breakout trades on the market with Market Mage!</noscript>|' /usr/local/lib/python3.11/site-packages/streamlit/static/index.html && \
sed -i '/<head>/,/<\/head>/s|<\/head>|\
<!-- Primary Meta Tags -->\n\
<meta name="title" content="Market Mage" />\n\
<meta name="description" content="Find the best psychological breakout trades on the market with Market Mage!" />\n\
<!-- Open Graph / Facebook -->\n\
<meta property="og:type" content="website" />\n\
<meta property="og:url" content="https://www.marketmage.app/" />\n\
<meta property="og:title" content="Market Mage" />\n\
<meta property="og:description" content="Find the best psychological breakout trades on the market with Market Mage!" />\n\
<meta property="og:image" content="https://storage.googleapis.com/market_mage/preview.png" />\n\
<!-- Twitter -->\n\
<meta property="twitter:card" content="summary_large_image" />\n\
<meta property="twitter:url" content="https://www.marketmage.app/" />\n\
<meta property="twitter:title" content="Market Mage" />\n\
<meta property="twitter:description" content="Find the best psychological breakout trades on the market with Market Mage!" />\n\
<meta property="twitter:image" content="https://storage.googleapis.com/market_mage/preview.png" />\n\
</head>|' /usr/local/lib/python3.11/site-packages/streamlit/static/index.html
# Navigate to the frontend directory and build the JS component
WORKDIR /app/auth0_component/frontend
RUN npm install
RUN npm run build
# Return to the main app directory
WORKDIR /app
# Replace the existing title and noscript tags and inject the new meta tags
# [Your existing sed commands...]
# The port streamlit will run on
EXPOSE 8501```
I’m suffering from the same issue. On my case I used Render to deploy my app. Thanks for sharing the Dockerfile. I will try your approach and see if I manage to succeed. But in any case thanks sharing !!
@pkonduri Thanks for sharing, you would think Streamlit would have thought of an easier way to incorporate all of this for self hosted deployment users.
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.