Streamlit app on personal website

Deployment
1

Hello all!

I’m very sorry if this question has been asked before.

Is there a way to run a Streamlit app on a personal website like johndoe.com?

I would love to make some Streamlit apps that I can use as a portfolio online.

Thanks in advance

2

Are you asking about using a custom domain, or do you want to embed the Streamlit app in your website?

3

Preferably on my own website.

The other options is indeed something that does not end with .streamlit

4

If your app is hosted on Community Cloud, you’ll need to iframe or embed it. You can only control the subdomain of a Community Cloud app. However, you can host your app with another platform that does allow you to configure the domain (like a container on AWS, Azure, or GCP, for example).

5

You can run your streamlit app at home, and expose it with a reverse proxy tool like ngrok. With some plan$, you can use your own domain or sub domain.
It give the possibility to use integrated authentication. I made some tests, and if your are interested in, i can share code to get results of the authentication in your streamlit app :slightly_smiling_face:

1 Like
6

The explanation & code:
Ngrok-side:

In ngrok free account, you have:

Authtoken: you must configure it by doing :

“ngrok config add-authtoken $YOUR_AUTHTOKEN”

Domains: (1 free sub domain)

Endpoints (1 → Connexion between your « sub-domain » and your ngrok’s Authtoken

Edges: manage different settings on your endpoint. One setting is OAuth.

By selecting Google and « Use an ngrok-managed OAuth application. », ngrok will prompt a google authentication to the visitor.

On your computer:

Start your streamlit app:

“streamlit run my_app.py --server.port 85XX --server.headless true”

And

“ngrok tunnel --label edge=edghts_myEdgeLabel http://localhost:85XX/”

By doing this, your local app is reachable at the address : https://my.sub.domain.ngrok-free.app and new visitors get a Google authentication.

In your code:

Ngrok add headers to the request:

‘Ngrok-Auth-User-Name’
‘Ngrok-Auth-User-Email’

‘Host’.

(you can explore the headers once ngrok is up by typing : http://127.0.0.1:4040)

On streamlit version >= 1.39 :

You get the session request :

SessionAuthentification = st.context.headers

st.write(f"Hello {SessionAuthentification[‘Ngrok-Auth-User-Name’]} , coming from {SessionAuthentification[Host]} ")

On streamlit prior to 1.39 :

from streamlit.web.server.websocket_headers import _get_websocket_headers

SessionAuthentification = _get_websocket_headers()

st.write(f"Hello {SessionAuthentification[‘Ngrok-Auth-User-Name’]} , coming from {SessionAuthentification[Host]} ")

That’s it :blush: