How to edit index.html?

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

  1. 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
  2. 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.
  3. 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:

  1. Persistence of Changes: How can I ensure that modifications to index.html persist, considering Streamlit’s dynamic installation on Heroku?
  2. Deployment Best Practices: Are there any recommended practices or alternative approaches for modifying index.html in this context?
  3. 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)

1 Like

I’m having the same issue when trying to edit index.html for integrating with Google Analytics.

There’s a way of doing that, but it would be necessary to deploy my app in other deployment tool different from Streamlit community cloud. As per: python - Google Analytics is not working on Streamlit Application - Stack Overflow

But this is not a solution I’m considering because for specific reasons my application has to be deployed in community cloud.

@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 :confused: , 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```
1 Like

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 !!

In case you get curious the app I created is the following https://www.worldmarathonsplanner.com/ . Glad to check yours :slight_smile: