search

miguelgrinberg / turbo-flask

Integration of Hotwire's Turbo library with Flask.
MIT License
301 stars 35 forks source link

Load values not updating on turbo.push() call #44

Closed BigBuckHunter closed 1 year ago

BigBuckHunter commented 1 year ago

I have cloned this repo, installed flask/turbo-flask, and run flask run in examples/load. I then visit 127.0.0.1:5000 and the page displays as expected, but the Load averages values do not update every 5 seconds like they should. If I click the link back and forth between Page 2 and Page 1, the values update.

I have no error messages in my logs. I added debug statements to inject_load() and right before turbo.push(turbo.replace(render_template('loadavg.html'), 'load')), and I can confirm that my update_load() loop is running successfully.

What am I missing? I can provide screen recording if helpful.

miguelgrinberg commented 1 year ago

Are you using the last released version of turbo-flask? Try version 0.8.0, there is currently an issue with the turbo.js CDN. Downgrading is the workaround.

Reference: https://github.com/miguelgrinberg/turbo-flask/issues/42

BigBuckHunter commented 1 year ago

That solved it, thank you!

BigBuckHunter commented 1 year ago

The downgrade to 0.8.0 was successful when running locally on the dev server.

I have since attempted to deploy my application to production following the steps outlined here.

After completing the tutorial above, I am now in the same position as before. Visiting my URL loads the initial page, but turbo.push(turbo.replace(...)) has no effect. I have turbo-flask version 0.8.0 installed.

This is the first web application I have ever developed, and I'm a bit out of my depth here. I suspect that the issue is with the way I have configured gunicorn or nginx. Is there any documentation you can point me to for using gunicorn and turbo-flask together successfully? I have looked at the flask-sock documentation as suggested in the readme, but that hasn't solved my issue.

miguelgrinberg commented 1 year ago

@BigBuckHunter You need to look at the console in your browser and your server logs for clues. If I had to guess, I would say that the problem is likely that you did not properly configure WebSocket in your nginx configuration. The turbo.js library makes a call to the /turbo-stream endpoint using WebSocket.

Unfortunately nginx does not automatically proxy WS endpoints. There's a ton of tutorials on how to configure WS out there, for example: https://www.nginx.com/blog/websocket-nginx/.

miguelgrinberg commented 1 year ago

@BigBuckHunter I have expanded the Deployment section of the docs with an Nginx example.