After exposure to Svelte/Rollup in the JavaScript world I was impressed that it could refresh the browser automatically when changes were made to the source code. Seeking a similar behaviour in Python I found the package livereload that supports integration with Flask (pretty sure using the same tech). I want the result of the refresh to reflect ALL changes to the source code.
I am using WSL with livereload v2.5.1 and viewing via Chrome. I can successfully get the page to refresh on a detected source code change but the refresh doesn't re-download the new files and just displays the cached files. The page does refresh but I need to hit Ctrl + click refresh to see the actual changes. Using developer mode and turning off caching works as desired. Using Svelte/Rollup doesn't require disabling caching to see source changes.
Most of my changes are to *.css or *.js files served from the 'static' folder in a standard Flask project template and rendered using the 'render_template' function of Flask.
I'm launching my Flask server as follows:
app = create_app()
app.debug = True
app.config['TEMPLATES_AUTO_RELOAD'] = True
server = Server(app.wsgi_app)
server.watch(filepath='static/*', ignore=lambda *_: False)
server.serve(liveport=35729, host='127.0.0.1', port=80)
I would like to not have to disable the cache so that the refresh triggered by livereload actually reflects the changes in the source. Is there a setting in Flask or livereload I can use to achieve this or is this a feature request for the livereload package?
Related Question:
How to automate browser refresh when developing an Flask app with Python?
UPDATE EDIT:
Further testing has shown that this is specifically an issue with Chrome, with Firefox it works as expected out of the box. Digging into the underlying livereload.js library it seems there is a parameter of 'isChromeExtension' which I have tried to force set to True but had no effect.
I came across the same issue and here is what I did to solve the issue.
As you mentioned this is a browser caching problem. So we want invalidate the cached css/js files. We can achieve this by setting a version on the static file. We want the version to change each time you make changes to the css file. What I did feels a bit hacky but you'll get the idea.
Here is what I have for my html template
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link href="{{ url_for('static', filename='main.css', version=time)}}" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="hello-color">
{{ message }}
</h1>
</body>
</html>
You can see version=time I am passing the template the current time with the following.
from flask import Flask, render_template
from time import time
app = Flask(__name__)
#app.route("/")
def hello():
return render_template('hello.html', message="Hello World!", time=time())
from time import time and
time=time()
And finally my main python file
from app import app
from livereload import Server
if __name__ == '__main__':
server = Server(app.wsgi_app)
server.serve(port=2200, host='0.0.0.0')
Hopefully this helps you or anyone else running to this issue.
Related
I created a Flask app that displays the latest pictures on an HTML website. The website is set to automatically refresh every 10 seconds using a meta tag
<meta http-equiv="refresh" content="10" />
it all works great when the server and website run on a local PC, but when I run the app over LAN, the page refreshes correctly a few times, but sooner or later it stops. The webpage itself looks like it is loading (spinning wheel), but no new requests are registered in the flask app. The only way to start refreshing it again is by manual refresh on the client-side or by restarting the flask app on the server-side.
What could be the problem that causes this and how to mitigate it? Can it be caused by a firewall that doesn't like the constant refreshes? Are there any alternatives to said meta tag? I don't want to have any difficult set-up on the client-side like job scheduling etc (unless it is the only solution).
You could just use javascript for this. Just put the code below in your html file somewhere or in a seperate javascript file named script.js and link that javascript file like <script src="/Path/To/File.js"></script>
<script>
window.setTimeout(function () {
window.location.reload();
}, 30000);
</script>
i just would like to run a python script by clicking on a html button.
python script is reallly simple. when you run it, it just add a "name" and "age" data in my database.
import sqlite3
conn = sqlite3.connect('bdaremplir.sqlite')
cur = conn.cursor()
"""cur.execute('DROP TABLE IF EXISTS latable')
cur.execute('CREATE TABLE latable (noms TEXT, age INTEGER)')"""
nom = 'TheName'
age = 100
cur.execute('''INSERT OR IGNORE INTO latable (noms, age) VALUES ( ?, ? )''', (nom, age))
conn.commit()
and the basics of html
<!DOCTYPE html>
<html>
<head>
<title>visualisateur</title>
</head>
<body>
<button></button>
</body>
</html>
now from here i don't at all what i can do.
if anyone can help... thank you.
Web browsers only know how to run JavaScript, not Python, so unless you really want to run Python in the browser1, you have to learn about the client-server architecture of the web.
Basically, you have to
make your Python program available as a web server, and
send a request to that server when your HTML button is clicked.
Running a web server
There are many ways to implement a web server in Python. When you get to writing a proper application, you'll probably want to use a library like Flask, Django, or others. But to get started quickly, you can use the built-in Python HTTP server with CGI:
Create a Python script named handle_request.py with the following content:
#!/usr/bin/env python3
print("Content-Type: text/plain\n")
print("hello world")
and put it into the cgi-bin directory next to your HTML file and make sure you can run it by typing "handle_request.py" into the console;
2. Run the built-in HTTP server:
python3 -m http.server --bind localhost --cgi 8000
Open http://localhost:8000 in your browser to access the server.
You should see the listing of the directory, including your HTML file and the cgi-bin directory. Clicking the HTML file should display it in the browser (with a URL like http://localhost:8000/test.html), and opening http://localhost:8000/cgi-bin/handle_request.py will run the script we've created and display its response as a web page. You can add your code to the script, and it will run whenever the browser accesses its URL.
Making a request from your web page
Now the question is how to make the browser access the http://localhost:8000/cgi-bin/handle_request.py URL when a button on your page is clicked.
To do that you need to invoke the API for making requests from JavaScript. There are different ways to do that (e.g. XMLHttpRequest or jQuery.ajax()), but a simple way that works in the modern web browsers is fetch():
<button id="mybutton"></button>
<script>
document.getElementById("mybutton").onclick = async function() {
let response = await fetch("http://localhost:8000/cgi-bin/handle_request.py");
let text = await response.text();
alert(text);
}
</script>
Now when you click the button, the browser will make a request to the specified URL (thus running your script), but instead of displaying the results as a web page in a tab, it will be made available to your JavaScript.
notes
1 ...which you probably don't at this point, but if you do, see the pointers by Michael Bianconi.
There's a similar question on here, but the answers are over 2 years old and I can't get it to work. If I'm missing something - please let me know.
Bottle.py caching templates despite being in debug mode
Whenever the browser points to 0.0.0.0:8080/16boxes, I need to prevent caching. The Bottle docs say when in Debug mode, caching is disabled, but that isn't the case for me unfortunately.
Here is my hello.py code in question:
#route('/16boxes')
def send_static():
response.set_header('Cache-control', 'no-cache, must-revalidate')
return template (resource_path('16boxes.html'), globalVar0 = globalVar0)
run(host='0.0.0.0', port=8080, debug=True)
I open up terminal and run: python hello.py
It doesn't cache when I run it on my Mac/Chrome - but when I use Windows and Internet Explorer - it uses a cached version. How can I prevent this?
In my 16boxes.html, I even have the following in my :
<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache">
Your problem is that your JavaScript onload event doesn't fire when the page loads as a result of browser caching, jQuery's ready event was created for just this sort of issue.
I have a view python file which has the code:
#app.route('/')
def index():
page = """
<html>
<head>
</head>
.....
...
</html>
I made some changes to this file , those just normal changes like importing render_template.I was able to see the html file using foreman start command in my localhost. However after some changes as I mentioned earlier , when I again start using foreman start I get an error - " View function mapping is overwriting an existing endpoint function: index "
However when I used #app.route('/',endpoint ="new"), it worked.
Looks like it reserving some endpoints and not letting me override it. How can I remove all the endpoints to start fresh.
Make sure you don't have two routes with the same URI.
I am trying to use Flask to serve an SSE request, but my client only receives the events after my generator function has stopped / the connection is closed.
Here is the simplest reproduction I have been able to produce to demonstrate this:
#!/usr/bin/env python
from flask import Flask, Response
from time import sleep
def stream():
n = 10
while n > 0:
yield "data: hi\n\n"
sleep(0.5)
n = n - 1
app = Flask(__name__)
#app.route("/events")
def streamSessionEvents():
return Response(
stream(),
mimetype="text/event-stream"
)
app.run(debug=True, threaded=True)
Here is my test client:
<!doctype html>
<html>
<head>
<script>
var source = new EventSource(
"/events"
);
source.onmessage = function(event)
{
console.log(event);
};
</script>
</head>
<body>
</body>
</html>
The stream() generator will produce ten events and then return (I've deliberately done this to demonstrate the problem, ideally the generator would keep going forever), at which point the connection is dropped. The client page logs nothing until this point, then it spits out all ten events (if I dont have the counter variable in stream() then the page never gets any events).
I havent used Python or Flask a great deal and this has me very stuck, I cant see what I'm doing differently to other examples around the net. Any help very much appreciated.
Two things might interfere:
You have debug set to True, which installs middleware (specifically the Werkzeug debugger) that may break streaming.
From the Flask streaming patterns documentation:
Note though that some WSGI middlewares might break streaming, so be careful there in debug environments with profilers and other things you might have enabled.
However, using either curl or Chrome on your test code with Flask 0.10.1 and Werkzeug 0.9.4 I see the data: hi responses come streaming through properly, regardless of the debug flag setting. In other words, your code is working correctly with the most recent versions of the Flask stack.
EventSource streams are subject to same-origin policy limits. If you are not loading the HTML page from the same host and port, the request to your Flask server will be denied.
Adding the test page source in the Flask server at a separate route works for me:
#app.route('/')
def index():
return '''\
<!doctype html>
<html>
<head>
<script>
var source = new EventSource(
"/events"
);
source.onmessage = function(event)
{
console.log(event);
};
</script>
</head>
<body>
</body>
</html>
'''