Part 1: Building a User-Friendly Todo App with Flask - A Step-by-Step Guide for Setting up Flask Application template

Welcome to the DevMaesters website! This marks the beginning of an ongoing series where I'll walk you through creating a simple todoapp website using the Flask framework. In this first part, I'll demonstrate setting up a basic Flask application.

Flask, a lightweight framework built on Python, allows for the rapid creation of simple applications. It seamlessly integrates with HTML, CSS, and JavaScript for the frontend while leveraging Python for the backend.

Let's get started:

Step 1
Create a new directory and open it using VSCode.

Step 2
Create and activate a virtual environment:

Windows

# create virtual environment
python -m venv venv

# activate virtual environment

.\venv\Scripts\activate

Mac

# create virtual environment
python -m venv venv

# activate virtual environment

source venv/bin/activate

Step 3
In your root directory, create a file named requirements.txt and include the following packages:

alembic==1.13.0
blinker==1.7.0
click==8.1.7
colorama==0.4.6
Flask==3.0.0
Flask-Migrate==4.0.5
Flask-SQLAlchemy==3.1.1
greenlet==3.0.2
itsdangerous==2.1.2
Jinja2==3.1.2
Mako==1.3.0
MarkupSafe==2.1.3
postgres==4.0
psycopg2-binary==2.9.9
psycopg2-pool==1.1
SQLAlchemy==2.0.23
typing_extensions==4.9.0
Werkzeug==3.0.1

Step 4
Install the required packages:

pip install -r requirements.txt

Step 5

in your root directory create the following folder

flaskr

inside the flaskr folder create a pthon file called "__init__.py"

inside the root diretory create 2 files

app.py: this will be the root of our application.
models.py: this will contain our database and model setup
config.py: this will contain all the configurations we need for our app

Still inside the root directory create 2 folders

static : this will contain any images we want to use in our project
templates: this will contai the html templates for our todo app

Your directories and files should be organised as shown below:

- flaskr
  - __init__.py
- app.py
- models.py
- config.py
- static [folder]
- templates [folder]
  - index.html

Step 6
Inside the templates folder, create an index.html file with the following content:


<html>
<title>Todo App</title>
<body>
    <h1>App is working</h1>
</body>
</html>

Include the code below in your app.py file to create the root route and render the index.html page.

from flask import Flask, render_template, request, redirect, url_for, flash, jsonify
from flask_migrate import Migrate
from models import db

app = Flask(__name__)
# app.config.from_object('config')
# app.app_context().push()
# db.init_app(app)
# migrate = Migrate(app, db)


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




if __name__ == '__main__':
    app.run(debug=True)

Some parts are commented out because for now we won't be adding a database.

Include the code below in your config.py file to setup your configuration parameters.

import os
SECRET_KEY = os.urandom(32)
# Grabs the folder where the script runs.
basedir = os.path.abspath(os.path.dirname(__file__))

# Enable debug mode.
DEBUG = True

# Connect to the database


# TODO IMPLEMENT DATABASE URL
SQLALCHEMY_DATABASE_URI = ''
SQLALCHEMY_TRACK_MODIFICATIONS = False

Ensure to add the url to your postgresql database in "SQLALCHEMY_DATABASE_URI"

Include the code below in your models.py file.

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

Step 7

now in your command teminal execute python app.py to start the flask application, go to the url provided, you should see App is working on the page

python app.py

And that's all for this particular part of our Building a basic Todo App with Flask tutorial. Go to this link to access the next part of the tuorial that deals with model creation, environment variables and database creation and migration.

Next: Part 2: Building a User-Friendly Todo App with Flask - A Step-by-Step Guide for setting up our models with foreign key relationships

Todo Series Parts:

Part 1: Building a User-Friendly Todo App with Flask - A Step-by-Step Guide for Setting up Flask Application template

Author

Comment

Comments

Similar Content

Privacy Policy