Awesome

📝 Table of Contents

• 📝 Table of Contents
• 🧐 About
• 🏁 Getting Started
  • Prerequisites
  • Installing
    • Using Codespaces
    • Locally
• 🔧 Running the tests
• 🚗 💨 Need to Catch Up?
• 🎈 Guide
  • :sparkles:Build a Python-Backed Frontend With HTMX and TailwindCSS:sparkles:
• ⛏️ Built Using
• ✍️ Authors
• 🎉 Acknowledgements

🧐 About <a name = "about"></a>

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.

🏁 Getting Started <a name = "getting_started"></a>

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.

Prerequisites

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.toml file? If you use a package manager (i.e., I use pdm), you can use your package manager to install dependencies. Otherwise, you can go the more traditional route using the requirements.txt file. If you use Codespaces, you won't need to worry about dependencies!

Installing

Using Codespaces

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.

https://user-images.githubusercontent.com/8632637/228152014-a73297f5-dfd7-400c-96b1-17239dcdb633.mp4

Locally

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 branches when 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

🔧 Running the tests <a name = "tests"></a>

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.

🚗 💨 Need to Catch Up?

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.sh

https://user-images.githubusercontent.com/8632637/228153775-a3ca38fa-c467-402d-bf60-5c55b0f9b9e9.mp4

Or (if you're developing locally) to catch up manually...

Checkout the branch that corresponds to the appropriate section (see below).

🎈 Guide <a name="guide"></a>

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.

:sparkles:Build a Python-Backed Frontend With HTMX and TailwindCSS:sparkles:

⛏️ Built Using <a name = "built_using"></a>

• FastAPI
• Jinja2
• TailwindCSS
• TinyDB
• htmx

✍️ Authors <a name = "authors"></a>

• @tataraba - Mario Munoz, Python By Night

🎉 Acknowledgements <a name = "acknowledgement"></a>

• @kjaymiller - Jay Miller, Senior Cloud Advocate-Python, Microsoft