How to build & deploy Flask project on Glitch?

Build & Deploy Flask on Glitch

Overview (Flask)

Perhaps everyone is familiar with Flask, a framework from Python. Flask depends on the Werkzeug WSGI toolkit, the Jinja sample engine,… to build BE & FE application.

Structure

my_flask_project/
│
├── app.py
├── templates/
│   ├── index.html
│   ├── ...
│
├── static/
│   ├── css/
│   │   ├── style.css
│   │   ├── ...
│   │
│   ├── js/
│   │   ├── script.js
│   │   ├── ...
│   │
│   ├── img/
│       ├── logo.png
│       ├── ...
│
├── models/
│   ├── user.py
│   ├── ...
│
├── routes/
│   ├── user_routes.py
│   ├── auth_routes.py
│   ├── ...
│
└── config.py

• app.py: This is the main entry point of your Flask application where you create an instance of the Flask class and define routes and views.
• templates/: This directory contains HTML templates used for rendering dynamic content using the Jinja2 templating engine. Each template file represents a different page or component of your web application.
• static/: This directory is used for storing static files such as CSS stylesheets, JavaScript files, images, etc. These files are served directly to the client without any processing by Flask.
• models/: If your application involves working with databases or data models, you can create a directory to store your database models or data access code.
• routes/: It’s common practice to organize your route handlers into separate files within a directory. For example, you might have a user_routes.py file for handling user-related routes, an auth_routes.py file for authentication routes, etc.
• config.py: This file contains configuration settings for your Flask application such as database connection strings, secret keys, etc. Separating configuration from your main application logic helps in keeping your code modular and maintainable.
• requirements.txt: This file lists all the Python dependencies required by your Flask application. You can generate this file using pip freeze > requirements.txt after installing all necessary packages.

Build

To build a Flask project, follow these steps:

• You need to install flask by adding flask into requirements.txt
• Create a directory for your project, navigate into it, then install lib & run flask project:

mkdir my_flask_project
cd my_flask_project
pip install -r requirements.txt
python app.py

Open a web browser and navigate to http://localhost:5000 to see your Flask application in action.

As you develop your application, continue to iterate on your codebase, adding features, fixing bugs, and refining your project structure as needed.

But the main purpose of the article is about how to build and run a flask project on glitch, everything will be available in the following link for reference: https://www.geeksforgeeks.org/flask-tutorial/

About Glitch

Glitch is an application that allows developers to build projects publicly, supported from static web creation, front-end projects with Angular/React, or full-stack web with NodeJS.

If you’re a new user, figuring out how to implement a Flask project on Glitch might seem like a daunting task, especially since it’s not available as an option. This article aims to provide you with step-by-step instructions on how to do this.

Build & Deploy Flask on Glitch

Create a New Project

Visit Glitch.com and sign in or sign up for an account. Once logged in, click on “New Project” to create a new project.

Here, our focus will be on preparing the environment for the project. Select glitch-hello-website to proceed.

Structure of project

After selecting glitch-hello-website for the project, we now need to adjust the initial project structure to resemble that of a Flask project.

Writing the Flask Application

In app.py file, import Flask and create an instance of the Flask class. Define routes to handle different URLs and their corresponding functionality using route decorators. For example:

from flask import Flask, render_template

app = Flask(__name__)

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

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

Creating Templates

Create HTML templates for different pages of this website inside a folder named templates. Flask uses Jinja2 templating engine, which allows us to inject Python code into your HTML templates. For example, create a file named index.html inside the templates folder:

<!DOCTYPE html>
<html>
  <head>
    <title>Home Page</title>
  </head>
  <body>
    <h1>Welcome to My Website!</h1>
    <p>This is the home page.</p>
  </body>
</html>

Select the Terminal section at the bottom of the glitch page to switch to command processing. You can then run this project using the following commands:

pip install -r requirements.txt
python app.py

You can view the process of your project:

So, as of now, we can build a project using Flask on Glitch. How can we set it up to automatically deploy when we turn it off and access it again?

Automatically deploy Flask

Environment Variables

The .env file is for storing secrets for your app, like an API key. Any project member can see the contents in the same way that you can, and everyone else can just see the variable names.

GLITCH_DEBUGGER=true
 # Scrubbed by Glitch 2024-03-27T17:24:18+0000

SH File

An SH file is a script programmed for bash, a type of Unix shell (Bourne-Again Shell). It contains instructions written in the Bash language and can be executed by typing text commands within the shell’s command-line interface.

Bcuz this mode of Glitch does not support Flask, we need to create an alternative, which is a virtual environment for Python.

#!/bin/bash

set -eu

export PYTHONUNBUFFERED=true

VIRTUALENV=.data/venv

if [ ! -d $VIRTUALENV ]; then
  python3 -m venv $VIRTUALENV
fi

if [ ! -f $VIRTUALENV/bin/pip ]; then
  source $VIRTUALENV/bin/activate
  curl --silent --show-error --retry 5 https://bootstrap.pypa.io/get-pip.py | python
  deactivate
fi

$VIRTUALENV/bin/pip3 install -r requirements.txt

$VIRTUALENV/bin/python3 app.py

Detail:

• #!/bin/bash is called a shebang and specifies that the script should be executed using /bin/bash.
• set -eu: This line is to ensure that the script will stop immediately if there is an error (-e) or variable is not defined (-u). This helps protect the program from unwanted errors.
• export PYTHONUNBUFFERED=true: Set the PYTHONUNBUFFERED environment variable so that Python does not buffer the output data. This can be useful in debugging or when running in a non-terminal environment.
• VIRTUALENV=.data/venv: Define the variable VIRTUALENV as the path to the virtual environment, in this code: .data/venv
• The if condition create a virtual directory & install pip
• The last 2 commands will install the lib in the requirements.txt and deploy flask with python app.py

With python version 2.x, you can use this sh file:

#!/bin/bash

virtualenv .data/venv

source .data/venv/bin/activate

pip install -r requirements.txt

python app.py

deactivate

Conclusion

By following the aforementioned steps, you can effortlessly develop and deploy a Flask application on Glitch. If you find this guide helpful, please consider sharing it with your friends.

Buy me a coffee ☕: https://www.buymeacoffee.com/spid3r

Thank you for visting!