How to reference a html template from a different directory in python flask

Solution 1:

Flask is looking in templates/frontend/src/view_notifications.html for your template file. You either need to move your templates file to that location or change the default template folder.

According to the Flask docs you can specify a different folder for your templates. It defaults to templates/ in the root of your app:

import os
from flask import Flask

template_dir = os.path.abspath('../../frontend/src')
app = Flask(__name__, template_folder=template_dir)

UPDATE:

After testing it myself on a Windows machine the templates folder does need to be named templates. This is the code I used:

import os
from flask import Flask, render_template

template_dir = os.path.dirname(os.path.dirname(os.path.abspath(os.path.dirname(__file__))))
template_dir = os.path.join(template_dir, 'frontend')
template_dir = os.path.join(template_dir, 'templates')
# hard coded absolute path for testing purposes
working = 'C:\Python34\pro\\frontend\\templates'
print(working == template_dir)
app = Flask(__name__, template_folder=template_dir)


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

if __name__ == "__main__":
    app.run(debug=True)

With this structure:

|-pro
  |- backend
    |- app.py
  |- frontend
    |- templates
      |- index.html

Changing any instance of 'templates' to 'src' and renaming the templates folder to 'src' resulted in the same error OP received.

Solution 2:

a batter solution is to just go directly without os.path.abspath like this:

from flask import Flask

app = Flask(__name__, template_folder='../../frontend/src')

Solution 3:

Flask will automatically detects folder name "templates". so you should create a folder called templates in project directory where your .py application file is present. Then place folder which contain html file inside templates folder. Hence your code will be

return render_template("frontend/src/view_notifications.html", posts=posts)

Ensure the path "frontend/src/view_notifications.html" is inside templates folder