Flask app jinja 2 error in flask website Please help me resolve this issue

Question

The file structure is at the bottom: [FILE STRUCTURE][1] The error is:
jinja2.exceptions.TemplateNotFound
jinja2.exceptions.TemplateNotFound: entry.html The full error is:
[jinja 2 full error][2]
All files are working except the /entry file (Examine the flask_app code below)
**I am using python version 3 and flask to make a website.I have also imported jinja 2 **

**WARNING: DO NOT COPY PASTE ALL CODE IN ONE FILE.There are different files here.
All files code is given to you

import search4letters

app = Flask(__name__)

@app.route('/search4')
def do_search() -> 'html':
    return str(search4letters('life, the universe, and everything!', 'eiru,!'))
@app.route('/')
@app.route('/entry')
def entry_page() -> 'html':
    return render_template('entry.html', the_title = "Welcome to search4letters on the web!")


app.run(debug=True)

**The entry.html file  code is here: **
{% extends 'base.html' %}
{% block body %}
<h2>{{ the_title }}</h2>
<form method='POST' action='/search4'>
<table>
<p>Use this form to submit a search request:</p>
<tr><td>Phrase:</td><td><input name='phrase' type='TEXT'
width='60'></td></tr>
<tr><td>Letters:</td><td><input name='letters' type='TEXT'
value='aeiou'></td></tr>
</table>
<p>When you're ready, click this button:</p>
<p><input value='Do it!' type='SUBMIT'></p>
</form>
{% endblock %}

###The base.html file code is here: ###
<!doctype html>
<html>
 <head>
 <title>{{ the_title }}</title>
 <link rel="stylesheet" href="static/hf.css" />
 </head>
 <body>
 {% block body %}
 {% endblock %}
 </body>
</html>
  
**I have made the static folder. Inside it is the hf.css file. hf.css file code is given here: **  
body {
    font-family:      Verdana, Geneva, Arial, sans-serif;
    font-size:        medium;
    background-color: grey;
    /* background-color: tan; */
    margin-top:       5%;
    margin-bottom:    5%;
    margin-left:      10%;
    margin-right:     10%;
    border:           1px dotted gray;
    padding:          10px 10px 10px 10px;
  }
  a {
    text-decoration:  none; 
    font-weight:      600; 
  }
  a:hover {
    text-decoration:  underline;
  }
  a img {
    border:           0;
  }
  h2 {
    font-size:        150%;
  }
  table {
    margin-left:      20px;
    margin-right:     20px;
    caption-side:     bottom;
    border-collapse:  collapse;
  }
  td, th {
    padding:          5px;
    text-align:       left;
  }
  .copyright {
    font-size:        75%;
    font-style:       italic;
  }
  .slogan {
    font-size:        75%;
    font-style:       italic;
  }
  .confirmentry {
    font-weight:      600; 
  }
  
  /*** Tables ***/
  
  table {
  font-size:          1em;
  background-color:   #fafcff;
  border:             1px solid #909090;
  color:              #2a2a2a;
  padding:            5px 5px 2px;
  border-collapse:    collapse;
  }
  
  td, th {
  border:             thin dotted gray;
  }
  
  /*** Inputs ***/
  input[type=text] {
    font-size:        115%;
    width:            30em;
  }
  input[type=submit] {
    font-size:        125%;
  }
  select {
    font-size:        125%;
  }```
**Please help me resolve this problem.**
###results.html file code is given here - This file gives the results of to the user.###
{% extends 'base.html' %}
{% block body %}
<h2>{{ the_title }}</h2>
<p>You submitted the following data:</p>
<table>
<tr><td>Phrase:</td><td>{{ the_phrase }}</td></tr>
<tr><td>Letters:</td><td>{{ the_letters }}</td></tr>
</table>
<p>When "{{the_phrase }}" is search for "{{ the_letters }}", the following
results are returned:</p>
<h3>{{ the_results }}</h3>
{% endblock %}


  [1]: https://i.stack.imgur.com/B38GN.png
  [2]: https://i.stack.imgur.com/RIo1H.png

Is `entry.html` in the root where the application is or within sub folders? — safe, Feb 07 '22 at 12:14
I have added the full error message picture at the bottom of all the code...Please scroll down to see the full error pic — Pratham S. Gorawala, Feb 07 '22 at 12:18
So the `entry.html` should be within the `templates` folder, if this is can you share a screenshot of the structure? — safe, Feb 07 '22 at 12:19
@Joe, I made the folders and moved entry.html in it but it is still showing the same error — Pratham S. Gorawala, Feb 07 '22 at 12:24
So the structure is key, flask requires HTML files to be within the `templates` folder. Therefore, please move all HTML files (including the base.html which you're extending from) to `/templates` within the structure. It should look similar to this: https://python-adv-web-apps.readthedocs.io/en/latest/flask3.html#folder-structure-for-a-flask-app — safe, Feb 07 '22 at 12:25
@Joe, I have edited the code question. I have given the file structure link below the code — Pratham S. Gorawala, Feb 07 '22 at 12:27
@Joe, it working!!!! How does moving all html files into templates help?? — Pratham S. Gorawala, Feb 07 '22 at 12:29
I am actually new to jinja 2 so how did moving html files in jinja 2 help? — Pratham S. Gorawala, Feb 07 '22 at 12:32
Nothing related to Jinja2, this is specific to flask & render_template. I've posted more information as an answer below - glad its all working now :) — safe, Feb 07 '22 at 12:37

score 0 · Accepted Answer · answered Feb 07 '22 at 12:36

You'll need to ensure all HTML files are placed within a templates folder within your application root directory. Flask structures contain two standard folders, static and templates:

The static folder contains assets used by the templates, including CSS files, JavaScript files, and images.
The templates folder contains only templates. These have an .html extension.

render_template has a default directory to /templates and therefore if the template does not exist within here, you'll receive the TemplateNotFound exception.

General structure layout for a flask application is:

my-flask-app
   ├── static/
   │   └── css/
   │       └── main.css
   ├── templates/
   │   ├── base.html
   │   └── entry.html
   ├── flask_app.py

Flask app jinja 2 error in flask website Please help me resolve this issue

1 Answers1