Flask & HTMLx - Open-Source Sample
Tags: flask, htmlx, opensource, webdev
Published: 2022-05-01 15:39:11

---
title: Flask & HTMLx - Open-Source Sample
published: true
description: Open-Source sample that uses Flask as the backend framework and HTMLx for the frontend logic
tags: flask, htmlx, opensource, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pw7hnxg9l3emef0cy9n.png
canonical_url: https://blog.appseed.us/flask-and-htmlx-open-source-sample/
---
Hello Coders!

This article presents an open-source sample crafted with [Flask and HTMLx](https://blog.appseed.us/flask-and-htmlx-open-source-sample/) 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 Sample](https://github.com/app-generator/sample-flask-htmlx) - source code
- 👉 Free [Support](https://appseed.us/support/) via Email and [Discord](https://discord.gg/fZC6hup).

---

![Flask & HTMLx (Open-Source Sample) - GIF animated presentation ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aylm12vdetkglod4xb6s.gif)

---

## ✨ 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.

```bash
$ git clone https://github.com/app-generator/sample-flask-htmlx.git
```

--- 

> 👉 **Step 2** - Prepare Environment (create virtual environment)

```bash
$ # 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 

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

---

> 👉 **Step 4** - Create Database & Tables

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

---

> 👉 **Step 5** - Start the APP

```bash
$ flask run
```

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:

- [hx-swap](https://htmx.org/attributes/hx-swap/)
- [hx-post](https://htmx.org/attributes/hx-post/)
- [hx-target](https://htmx.org/attributes/hx-target/)

```html
    <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>
```

---

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

- 👉 [Flask Charts.JS via Flask-RestX](https://blog.appseed.us/flask-charts-js-and-flask-restx-s92/) - With Sample
- 👉 [Django Charts via DRF](https://blog.appseed.us/django-charts-via-drf-and-charts-js/) - Step-by-step tutorial  

---

![Flask Charts.JS and Flask-RestX - Open-Source Sample.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl3yt4qikab5meosa4zz.png)