How to get Flask recognise the CSS and JS files in the static folder?

Question

I can't get flask run my css and js files. It just opens a page where all the images are missing and all the textfields and buttons etc. are all over the place. So I found out that the relevant files need to be in the static folder and the path has to be adjusted accordingly like at CSS Problems with Flask Web App or at External JavaScript file is not getting added when running on Flask. I implemented this. But it didn't really help. Apparently it's a common problem. I've tried a few other suggestions/solutions mostly focusing on the snytax and parentheses etc. here on stackoverflow but none helped. So my folder structure is this:

  /myproject
      /static
         /css_image
            script.js
            img1.png
            asdf.css
      /templates
         index.html
      app.py

Here are a few lines from the HTML-Code for the above paths:

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='css_image/asdf.css')}}">
<link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='css_image/img1.png')}}">
<script  src="{{ url_for('static', filename='css_image/script.js')}}" data-turbolinks-track="reload"></script>

My python-flask code looks like this:

from flask import Flask, url_for, render_template

app = Flask(__name__)


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

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

After I run the flask, I get the following on the output:

127.0.0.1 - - [07/Oct/2019 14:10:06] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/img1.png HTTP/1.1" 404 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/asdf.css HTTP/1.1" 404 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/script.js HTTP/1.1" 404 -

I should also add, the html file is working just fine, when I open it directly by clicking on the file.

Answer 1

When you point your html to the static file, you have to give the path from the static directory root:

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='css_image/asdf.css')}}">

That being said, it is not your only problem since some static files with the right path were not found.

What happens when you supply the path to your static files when you create your app? i.e.:

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

[EDIT]: Two things you did not mention though: what is the name of your python file and where is it in your structure? I copied paste your code and it works fine, as evidenced with this log:

 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/asdf.css HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/script.js HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/img1.png HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /favicon.ico HTTP/1.1" 404 -

The directory structure:

app.py
static/
    css_image/
        asdf.css  
        img1.png
        script.js
templates/
    index.html

Answer 2

You need to add the subdirectory css_image to the filename argument of the url_for function in the template:

{{ url_for('static', filename='css_image/script.js')}}

---

Side note: you appear to have done this on the second line of your template sample:

<link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='css_image/img1.png')}}">

However the corresponding line from the console looks like this:

127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /css_image/img1.png HTTP/1.1" 404 -

This path should have been generated as /static/css_image/img1.png and worked correctly. I'm guessing you may have been playing around with the directory structure whilst trying to fix this, so I'd double check both the directory structure and code is correct