Let's create a Flask app from scratch, using Python 3.9 or newer.

Note: We are not deploying the app, we're just getting started. If you want to deploy a Flask app to Heroku, check out this article.

We'll also get started with a basic templating system. Nothing drastic, but something to add custom information to your templates.

Step 1: Create a virtual environment

There are LOTS of ways to do this, but the simplest way is to use a venv.

mkdir yourproject
cd yourproject/
python -m venv .venv/ 
source .venv/bin/activate/

Step 2: Install Flask

Once you are inside your virtual env (the last line from the code above will get you "inside" your venv), you can simply run:

pip install flask
pip freeze > requirements.txt

This will install Flask in your virtual environment, and create a requirements.txt file for other people to use when installing your project.

Step 3: Your main file

Your main file is where your initial code will live. Go ahead and create main.py and add this to it:

from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
  return "<h1>Hello world</h1>"

Now, this won't actually do anything yet. We need to run this code. We'll do that in the next step.

Step 4: Environment variables and running the app

First, let's set a couple environment variables. This will help tell Flask what to do while we're developing our app.

In your command line (while inside of your virtual environment) run:

export FLASK_ENV=development
export FLASK_APP=main

Next, we can run:

flask run

And you should see something like this in your terminal:

 * Serving Flask app 'main' (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 814-739-543

Head on over to http://127.0.0.1:5000/ in a new tab in your browser, and you should see Hello World in big bold letters.

Step 5: Adding a template

Templates make life easier. You can write a basic .html file with some Jinja templating in it for dynamic content. But let's start with a simple template.

Open your main.py file and change it to look like this:

# main.py 
from flask import Flask, render_template
app = Flask(__name__, template_folder='templates')
@app.route('/')
def index():
  return render_template('home.html')

This tells Flask to use the templates/ folder as the main folder for templates, and to use home.html as the main page. You can rename home.html to anything you like.

Note: There's A LOT to know when it comes to templating in Jinja, but we aren't going to cover very much right now so we can keep this simple.

Now create a new folder beside your main.py file called templates/ and add a child file called home.html.

Your file structure should look like this now:

And your home.html file should have this in it:

<h3>Hello from home.html</h3>

Step 6: Creating a second view.

In your main.py file, let's create a second "view". This is the route (sometimes called path) to another page.

This time we'll add something dynamic to the template.

At the top of main.py add this import:

import datetime  # <- Add this line 
from flask import Flask, render_template
....

And at the bottom for main.py add these lines:

@app.route('/time')
def timetest():
    now = datetime.datetime.now()
    return render_template('time.html', now=now)

Lastly, add templates/time.html to your project, and inside of time.html add:

<h3>The time is {{ now }}</h3>

Now navigate to http://127.0.0.1:5000/time and it should show your time. And it will update every time the page is refreshed.

Note: If the time doesn't match your exact time right now, it's because your Flask server thinks it's on a different timezone.

What we did was:

1. Create a variable called now with the current date/time.
2. Added , now=now to the render_template() function. This adds "context" to your template.
3. In your template, you can access {{ now }} as a dynamic value.

Your project should look like this:

Your project so far should be structured like this:

And all the files I wrote can be found on GitHub here: https://github.com/KalobTaulien/flask-tutorial