Skip to content

Your First Flask App

You have the structure set up. You understand __name__. Now let's write the actual code that turns your Python file into a web server.

Open app.py and type this in:

from flask import Flask, render_template

app = Flask(__name__)

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

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

That is your entire server. Six meaningful lines. Let's go through each one.

from flask import Flask, render_template

This line borrows two things from the Flask package:

  • Flask — a class. It is the thing that creates and runs your server.
  • render_template — a function. It finds an HTML file in your templates/ folder and sends it to the browser.

You installed Flask earlier. This line reaches into it and pulls out exactly what you need — nothing more.

This is the same idea as importing your own functions from another file. Flask is just someone else's file.

app = Flask(__name__)

Flask is a class, so you create an instance of it — just like you would with any class in Python.

You pass __name__ as the argument. Flask uses it to figure out where your project folder is, so it can find the templates/ folder correctly. You already know what __name__ contains when a file is run directly: "__main__". Flask uses that information internally. You do not need to think about it beyond passing it in.

From this point on, app is your server. Everything runs through it.

@app.route('/')

This is a decorator — it sits on top of a function and gives it extra meaning.

@app.route('/') tells Flask: when someone visits the URL /, call the function below.

The / is the root — the homepage. If your server is running at http://localhost:5000, then / means http://localhost:5000/. It is the starting point.

You can have as many routes as you like — one per page. More on that in the challenge below.

def home():

A completely normal Python function. Flask calls this automatically whenever someone visits /. You do not call it yourself — Flask does, based on the route above it.

The name home is your choice. You could call it index or homepage or anything. The decorator is what connects it to the URL, not the function name.

return render_template('index.html')

render_template does two things:

  1. Looks inside your templates/ folder for a file named index.html
  2. Reads it and sends it back to the browser as the response

The browser receives the HTML and draws the page — exactly like it did when you opened the file directly, except now it came through your Python server.

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

You already know this pattern. Only start the server when this file is run directly.

app.run(debug=True) starts the server. debug=True turns on two helpful things:

  • The server restarts automatically every time you save app.py
  • If your Python code has an error, the browser shows a helpful error message instead of a blank page

Running the app

In VSCode, open the terminal with Ctrl + ` (the backtick key, top-left of your keyboard).

Make sure the terminal is pointing at your project folder — you should see the folder name in the terminal prompt. If not, use cd to navigate there.

Then run:

python app.py

On Mac/Linux: 

python3 app.py

You will see output like this:

 * Running on http://127.0.0.1:5000
 * Press CTRL+C to quit

Open your browser and go to:

http://127.0.0.1:5000

You should see your index.html page — served by your own Python code. That is your local web server running.

To stop it: press Ctrl + C in the terminal.

127.0.0.1 and localhost are the same thing

127.0.0.1 is your own computer's address. localhost is just a friendly name for the same thing. Both http://127.0.0.1:5000 and http://localhost:5000 will work.

Challenge

Add a second page to your server:

  1. Create about.html inside templates/
  2. Put a heading and a paragraph in it — something about you
  3. In app.py, add a second route below the first:
@app.route('/about')
def about():
    return render_template('about.html')

Save app.py (the server restarts automatically because debug=True). Then visit http://127.0.0.1:5000/about in your browser.

Do you see your second page? You just built a two-page website served by Python. Every new page is one HTML file plus one route. That is the pattern.

← What is __name__?    Next: Passing Data to Your Template →