Compistar

Setup Flask Project

Requirements

  1. Latest Python on Windows or Linux: Python Download
  2. VS Code of course VS Code Download

Basic Setup

I used the installation guide from Flask

Use a virtual environment to manage the dependencies for your project, both in development and in production.

What problem does a virtual environment solve? The more Python projects you have, the more likely it is that you need to work with different versions of Python libraries, or even Python itself. Newer versions of libraries for one project can break compatibility in another project.

Virtual environments are independent groups of Python libraries, one for each project. Packages installed for one project will not affect other projects or the operating system’s packages.

Python comes bundled with the venv module to create virtual environments.

Create a project folder and a .venv folder within:

mkdir myproject

cd myproject

python3 -m venv .venv

Before you work on your project, activate the corresponding environment:

. .venv/bin/activate

Your shell prompt will change to show the name of the activated environment.

Within the activated environment, use the following command to install Flask:

pip install Flask

Installation in VS Code Installation in VS Code

We are done!

The first steps to create a virtual environment and install Flask whit the PIP Package manager are done.

Add Git Repo

Next, we add an empty Git repository to our project and do the initial push.

echo "# flask" >> README.md

git init

git add README.md

git commit -m "first commit"

git branch -M main

git remote add origin https://your-repo.com/<your-name>/flask.git

Info

From here you have to enter your username and password to verify yourself. With GitHub it only works with a token instead of a password.

git push -u origin main

Done! Your added the content to your repo.

Create Minimal Application

  • Create app.py file in root folder

Insert code: The code is for a one-pager which refers from the root folder to the index.html file as soon as the URL is called. There is also the port specification via which port of the IP address the APP should be accessible for development purposes.

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/")
def index():
    return render_template("index.html")


if __name__ == '__main__':
    app.run(port=9000, debug=False)
  • Next, create templates folder with a index.html; the folder structure should look like the following:
├── Projectfolder
├── app.py
├── templates
   └── index.html
  • Insert the code to be rendered in the index.html file, this will then be output without styling.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask app</title>
</head>
<body>
    <h1>Hello Joke</h1><br/>
    <p>
        "Why do programmers prefer dark mode?
        Because light attracts bugs!"
    </p>
</body>
</html>
  • Test via development serve with the command:
flask run --debug

Result You should to see that in your browser

We are done whit a functional main starter app. Next up we can add a frontend framework to add CSS, i prefer Tailwind CSS.

Prev
Homelab Setup
Next
Start Here