Skip to content

The Project Structure

Before you write a single line of Flask code, you need to set up your project folder correctly. Flask has one strict rule about where your HTML files live — and if you get this wrong, nothing will work.

The structure

Your Flask project must look like this:

your-project-folder/
│
├── templates/
│   └── index.html
│
└── app.py

Two things:

  • templates/ — a folder where all your HTML files live
  • app.py — the Python file where you write your Flask code

The one rule you cannot break

The HTML folder must be called templates. Exactly that. Lowercase. No space. No variation.

Not Templates. Not html. Not pages. Not views.

templates.

Flask looks for that name specifically when you ask it to serve an HTML file. If the folder is named anything else, Flask will not find your pages and will throw an error.

Everything else — your project folder name, what you name your HTML files, how many HTML files you have — is your choice. But that one folder name is non-negotiable.

Setting it up in VSCode

  1. Create a new folder on your computer — name it something like my-first-server
  2. In VSCode, go to File → Open Folder and open that folder
  3. In the Explorer panel, click the New Folder icon and name it templates
  4. Inside templates, create your index.html (or move your existing one in)
  5. Back in the root of the project (not inside templates), create a new file called app.py

Your VSCode Explorer should look like this when you are done:

my-first-server/
├── templates/
│   └── index.html
└── app.py

A note on app.py

The Python file does not have to be called app.py — that is just the convention everyone uses. You could call it server.py or main.py and it would work fine. But app.py is what you will see in every Flask tutorial, every project, everywhere. Use it.

What goes in index.html?

Any valid HTML page. If you already have a portfolio.html or first.html from earlier, rename a copy of it to index.html and drop it inside templates/. That is your homepage.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My First Flask App</title>
  </head>
  <body>
    <h1>Hello from Flask!</h1>
    <p>This page is being served by Python.</p>
  </body>
</html>

Challenge

Set up the project structure right now before moving on:

  • Create the project folder
  • Create the templates folder inside it
  • Create index.html inside templates with at least a heading and a paragraph
  • Create an empty app.py in the root

Once your structure matches the diagram above, you are ready for the next step.

← Installing Flask    Next: What is __name__? →