Flask Application - How to link a javascript file to website

Question

I am having some trouble getting started with using javascript files on my website (A Flask application). I start the website by running run.py which looks like this:

#!flask/bin/python
from app import app
app.run(debug=True)

In my html page I have the following code which gives a 404 error:

404 error

Error message:

error message

My file structure looks like this:

file structure

Any hints to where I'm going wrong?

where is the page that you are reffering to? i mean the index page.. — Lal, May 03 '15 at 07:07
i think you'll have to remove `/` before `javascript` in your ` — Lal, May 03 '15 at 07:08
please try `./javascript`..add a `.` before `/` in your src. — Lal, May 03 '15 at 07:11
I've added the error in my OP. Tried adding a . before / but still the same result — user2260199, May 03 '15 at 07:16
could you please tell the new console error that you are getting when you tried `.\`. — Lal, May 03 '15 at 07:27
The console message was the same for `./` Using the full path still comes up with a 404 error — user2260199, May 03 '15 at 07:34

score 137 · Accepted Answer · edited Dec 24 '22 at 21:04

Ah yes, luckily I am currently developing a flask application at the moment.

You are currently missing the static folder which by default flask looks into, a folder structure something like this:

|FlaskApp
----|FlaskApp
--------|templates
        - html files are here
--------|static
        - css and javascript files are here

Two important default folders that Flask will look into templates and static. Once you got that sorted you use this to link up with your javascript files from your html page:

<script src="{{url_for('static', filename='somejavascriptfile.js')}}"></script>

Plus - A good article to read but not super related but it talks about the folder structure of flask is this: https://www.digitalocean.com/community/tutorials/how-to-deploy-a-flask-application-on-an-ubuntu-vps

if your javascript code is inside in a blueprint, you can call it as: with .notation that way you know exactly where that static file is coming from — pelos, Dec 13 '21 at 22:40

score 1 · Answer 2 · answered May 03 '15 at 08:22

1

So your index.html is at app/templates/index.html, and your jQuery is at app/javascript/jQuery.js right?

I think your path is wrong. Try this:

<script src="../javascript/jquery.js"></script>

answered May 03 '15 at 08:22

Anakin

1,233
1
14
20

I gave that a try but no luck! – user2260199 May 03 '15 at 08:27

score 0 · Answer 3 · answered May 03 '15 at 07:49

0

Try using src="app/javascript/jquery.js".

Also, I noticed you include jquery.js twice - on line 7 and 28.

answered May 03 '15 at 07:49

dekkard

6,121
1
16
26

Still getting the same problem – user2260199 May 03 '15 at 08:02
Do you mean you see 404 for ```http://localhost:5000/app/javascript/jquery.js``` ? – dekkard May 03 '15 at 08:23
I also have the exact same problem and moving the javascript file to static works. But I am also wondering if I can have the js file in another folder. – Mina Jul 25 '16 at 20:01

score 0 · Answer 4 · answered Nov 20 '16 at 01:11

Here is what helped me eliminate the jquery part of my Flask project

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

This was taken straight from Basic Template found in http://getbootstrap.com/getting-started/

Flask Application - How to link a javascript file to website

4 Answers4

Linked

Related