DEV Community

Cover image for Learn Flask by coding
Sm0ke
Sm0ke

Posted on • Updated on

Learn Flask by coding

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.


Flask - learn by coding


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
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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

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

Flask - App Package structure

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
Enter fullscreen mode Exit fullscreen mode

The contents of run.py

from app import app

if __name__ == "__main__":
    app.run()
Enter fullscreen mode Exit fullscreen mode

The contents of __init__.py

from flask import Flask
app = Flask(__name__)

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

✨ 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


✨ 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

Flask App - Final Structure


✨ 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') ) 
Enter fullscreen mode Exit fullscreen mode

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

Layout page


✨ Structure of the index page

Index page


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

Top comments (9)

Collapse
 
pwarde profile image
Erik • 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.

Collapse
 
sm0ke profile image
Sm0ke

Hello Eric,
Thanks :)

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

Collapse
 
pwarde profile image
Erik

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.

Thread Thread
 
sm0ke profile image
Sm0ke

Done. Thank you!

Collapse
 
iast0l profile image
jess

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.

Collapse
 
sm0ke profile image
Sm0ke
Collapse
 
iast0l profile image
jess

ive seen this, but i’m not sure what’s the coding for the completed.html as I don’t know what is the code for the successful message

Collapse
 
isaachatilima profile image
Isaac Hatilima

Hi @sm0ke , would you recommend flask for frontend development?

Collapse
 
sm0ke profile image
Sm0ke

Hello Issac,
Flask stands on the server-side. The frontend part is covered by Vue, React, and similar libraries.