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

Issue

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.

Solution

ok finally I solved it. Such a banal solution though, and also it doesn't fully make sense to me, but it worked. So basically I moved the .css and .js files out of the "css_image" folder and changed their paths in the HTML-File from:

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

to

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='asdf.css')}}">
<script  src="{{ url_for('static', filename='script.js')}}" data-turbolinks-track="reload"></script>

Strangely, I didn't need to move the image files out of the css_image folder. Because flask serves them without a problem.

Answered By - artre