Flask- getting 404 error when html tries to access Javascript file

Question

I'm pretty new to python, Javascript, and flask in general. When I try to insert Javascript into my html file and host it on my local server, I get this error.

127.0.0.1 - - [31/Dec/2018 18:01:03] "GET /%7B%7B%20url_for('static',%20filename='js/ClientSide.js')%20%7D%7D HTTP/1.1" 404-

This is what the relevant portion of my html file looks like.

<!DOCTYPE html>
<html>
<head> 
<script src="{{ url_for('static', filename='js/ClientSide.js') }}"></script>
</head>
<h1>Tweet Data</h1>

This is what the relevant part of my python code looks like

app = Flask(__name__,static_folder='templates')

@app.route("/")
def output():
    return send_from_directory(app.static_folder,"Frontend.html")

This is what my folder structure currently looks like

├───.idea
├───static
│   ├───css
│   └───js
|       +---ClientSide.js
├───templates
|   +---Frontend.html
├───venv
│
|---twitter.py

Electroseela · Accepted Answer · 2019-01-01 00:50:22Z

3

you should use render method to link script as a variable in jinja template.

from flask import render_template 

@app.route("/")
def output():
    return render_template("Frontend.html")

you better add javascript code bottom of the html page(before end body tag ).

answered Jan 1, 2019 at 0:50

Electroseela

1111 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kuhnertdm · Accepted Answer · 2018-12-31 23:58:54Z

2

send_from_directory is used for static files. Frontend.html is a template, which is what allows you to call {{ python code }} like this. Instead of using send_from_directory, you should be using render_template.

http://flask.pocoo.org/docs/1.0/quickstart/#rendering-templates

answered Dec 31, 2018 at 23:58

kuhnertdm

2041 silver badge9 bronze badges

Collectives™ on Stack Overflow

Flask- getting 404 error when html tries to access Javascript file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related