/simplesite

Primary LanguagePythonMIT LicenseMIT

Simple Site

Featuring htmx and TailwindCSS

Status GitHub Issues GitHub Pull Requests License


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!

Project demo

๐Ÿ“ Table of Contents

๐Ÿง About

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

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.

Selecting.Codespaces.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

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
demo.mp4

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

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

๐ŸŽˆ Guide

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.

โœจBuild a Python-Backed Frontend With HTMX and TailwindCSSโœจ

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

โ›๏ธ Built Using

  • FastAPI
  • Jinja2
  • TailwindCSS
  • TinyDB
  • htmx

โœ๏ธ Authors

๐ŸŽ‰ Acknowledgements

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