'Nothing showing on my webpage when I try to use render_template Flask

Im trying to create a webpage for displaying some statistics and information through VSCode. When I use the render_template function of an HTML file, the webpage is empty and displays nothing.

This is my main code:

from flask import Flask, render_template

app = Flask(__name__)
@app.route('/')
def index():  
    return render_template('index.html')

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

This is my HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for ('static', filename='css/main.css') }}">
    <title> Document</title>>
</head>
<body>
    Hello
</body>
</html>

And this is what my whole workplace looks like



Solution 1:[1]

This is probably because the folder that you have your HTML in is not named as templates I believe having a structure like this would make your life easier:

Flask App
  templates
    base.html
    index.html
    posts.html
  app.py

I hope that this helps

Solution 2:[2]

I'm not familiar with VSCode but I'm not sure if the 'static' folder is named 'static /css' or if it's 'static' and 'css' is a subfolder of the first. It should be the latter, and that might be a reason that the css might not show up.

Regarding the HTML. While working with backend such as Flask, one common problem is with the chrome-cache. After you make a change in the HTML try to disable it before reloading the page, by pressing F12, going to the "Network" tab, and checking "Disable cache". Then reload (Without pressing F12 Again at first), and see if anything has changed

Oh, and I just noticed that it says that you didn't save your last changes to the HTML file, maybe you forgot to save after adding your content to the document.

Solution 3:[3]

Man I had got the same error. I searched so much everywhere about what is happening, but i didnt get it. Then by critical thinking i did understand that the render_template wasnt working. So i did later on understand that render template function is sensitive to what you keep the names of your directory, like you need to have the html file in folder named "templates" only. In case you dont, then it doesnt work. So i had everything right but still the site wasnt working. Then i tried changing the name of the folder in which i had all files, which in my case was named "website". Then i re-run the website by changing its name to "ksi"(basically random name). Thats when the render template function worked.

I dont know how for so many years nobody hadnt found a solution already to this problem. Some devices dont seem to have that problem, but anyways hope this solves your problem!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Priyanshu
Solution 2 Sami
Solution 3 Rupesh Suryawanshi