where to keep js files in Flask applications?

Question

I am new to flask and using it to serve index.html at "localhost:5000/". Currently I have only 3 files: index.html, angular.js, and app.js; and all of them are in same folder. I am serving index.html as :

@app.route('/')
def index():
    return make_response(open('index.html').read())

I want to include angular.js and app.js in index.html. I tried this :

<script src="angular.js"></script>
<script src="app_controller.js"></script>

But it is not including both the files (which I checked from 'view page source'). Is there a default directory from where flask takes included files? How should I achieve this?

Answer 1

Flask should know the path from where it can serve static files. Create 'static' directory put all static files in it. And, in index.html use:

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

Note that there is special endpoint called 'static' which looks into directory called 'static' and serves that file. You can also change name of the static directory.

app = Flask(__name__, static_folder="differet_dir_name")

Also, create directory called "templates" and copy all your html files in there and use render_template method inside your method as:

return render_template("index.html")

So, your directory structure should look like:

app.py
static --> contains all static files
templates --> contains all html files

Links: http://flask.pocoo.org/docs/quickstart/#static-files http://flask.pocoo.org/docs/api/#application-object

Hope it helps.