CODEWITHSUNDEEP
pythonhtmlcssflask
jazcap53
jazcap53

Reputation: 401

Flask not finding files in my package's 'static' directory

My question is similar to several others on this site, but the answers I find there aren't working for me.

I'm learning Flask. I'm running Flask 0.10.1 and Python 2.7, on an Ubuntu 10.04 machine using a Vagrant VM.

I've tried countless suggestions from SO, the Flask docs, and Miguel Grinberg, without success.

So I'm showing the simplest version that I thought could work (but doesn't) for your perusal.

The commented-out substitute lines (in page_a.html and page_b.html) do work but are hideous.

First, here's the output of 'tree' on my project root:

output_of_tree

And here are the files (minus a bit of boilerplate in the .html)

page_a.html:

<head>
    <link rel="stylesheet" href="styles.css">
    <!-- <link rel="stylesheet" href="static/styles.css"> -->
</head>
<body>
    <h1>page_a</h1>
    <img src="an_image.png">
    <!-- <img src="static/an_image.png"> -->
    <a href="{{ url_for('page_b') }}">to page b</a>
</body>

page_b.html:

<head>
    <link rel="stylesheet" href="styles.css">
    <!-- <link rel="stylesheet" href="../../static/styles.css"> -->
</head>
<body>
    <h1>page_b</h1>
    <img src="../../static/an_image.png">
    <!-- <img src="../../static/an_image.png"> -->
    <a href="{{ url_for('page_a') }}">to page a</a>
</body>

init.py:

from flask import Flask
app = Flask('my_pages')
import my_pages.views

runserver.py:

from my_pages import app 
app.run(host='0.0.0.0', port=5000, debug=True)

views.py:

from my_pages import app 
from flask import render_template

@app.route('/')
@app.route('/page_a')
def page_a():
    return render_template('page_a.html')

@app.route('/pages/page_b/')
def page_b():
    return render_template('page_b.html')

styles.css:

body {
    background-color: green;
}

This version does work when, in page_a.html and page_b.html, I use the commented-out lines (instead of the lines above them).

Here's the output of runserver.py when I access page_a.html:

"GET /page_a HTTP/1.1" 200 -
"GET /styles.css HTTP/1.1" 404 -
"GET /an_image.png HTTP/1.1" 404 -

and page_b.html.

"GET /pages/page_b/ HTTP/1.1" 200 -
"GET /pages/page_b/styles.css HTTP/1.1" 404 -

(this last shows 'an_image.png' from my 'styles' directory)

My questions: What am I missing? Can this setup be made to work without a major refactoring?

I of course don't want to hard-code the full path to every static file.

Also, in the real application, the URLs run several levels deep -- e.g., 

http://localhost:5000/book/<id_1>/chapter/<id_2>/page

Many thanks to anyone who might reply!

Upvotes: 3

Views: 3175

Answers (2)

Swetabh
Swetabh

Reputation: 1815

You could use url_for to serve the static files. An example can be found here.

PS: Unless you are making something really large, serving them by using '/static/file.css' should work fine. In production environments it's better to get Apache or nginx to serve static files.

Upvotes: 1

dirn
dirn

Reputation: 20709

You aren't telling Flask that the files are in your static folder. The easiest way to do that is with url_for.

<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">

Upvotes: 3

Related Questions