loading...
Cover image for Learn Flask by coding

Learn Flask by coding

sm0ke profile image Sm0ke Updated on ・4 min read

Hello Coders,

The goal of this article is to help beginners to code their first app in Flask, the famous library written in Python. Thank you for reading!


In case you want to start faster your next admin dashboard project check out this index with Open Source Admin Dashboards already coded with authentication, database, and deploy scripts - Provided by AppSeed.


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

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.

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

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.

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') ) 

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 - source here

Layout page

Structure of the index page - source here

Index page

The end

Links

Happy Coding!

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

pic
Editor guide
 

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.

 

Hello Eric,
Thanks :)

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

 

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.

Done. Thank you!

 

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.

 
 

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

 

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

 

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