How to create a Flask app in Python
Tags: python
Published: 2021-12-31 21:32:04

Let's create a [Flask app](https://flask.palletsprojects.com/en/2.0.x/) 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.](https://dev.to/techparida/how-to-deploy-a-flask-app-on-heroku-heb)

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`. 

```bash
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: 

```bash 
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:

```python
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:

```bash
export FLASK_ENV=development
export FLASK_APP=main
```

Next, we can run:
```bash
flask run
```

And you should see something like this in your terminal:

```bash
 * 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/](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:

```python
# 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:

![File structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ee0dwe5cswkeu2zdewq.png)


And your home.html file should have this in it:
```html
<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:
```python
import datetime  # <- Add this line 
from flask import Flask, render_template
....
```

And at the bottom for `main.py` add these lines:
```python
@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: 

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

Now navigate to [http://127.0.0.1:5000/time](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:
![File structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu1jw7qygxisj413t7z7.png)

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