Building a User-Friendly Todo App with Flask: A Step-by-Step Guide (part 1)
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\activateMac
# 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 = FalseEnsure 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
