Create a Python-backed frontend with FastAPI, htmx, and TailwindCSS. Build it from scratch and follow the guide. Alternatively, clone the repo/use the template, or better yet, spin up a Codespace and start right away!
- 📝 Table of Contents
- 🧐 About
- 🏁 Getting Started
- 🔧 Running the tests
- 🚗 💨 Need to Catch Up?
- 🎈 Guide
- ⛏️ Built Using
- ✍️ Authors
- 🎉 Acknowledgements
Build a beautiful web application using nothing more than Python, htmx, and TailwindCSS. Harness the power of Jinja templates and server-side rendering to create a dynamic, REST-ful web app.
This repository was prepared for a workshop on how to create a python-backed frontend, featuring Jinja templates for HTML rendering, TailwindCSS for style, and htmx for pizzazz! 😎
The workshop consists of four chapters, each introducing an additional tool on the road to creating a beautiful* Python-backed frontend.
*Note: Beauty is in the eye of the beholder.
The example app was created with Python 3.11, but it is likely compatible with earlier versions. However, I would highly recommend using the latest version of Python. The rest of the dependencies are listed in the requirements.txt file.
fastapi[all]
jinja2
jinja2-fragments
python-multipart
pytest
pytailwindcss
tinydb
The fastapi[all] dependency installs some other optional dependencies and features. It also includes uvicorn, which is used as the server to run your code. (You could choose to just use fastapi and uvicorn[standard] separately, if you prefer.)
Why is there a
pyproject.tomlfile? If you use a package manager (i.e., I usepdm), you can use your package manager to install dependencies. Otherwise, you can go the more traditional route using therequirements.txtfile. If you use Codespaces, you won't need to worry about dependencies!
Press the <> Code button above and select Create a Codespace on main. This will open a new window in your browser, where you can run the code in a virtual environment.
Selecting.Codespaces.mp4
Create a copy of the repo using the Use this template button above. Select Create a new repository.
Warning Be sure to select
Include all brancheswhen cloning the repo.
After cloning or using this template, you will need to create a virtual environment. Navigate to the location where you have cloned the project (your project root) and run the following command in your terminal:
python -m venv .venv
This will create a .venv directory within your project.
Next, activate your environment:
# On Windows
.\.venv\Scripts\activate
# On MacOS/Linux
$ source .venv/bin/activate
Then, install the requirements:
python -m pip install -r requirements.txt
After activating your virtual environment, you can run tests by typing pytest on the command line. This makes sure that your application runs and can generate a "Hello World" message.
pytest
If everything has gone well so far, all tests should pass.
If you are using Codespaces, there is a script you can use to catch up to the current chapter. Just run the following command in your terminal and choose the section we're on:
. catchup.shdemo.mp4
Or (if you're developing locally) to catch up manually...
Checkout the branch that corresponds to the appropriate section (see below).
This repo was created primarily to aid in a workshop setting, so your mileage may vary. Feel free to clone it and make it your own. But most of all, have fun! 🥳
To take a more structured approach, you can follow sequentially with the accompanying markdown files for each branch of the repo.
These Chapters are all located in the "docs" directory. The direct links to the corresponding chapters are listed here for convenience.
| Chapter | Title | Branch |
|---|---|---|
| Preface | Getting Started | main |
| Chapter 1 | Using Jinja Templates to Render HTML | 01_templates |
| Chapter 2 | Harnessing TailwindCSS for Consistent Design | 02_tailwindcss |
| Chapter 3 | A Thin Database Layer | 03_tinydb |
| Chapter 4 | Modern Browser Features Directly from HTML | 04_htmx |
- FastAPI
- Jinja2
- TailwindCSS
- TinyDB
- htmx
- @tataraba - Mario Munoz, Python By Night
- @kjaymiller - Jay Miller, Senior Cloud Advocate-Python, Microsoft