Running on the devel server, I can render 0.0.0.0:8080/index.html without CSS fine, but no static files load. 0.0.0.0:8080/static results in "Not found" and 0.0.0.0:8080/static/style.css gets a 404.
All I've googled quotes or links to http://webpy.org/cookbook/staticfiles, which I feel like I've followed to point.
filetree
code.py
/web
...
/static
style.css
/images
...
/pages
index.html
code.py
import web
render = web.template.render('/home/keith/code/webpy/skeleton/pages/')
urls = (
'/', 'index',)
class index:
def GET(self):
return render.index()
if __name__ == "__main__":
app = web.application(urls, globals())
app.run()
/pages/index.html
...
<link rel="stylesheet" type="text/css" href="static/style.css" />
...
Would appreciate any help!
I tried running python code.py from a terminal window and the static files served fine! Before, I was using the terminal emulator in my IDE (Geany 1.24.1). So that was the problem, for whatever reason.
Related
This question already has answers here:
How to serve static files in Flask
(24 answers)
Link to Flask static files with url_for
(2 answers)
Closed 4 years ago.
I'm pretty new to python, even less experienced with flask, and I cannot figure out this issue. I have the following simple web page with jQuery functionality that works great when I double click the file and open it in a browser:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#updateBtn").on("click", function() {
text = "<h2>The div has been updated!</h2>";
$("#jQuery_div").html(text);
});
});
</script>
<div>
<h1>This is a non-jQuery div</h1>
</div>
<div id="jQuery_div">
<h2>This div should update with jQuery</h2>
</div>
<button id="updateBtn">update</button>
</body>
</html>
However, when flask delivers the web page on localhost:5000, the jQuery functionality is no longer present. My python is as follows:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def render():
return render_template("jquery_test.html")
if __name__ == "__main__":
app.run(port=5000, debug=True)
My app's file tree is:
/AJAX_practice
ajax_practice.py
/templates
jquery-3.3.1.js
jquery_test.html
I was trying to follow this tutorial when I couldn't get the "echo" button to work. In my efforts to debug, I have slowly chipped away and drastically simplified the program to the above code to see why I cannot get my jQuery to work through flask. I am still at a loss. I am running the flask app by pressing F5 in IDLE, with no errors in Python 2.7.13 Shell, and the Terminal (from which I started IDLE with $ sudo idle) showing:
my ip - - [date and time] "GET / HTTP/1.1" 200 -
my ip - - [date and time] "GET /jquery-3.3.1.js HTTP/1.1" 404 -
From this, my best guess is that flask cannot find the jquery.3.3.1.js file, though I have tried putting it everywhere in the file tree with no luck. I cannot use the script src to https for jQuery dependencies, as my server will eventually be on a non-internet connected LAN. Am I on the right track? If so, how does flask find and/or navigate jQuery dependencies? Can anyone point me towards some documentation that might help my fundamental understanding of this issue?
Any help on this matter would be greatly appreciated.
You are trying to serve JavaScript file from templates folder. Add a static folder and use that to serve static content.
in your case create a directory structure like "static/js/jquery.min.js"
and then add script reference like this
<script src="{{url_for('static', filename='js/jquery.min.js')}}"></script>
See this :
http://exploreflask.com/en/latest/static.html
If you don't want to keep it in "static" folder and use another local directory you can use send_from_directory as shown in this example :
https://stackoverflow.com/a/20648053/2118215
This has always worked for me with Flask in the past:
<script src="{{ url_for('static', filename='jquery-3.3.1.js') }}"></script>
'static' is the name of the folder it's in (and the 'static' folder is in the root of my project). You can edit this to suit your preferred structure and naming, so change 'static' to 'templates' if that's where you'd rather keep your jquery file, although I would recommend keeping it in a separate folder from your HTML templates, purely in the interests of keeping your project well organised.
I believe the path to jquery should be /templates/jquery-3.3.1.js
On me flask server when i serve jquery it has the full path from the home directory: /static/js/jquery.min.js
I have this issue with Flask when i try running this code with Flask :
#app.route('/viz')
def root():
return render_template('page.html')
The file 'page.html' is in the templates folder, and contains some lines like this :
<link rel="stylesheet" href="static/main.css">
But when I execute my program, the file doen't look for main.css in the static directory, but in the viz/static direcory ( /viz is the route of the view).
How can I solve this issue ?
Thanks and sorry for my english.
You need a leading slash to tell the browser to use an absolute path.
<link rel="stylesheet" href="/static/main.css">
You need to place the static folder within the package or next to your module. See the Flask Quickstart documentation for more details. Without knowing more about your structure, my guess is your tree should look something like this:
- top level directory (e.g. your package "root")
| app.py
| static/
| viz/
I have read some Q&A like load-static-content-with-cherrypy
However, I am unable to figure out how to do it to be shared by different paths.
I have the following Class:
class Root(Base):
#cherrypy.expose
def index(self):
return self.html_head()+self.header()+"Root"+self.footer()+self.html_end()
#cherrypy.expose
def help(self):
return self.html_head()+self.header()+"HELP"+self.footer()+self.html_end()
And the config file is:
[global]
server.socket_host = "127.0.0.1"
server.socket_port = 8080
server.thread_pool = 10
[/]
tools.staticfile.root = "/path/to/app/"
[/css/style201306.css]
tools.staticfile.on = True
tools.staticfile.filename = "css/style201306.css"
When accesing the css from /help I got a 404 error. Must I add a [path] entry for every method in my class where I want to serve the css file? Or must I use the [global] tag instead, though maybe I don't want to use it from other apps? What is the difference between an app config and a path config entry? Until know I was considering this as one App with 2 paths ("/" and "/help")
I am passing configuration like:
# Configuration
import os.path
tutconf = os.path.join(os.path.dirname(__file__), 'myconf.conf')
cherrypy.quickstart(root, config=tutconf)
Both webpages load the CSS the same way (actually, is the same code):
css/style201306.css
The problem is in your html itself use an absolute URL, there is no reason to use a relative url when is the same content, instead of:
<link rel="stylesheet" type="text/css" href="css/style201306.css" />
use
<link rel="stylesheet" type="text/css" href="/css/style201306.css" />
otherwise the browser will append the current URL, for example if the current URL is /help, then it will try to fetch:
/help/css/style201306.css
I am using Flask as a web framework, and I am trying to implement the first example from the book Getting Started with D3, by Mike Dewar. I have a Python script named run.py and two directories, templates/ and static/, containing index.html and service_status.json, respectively. Unfortunately, my code is not rendering the data at all, nor is it producing any glaring errors.
This is what I have in run.py:
#!/usr/bin/env python
from flask import Flask, render_template, url_for
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
if __name__=="__main__":
port = 5000
app.debug = True
app.run( port=port )
This is what I have in templates/index.html:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META CHARSET="utf-8">
<SCRIPT SRC="http://d3js.org/d3.v3.min.js"></SCRIPT>
<SCRIPT>
function draw(data) {
"use strict";
d3.select("body")
.append("ul")
.selectAll("li")
.data(data)
.enter()
.append("li")
.text( function(d){
return d.name + ": " + d.status;
}
);
}
</SCRIPT>
<TITLE>MTA Data</TITLE>
</HEAD>
<BODY>
<H1>MTA Availability Data</H1>
<SCRIPT>
d3.json("{{ url_for( 'static', filename='service_status.json') }}",draw); // <---- BIG PROBLEM
</SCRIPT>
</BODY>
</HTML>
I am using Windows 7, Google Chrome, and Python 2.7.
If the JSON file is not going to change, then you should put it in the static directory and use
from flask import url_for
url_for('static', filename='service_status.json')
For this to work, also change the path in the JavaScript to '/static/service_status.json'
Static files like your json document, are by default served from a different directory from the templates - by default 'static'
You dont need to use the url_for call in your view, you can use it in your template:
d3.json("{{ url_for('static', filename='service_status.json') }}",draw);
So to summarise: 1) Move your json document in to the static folder (a folder called static along side your templates folder, by default), and 2) use the url_for call in your template to get the correct URI for your json document.
If you want to use a folder other than static, you can change that by passing static_folder to the Flask object contructor
You seem to be getting a 304 status code as you mentioned in earlier comments. I see that your JSON has the following date/time:
"Date": [
"12/15/2011"
],
"Time": [
" 7:35AM"
],
I am not 100% sure but this might help:
http://www.w3.org/Protocols/HTTP/HTRQ_Headers.html#if-modified-since
Basically, it says that
"This request header is used with GET method to make it conditional: if the requested document has not changed since the time specified in this field the document will not be sent, but instead a Not Modified 304 reply.
Format of this field is the same as for Date:"
So, may be you can check the timestamp on the JSON and probably just do a fresh save ?
Always getting 404 while trying to load static file using Bottle. I have referred stack overflow question and Google group chat but nothing is helping me to correct my problem. Please help me.. spent lot of time in this...
Tuts
main.py
static/
bootstarp.css
views/
index.tpl
main.py code
import bottle
from bottle import Bottle
from os.path import basename,abspath, dirname, join
app = bottle.default_app()
appPath = dirname(abspath(''))
print appPath
#bottle.route('/')
def index():
return bottle.template('index', dict(title=appPath,get_url=app.get_url))
#bottle.route('/static/:filename#.*#', name='css')
def server_static(filename):
return bottle.static_file(filename, root=join(appPath,'static'))
bottle.debug(True)
bottle.run(host='localhost', port=8082,reloader=True)
**Template:**
<link href="{{ get_url('css', filename='bootstrap.css') }}" rel="stylesheet" media="screen">
Add
from bottle import static_file
at top. Then just use static_file(..., ...) is fine:
#bottle.route('/static/:filename#.*#', name='css')
def server_static(filename):
return static_file(filename, root=join(appPath,'static'))