Sm0ke

Posted on Jun 11, 2019 • Edited on Nov 30

Learn Flask by coding

#learn #flask #appseed

Hello Coders,

The goal of this article is to help beginners to code their first app in 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.

✨ Install Python

Python can be downloaded from the official website. 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

We have two options here. Install Flask using a 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.

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

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

The contents of run.py

from app import app

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

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.

✨ Integrate a design

To make the app more appealing, I will integrate a popular design, crafted by Creative-Tim - Material Kit.

✨ 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

✨ 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 layout
Inject three variables in the template: page title, description and content

✨ Structure of the layout page

✨ Structure of the index page

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

👉 More Flask Dashboards crafted in Django, Flask, and React
👉 More Flask Apps - free & PAID

Top comments (9)

Erik • Jun 15 '19 • Edited

Thanks for this introduction to flask!
Very helpful!

I found that returning 'Hello Coder, you are up!' outside of a function does not work (as in example 1). Putting it in 'def hello():' (as in example 2) does work.

Sm0ke • Jun 15 '19

Hello Eric,
Thanks :)

The print should be inside the hello() method.
Did you clone the app from Github?

Erik • Jun 15 '19

Hi,

No, I just read your article and typed the few lines of code myself.
So only the first example:

from flask import Flask
app = Flask(__name__)

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

Gives a syntax error and should be:

from flask import Flask
app = Flask(__name__)

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

That is all. But might be important for a #beginners post.

Sm0ke • Jun 15 '19

Done. Thank you!

jess • Jun 14 '19

Hello,
I was wondering if there was a way to integrate PDF into flask, so that I am able to convert it to an image.
As I know there is a way for python, but I can't seem to find the answer for flask.