49

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?

10
  • where is the page that you are reffering to? i mean the index page.. Commented May 3, 2015 at 7:07
  • i think you'll have to remove / before javascript in your <script> src. Commented May 3, 2015 at 7:08
  • app/templates/index.html Commented May 3, 2015 at 7:09
  • okk..could you please show the console error too.. Commented May 3, 2015 at 7:10
  • please try ./javascript..add a . before / in your src. Commented May 3, 2015 at 7:11

4 Answers 4

158

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

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

1 Comment

if your javascript code is inside in a blueprint, you can call it as: <script src="{{url_for('blueprintName.static', filename='somejavascriptfile.js')}}"></script> with .notation that way you know exactly where that static file is coming from
0

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

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

3 Comments

Still getting the same problem
Do you mean you see 404 for http://localhost:5000/app/javascript/jquery.js ?
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.
0

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>

1 Comment

I gave that a try but no luck!
0

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/

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.