How to edit index.html?

Using Streamlit
3

@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```
3 Likes
Injecting HTML/GTM/Analytics into Dockerized Streamlit Apps