High speed development with Flask, HTMX, TailwindCSS and AlpineJS

This is a demo project to show how to use Flask, HTMX, TailwindCSS and AlpineJS to build a web application with a modern development workflow.

Read the full workshop documentation here: tecladocode.github.io/flask-htmx-tailwind-alpine-workshop/.

Getting started

Run the final app

The final app code is in the app folder.

1. Clone this repository
2. Run rye sync to install Python, create the virtual environment, and install dependencies.
3. Run the application with rye run flask run
4. Open the application in your browser at http://localhost:5000
5. Start developing!

Run the workshop documentation with rye run mkdocs serve.

Check out the workshop steps

Each workshop step has a final code attached to it. The steps are in the steps folder.

Here's a mapping of the workshop links to their code folders:

• https://tecladocode.github.io/flask-htmx-tailwind-alpine-workshop/03-website-without-reloading/ ➡️ steps/01-website-without-reloading
• https://tecladocode.github.io/flask-htmx-tailwind-alpine-workshop/04-dynamic-pagination/ ➡️ steps/02-dynamic-pagination
• https://tecladocode.github.io/flask-htmx-tailwind-alpine-workshop/05-adding-feeds/ ➡️ steps/03-01-adding-feeds-htmx and steps/03-02-adding-feeds-alpine
• https://tecladocode.github.io/flask-htmx-tailwind-alpine-workshop/06-read-status/ ➡️ steps/04-read-status
• https://tecladocode.github.io/flask-htmx-tailwind-alpine-workshop/07-unread-number-badges/ ➡️ steps/05-unread-numbers

I hope you'll enjoy the workshop!

Want to learn more about Python, web development, and REST APIs? Check out our courses at https://teclado.com!