Learn Flask by coding
Tags: learn, flask, appseed
Published: 2019-06-11 16:42:31

---
title: Learn Flask by coding 
published: true
description: Learn to code in Flask - the practical guide 
cover_image: https://raw.githubusercontent.com/app-generator/static/master/flask-learn-by-coding/flask-learn-by-coding-screen-1.jpg
tags: learn, flask, appseed
---
Hello Coders, 

The goal of this article is to help beginners to code their first app in **[Flask](https://appseed.us/admin-dashboards/flask/)**, the famous library written in **Python**. For newcomers, `Flask` is a lightweight web application framework written in Python. Sometimes classified as a microframework, Flask provides a lightweight codebase that can be easily extended to become an API, a simple web app, or a complex eCommerce platform.

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

![Flask - learn by coding](https://raw.githubusercontent.com/app-generator/static/master/flask-learn-by-coding/flask-learn-by-coding-intro.gif)

---

> ✨ [Install Python](https://docs.appseed.us/content/how-to/install-python)

Python can be downloaded from the [official website](https://www.python.org/downloads/). Choose the installer for your operating system, download, and click a few times. 
By typing `python --version` in a terminal window, you should see something like this:

```
$ python --version
Python 3.7.2
```

---

> ✨ [Install Flask](https://docs.appseed.us/content/how-to/install-flask)

We have two options here. Install Flask using a [virtual environment](https://www.geeksforgeeks.org/python-virtual-environment/) or globally. I will choose the simple option: 

```
$ pip install Flask
$ pip freeze | grep Flask 
```

First command install Flask, the second will print the version. 

---

> ✨ Next step: decide the project structure

Flask leaves the organization of your web application up to you. The whole app can be saved in a single file or break down in multiple files or packages. The first two options are:

 - Single module structure, where all files are saved in the same directory. 
This structure is suitable for a small project, or learning projects.

![Flask - Single module structure](https://raw.githubusercontent.com/app-generator/static/master/flask-learn-by-coding/flask-learn-by-coding-structure-single-module.jpg)


- Basic Package structure - if your project is not a small one anymore, maybe this project structure is recommended. 

![Flask - App Package structure](https://raw.githubusercontent.com/app-generator/static/master/flask-learn-by-coding/flask-learn-by-coding-structure-package.jpg)


We can see now a much more organized directory structure where each file represents: 
 - `run.py` - app launcher
 - `requirements.txt` - the file with the project required modules 
 - `app / __init__.py` - the *constructor* for our app

---

> ✨ Add code and run the app 

I will choose the **package structure** and create a few files to code the app. The minimal project structure requires two files:


```
<ROOT> / run.py
       / app /
       / app / __init__.py
```

<br />

The contents of `run.py`
```
from app import app

if __name__ == "__main__":
    app.run()
```

<br />

The contents of `__init__.py`
```
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello Coder, you are up!'
```

---

> ✨ Set up the environment 

Before running your app you must set the variable **FLASK_APP**, to inform Flask what should be executed first

 - Set up for Unix: `export FLASK_APP=run.py`
 - Set up for Windows CMD `set FLASK_APP=hello.py` 
 - Set up for Windows Powershell `$env:FLASK_APP = "run.py"` 

---

Navigate to the directory where `run.py` was saved, and type **`flask run`**.
By visiting `localhost:5000` in your preferred browser you should see the app running.

![Flask App - First Scree](https://raw.githubusercontent.com/app-generator/static/master/flask-learn-by-coding/flask-learn-by-coding-first-run-hello.png) 

---

> ✨ Integrate a design 

To make the app more appealing, I will integrate a popular design, crafted by [Creative-Tim](https://www.creative-tim.com/) - [Material Kit](https://demos.creative-tim.com/material-kit/index.html). 

---

> ✨ The new structure of our project

Integrate a new design is quite an easy task, and the steps are:

- copy the UI kit assets under the directory `app / static / assets`
- add the index.html under the `templates` directory


![Flask App - Final Structure](https://raw.githubusercontent.com/app-generator/static/master/flask-learn-by-coding/flask-learn-by-coding-structure-full.jpg)

---

> ✨ Updated files, to render the template


 - The app `__init__.py`

```
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello')
def hello():
    return 'Hello Coder, you are up!'

@app.route('/')
def index():
    return render_template( 'layouts/default.html',
                            title='Flask - Learn by Coding',
                            description='Simple Flask tutorial for beginners.',
                            content=render_template('pages/index.html') ) 
```

The above code does the following:
 - Load the [default](https://github.com/app-generator/flask-learn-by-coding/blob/master/src/app/templates/layouts/default.html) layout
 - Inject three variables in the template: page `title`, `description` and `content`  

---

> ✨ Structure of the layout page 

![Layout page](https://raw.githubusercontent.com/app-generator/static/master/flask-learn-by-coding/flask-app-page-layout.jpg)

---

> ✨ Structure of the index page 

![Index page](https://raw.githubusercontent.com/app-generator/static/master/flask-learn-by-coding/flask-app-page-index.jpg)

---

> **Thanks for reading!** For more resources, feel free to access:

- 👉 More [Flask Dashboards](https://appseed.us/admin-dashboards/flask/) crafted in Django, Flask, and `React`
- 👉 More [Flask Apps](https://appseed.us/apps/flask/) - free & PAID