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 routingHTMLx
: manages forms submit (no JS)
Auth
: Sign IN, Sign UPMisc
: 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 [email protected]: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:
<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