[Python] Jinja Code coming up as text from Flask to HTML webpage

I have been attempting to flash a simple message to a webpage via Flask and Jinja, and yet it always reuslts in the jinja code being displayed as simple text.

Here is my app.py code:

from flask import Flask, flash, redirect, render_template

app = Flask(__name__)
app.config['SECRET_KEY'] = '12345'

@app.route('/')
def index():
flash('Hello, this is a flash message!')
return render_template('index.html')

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


Here is my index.html code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flash Message Example</title>
</head>
<body>
{% for mesg in get_flashed_messages() %}
<h1>{{ mesg }}</h1>
{% endfor %}
</body>
</html>


My directory structure is very simple:



I have tried almost everything, looked and adpated multiple tutorials, simplified the program to its skeleton, uninstalled and re-installed Flask, but still the Jinja Code comes up as text like so:

What am I missing here?

Continue reading...