DEV Community

Cover image for Flask & HTMLx - Open-Source Sample
Sm0ke
Sm0ke

Posted on • Originally published at blog.appseed.us

Flask & HTMLx - Open-Source Sample

Hello Coders!

This article presents an open-source sample crafted with Flask and HTMLx using a simple Bootstrap 5 one-page design. 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. This simple stack might help beginners code full-stack projects without being a JS guru for the frontend layer.

Thanks for reading!


Flask & HTMLx (Open-Source Sample) - GIF animated presentation


✨ How to use the sample

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 come preinstalled with Git. Download and install Git on your windows machine if not installed yet.
  • Pip - We will use pip to install the required packages to be used in the project.

👉 Step 1 - cloning the repository.

$ git clone https://github.com/app-generator/sample-flask-htmlx.git
Enter fullscreen mode Exit fullscreen mode

👉 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
Enter fullscreen mode Exit fullscreen mode

👉 Step 3 - Install Dependencies

$ # Install requirements
$ pip3 install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

👉 Step 4 - Create Database & Tables

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

👉 Step 5 - Start the APP

$ flask run
Enter fullscreen mode Exit fullscreen mode

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


✨ HTMLx

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

    <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>
Enter fullscreen mode Exit fullscreen mode

Thanks for reading! For more resources, feel free to access:


Flask Charts.JS and Flask-RestX - Open-Source Sample.

Discussion (6)

Collapse
souksyp profile image
Souk Syp.

HTMLx ✨✨

Collapse
uithemes profile image
ui-themes

Thanks for writing & for the free sample. Can you provide more info (pro & cons) for HTMLx?

Collapse
sm0ke profile image
Sm0ke Author

Ty for reading!
In a single sentence htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML (copy/pasted from HTMLx help).

HTMLx basically simplifies the HTML / Backend communication using directives instead of using JS. Some developers dislike coding JS and prefer to use HTMLx as an alternative.

🚀🚀

Collapse
crearesite profile image
WebsiteMarket

HTMLx looks promising ..

Collapse
sm0ke profile image
Sm0ke Author

🚀🚀

Collapse
rhondalillie profile image
RhondaLillie

Flask and HTMLx - the open source sample information I've been trying to find for a long time. Thank you for writing this information. Spell to break up relationship