Building a Web App with HTMX and Flask: No Frontend Frameworks Needed

 

Have you ever felt like there were too many latest front-end frameworks to choose from, like React, Vue, and Angular? While I agree that they are strong, there are times when you just need something simple, light, and easy to handle. Now come HTMX and Flask. 

Would you believe me if I told you that you don't need to use complicated JavaScript tools to make a dynamic web app? Does not it seem too good to be true? This blog post will show you how to make a fully working web app with HTMX for the front end and Flask for the back end. Are you ready to make it easy to make apps? Let's start now!

 

What is HTMX and Why Use It?

Okay, let's start with HTMX. What is it, and why should you care about it? HTMX is a little yet powerful JavaScript utility that lets you create web pages dynamic. You do not need any complicated front-end frameworks when you use it. Using basic HTML elements, HTMX lets you submit server queries and change sections of your website without reloading.

Think of it as HTML that can do anything. It is simple to use and doesn't require any JavaScript tools to make dynamic apps. Such as; a button on your website may initiate an HTTP request to your backend and update portion of the page with the result with minimum setup.

The best part? There is no need for a heavy front-end system. If you know HTML, it is easy to make dynamic content and keep your app running quickly. It is the best way to add interaction without making things too complex.

Introduction to Flask

Let's talk about Flask now. Flask is a lightweight Python web platform that is great for making small to medium-sized web apps. If you have not heard of it yet, you should. People like it because it is simple and easy to use. This is why developers who want to quickly make an app without dealing with a lot of configurations love it.

When it comes to routes, templates, or handling data, Flask does not force you to do things a certain way. You can develop things your way and select your tools.

Additionally, Flask includes a built-in development server and supports Jinja2 scripting, which makes adding interactive content to your HTML pages very simple. It works great with HTMX on the back end and is easy to set up and handle.

Setting Up the Development Environment

Are you ready to start? Now, let us set up your work environment. It will be easy to do this if you know Python! Start by making a new folder for the task and setting up a virtual environment to keep things neat:

mkdir flask_htmx_app
cd flask_htmx_app
python3 -m venv venv
source venv/bin/activate # For Mac/Linux
myenv\Scripts\activate    # For Windows

Let's install Flask and HTMX now. Flask is easy to install with pip, and all we need to do for HTMX is add a CDN link to the HTML:

pip install flask

To add the HTMX CDN to our base HTML design, we will need to install Flask first. Add the following to your base.html file:

<script src="https://unpkg.com/htmx.org@1.8.4"></script>

We have now set up the basics. Now you can start building!

Building a Simple Web App 

Now let's make something happen! We are planning to develop a simple "To-Do List" app that enables individuals add things to do without having to reload the page. Flask will handle the server, and HTMX will make changes to the frontend on the fly.

Start by creating a basic Flask route in your app.py file:

from flask import Flask, render_template, request

app = Flask(__name__)

tasks = []

@app.route('/')
def index():
    return render_template('index.html', tasks=tasks)

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

This route gives you a list of things to do. Let's go to index.html now. We will use HTMX to add new tasks without refreshing the whole page.

<form hx-post="/add" hx-target="#task-list" hx-swap="outerHTML">
    <input type="text" name="task" placeholder="New task" required>
    <button type="submit">Add Task</button>
</form>

<div id="task-list">
    {% for task in tasks %}
        <p>{{ task }}</p>
    {% endfor %}
</div>

When you add the hx-post attribute, HTMX will send a POST request to the /add route. This will dynamically update the task list. Cool, right?

Handling Dynamic Content with HTMX

Let's set up the back end because now that the form is ready. To handle adding tasks, we will set up a POST route:

@app.route('/add', methods=['POST'])
def add_task():
    task = request.form['task']
   tasks.append(task)  # In a real app, save this to a database
    return render_template('index.html', tasks=tasks)

Flask gets the task, adds it to the list, and sends back the new task list, which HTMX uses to make changes to the front end. 

One of the best things about HTMX is that it lets you get dynamic, real-time changes with very little JavaScript. There are no complicated front-end tools; just plain HTML. It is all based on a few characteristics. 

Enhancing User Experience with HTMX 

Let's add some nice touches to make the experience better for the users. When a task is added, we may scroll to the bottom of the list or display a loading spinner. 

These features are easy to add with HTMX. You can use the hx-trigger property to set off certain events, like when the task is added:

<button hx-trigger="click" hx-post="/add" hx-target="#task-list" hx-swap="outerHTML">Add Task</button>

You may even set up HTMX to do more advanced things, including leaving tasks undone or deleting them, without having to reload the page. 

Conclusion 

You can now make a dynamic web app using Flask and HTMX without needing a full frontend framework. Flask took care of the backend and HTMX took care of the interaction, so you developed a basic app that is easy to keep up with. Are you ready to go deeper? There are a lot of options!