Streamlit app Deployed on EC2 instance can't able to load on browser with external URL

Deployment
1

I have deployed a streamlit application in EC2 Instance and try to load it in browser using its external URL, but it goes in infinite loading and while fetch response through terminal it give something like this

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
        <link rel="shortcut icon" href="./favicon.png"/>
        <link rel="preload" href="./static/media/SourceSansPro-Regular.0d69e5ff5e92ac64a0c9.woff2" as="font" type="font/woff2" crossorigin>
        <link rel="preload" href="./static/media/SourceSansPro-SemiBold.abed79cd0df1827e18cf.woff2" as="font" type="font/woff2" crossorigin>
        <link rel="preload" href="./static/media/SourceSansPro-Bold.118dea98980e20a81ced.woff2" as="font" type="font/woff2" crossorigin>
        <title>Streamlit</title>
        <script>
            window.prerenderReady = !1
        </script>
        <script defer="defer" src="./static/js/main.33cac65c.js"></script>
        <link href="./static/css/main.5513bd04.css" rel="stylesheet">
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

And also the browser console is giving some websocket error

main.33cac65c.js:19 WebSocket connection to 'ws://xx.xx.xxx.xxx/_stcore/stream' failed: 
connectToWebSocket	@	main.33cac65c.js:19

The port is perfectly set up with the outbound rules and everything, followed the deployment documentation of the streamlit.

Please provide solution to make it run on any browser without this

        <noscript>You need to enable JavaScript to run this app.</noscript>

Error.

Can Anyone help on it,
are there steps to follow to make browser compatible with streamlit application ??

Here I have attach a Screenshot for more understanding

Screenshot from 2024-09-30 16-06-58
Screenshot from 2024-09-30 16-06-581919×960 152 KB

2

This is the final working nginx conf for anyone who’s facing issues.

server {
    server_name website.com;

    location / {
                proxy_pass http://127.0.0.1:8501/;
                proxy_set_header        Host $host;
                proxy_set_header        X-Real-IP $remote_addr;
                proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header        X-Forwarded-Proto $scheme;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
    }

        location /_stcore/stream {
                proxy_pass http://127.0.0.1:8501/_stcore/stream;
                proxy_http_version 1.1;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $host;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_read_timeout 86400;
        }

}
3

Additionally, Have to enable JavaScript in respective Browser

Here is the given link to do that in chrome.

Instruction to enable JavaScript in chrome

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.