Open-Source sample that uses Flask and HTMLx for the frontend logic. For newcomers, Flask is a leading web framework powered by Python and HTMLx is a lightweight JS utility library that allows accessing AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly in HTML.

Features

• Up-to-date Dependencies
• Tech Stack:
  • Flask: manages authentication and routing
  • HTMLx: manages forms submit (no JS)
• Auth: Sign IN, Sign UP
• Misc: SQLite DB, SQLAlchemy, Forms Validation

Links

• 👉 More Flask Apps and Dashboards provided by AppSeed
• 👉 Free Support via Email and Discord.

To get started with the application in the machine

• Python3 - Make sure python3 and highr=er is installed on your system before proceeding to installation instructions.
• Git - Download and install Git.OSX and linux comes preinstalled with Git. Download and install Git in your windows machine if not installed yet.
• Pip - We will use pip to install required packages to be used in the project.

👉 Step 1 - Cloning the repository.

$ git clone git@github.com:app-generator/sample-flask-htmlx.git // OR via HTTPS $ git clone https://github.com/app-generator/sample-flask-htmlx.git

👉 Step 2 - Prepare Environment (create virtual environment)

$ # Virtualenv modules installation (Unix based systems) $ virtualenv env $ source env/bin/activate $ $ # Virtualenv modules installation (Windows based systems) $ # virtualenv env $ # .\env\Scripts\activate

👉 Step 3 - Install Dependencies

$ # Install requirements $ pip3 install -r requirements.txt

👉 Step 4 - Create Database

$ flask shell # launch Flask Shell >>> >>> from app import db >>> db.create_all()

👉 Step 4 - Create Database

$ flask run

👉 Step 5 - Start the APP

$ flask run

The app should be up & running on address http://localhost:5000

All forms managed by the app use HTMLx directives. Here is the Login Form Source Code and used HTMLx directives:

• hx-swap
• hx-post
• hx-target

 <form hx-swap="outerHTML" hx-post="{{ url_for('auth.signin') }}" hx-push-url="true" hx-target=".content" class="p-5 bg-white shadow mh-100 col-sm-8 col-md-6 col-lg-4" novalidate > <p class="h3 text-center p-2">SignIn</p> <!-- Truncated content --> <div class="form-input p-1"> {{form.email.label}} {{form.email(class_="form-control")}} </div> <div class="form-input p-1"> {{form.password.label}} {{form.password(class_="form-control")}} </div> <button class="btn p-2 px-3 rounded btn-primary h1" type="submit">Sign In</button> </form>

Flask HTMLx Sample - Open-Source Sample provided by AppSeed