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.

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

- app launcher requirements.txt - the file with the project required modules

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

Structure of the index page - source here

Links

Flask Apps - index provided by AppSeed

Flask Dashboard Light - Learn Flask by coding an Admin Panel

Flask Dashboard Argon - How to code a Flask Dashboard from scratch

Happy Coding!