CODEWITHSUNDEEP
javascriptpythonflask
KvothesLute
KvothesLute

Reputation: 195

Flask returning 404 on static files regardless of pathing to the static folder

I am attempting to use flask to access a csv file and two json files which are being held in a folder named static. Even though i have mentioned the static folder in my code i am still having the following 404 issues with my map.js file running. 

"GET / HTTP/1.1" 200 
"GET /%7B%7B%20url_for('static',%20filename%20=%20'topo_E08000025.json')%20%7D%7D HTTP/1.1" 404 
"GET /%7B%7B%20url_for('static',%20filename%20=%20'/static/sampleproperty3.csv')%20%7D%7D HTTP/1.1" 404
"GET /%7B%7B%20url_for('static',%20filename%20=%20'/static/sampleproperty3.csv')%20%7D%7D HTTP/1.1" 404

I have looked everywhere but can't seem to figure out what is going wrong.

I would like the code to pick up on the data in my static folder rather than returning a 404 error.

python code:

from flask import Flask,render_template, url_for


app = Flask(__name__)

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

if __name__== '__main__':
    app.run(debug=True)

map html code:

<!doctype html>
<html>
    <head>
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script src="https://momentjs.com/downloads/moment.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://rawgit.com/nstrayer/slid3r/master/dist/slid3r.js"></script>
        <script src = "https://unpkg.com/[email protected]/dist/topojson.js"></script>
        <script src = "https://d3js.org/colorbrewer.v1.min.js"></script>
        <script src = "{{ url_for('static', filename = 'mapFunctions.js') }}"></script>
        <link rel="stylesheet" href= "{{ url_for('static', filename = 'map.css') }}">

    </head>

    <body style = "background-color:gray">
        <script src = 'static/map.js' ></script>
    </body>

map javascript code:

const svgHeight = 550;
const svgWidth =  $(window).width(); // Uses Jquery to find the width of the window and set the svg width to that so it fills up the entire window
const svgPadding = 500;
let active = d3.select(null);
let filteredData ;
let radicusScale ;
let selected;
let originalTranslation ;
let locationLsoas = d3.json("topo_E08000025.json");
let locationWards = d3.json("topo_ward.json");
let properties = d3.csv("sampleproperty3.csv");

Upvotes: 3

Views: 3169

Answers (1)

Harshal Parekh
Harshal Parekh

Reputation: 6017

HTML files rendered using render_template shall be under templates folder and not static.

The files (CSS/JS) used by these HTML files, shall be under static folder.

I strongly recommend using an IDE like PyCharm and start with a blank flask project. That will give you a template to begin with.

For your reference, a sample hierarchy should be like this:

|static/
|---css/
|------style.css
|templates/
|---index.html
|app.py

My code for app.py:

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def hello_world():
    return render_template("index.html")


if __name__ == '__main__':
    app.run()

My code for index.html (notice the way I access the css files):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">
</head>
<body>
    <h1>Header</h1>
</body>
</html>

Hope this helps. Good luck.

Upvotes: 5

Related Questions