Streamlit with Nginx

Streamlit — businesswire

TLDR; version

When we tried Streamlit in localhost it worked fine. But when we put it on Ubuntu server and try to use the domain name, we faced an issue as below

main.0a886398.chunk.js:2 Uncaught Error: Unsupported state transition.
State: PINGING_SERVER
Event: CONNECTION_TIMED_OUT
    at e.value (main.0a886398.chunk.js:2)
    at main.0a886398.chunk.js:2

We tried Stackoverflow, Github issues but NO help. Finally one of team members came up with a solution which involved some changes both in streamlit config file and nginx server configuration.

Below are the configurations for both Streamlit and Nginx:

Streamlit config: (~/.streamlit/config.toml)

[server]
port=8502 # change port number. By default streamlit uses 8501 port
headless=true # This will eliminate automatically open browser
[browser] # This ip and port will show in command prompt
serverAddress = "stackindex.tactii.com" # Put your Local IP or Domain Name
serverPort = 8502

Nginx setup: (/etc/nginx/sites-enabled/tactml)

server {
    listen 80;
    server_name stackindex.tactii.com www.stackindex.tactii.com;
    index index.php index.html index.htm;
    location / {
        proxy_pass http://0.0.0.0:8502/;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
    
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

After these configurations, we are able to see our Streamlit app working on our domain!

StackIndex

StackIndex