Presentation and supporting materials for my Hack the North 2024 workshop "Hypermedia & HTMX - A Different Approach to Full Stack Development"
Created and presented by Jeremie Bornais.
Slides are available here
You're currently looking at the starter code. Use this branch if you're following along with the workshop or if you want a starting point without HTMX fully integrated yet.
If you'd like to see sample finished code, with HTMX fully integrated, check out the sample-completed branch.
Moreover, if you'd like to see how we got from the starter code to the sample finished code, check out this PR which highlights all of the differences/updates.
- Main HTMX.org website
- HTMX Docs
- HTMX Code Snippets (HIGHLY recommend checking this one out)
- HTMX Essays (Check this out if you want to learn the nerdy theory behind HTMX - I had a lot of fun going through these)
- Hypermedia Systems Book (A more complete look into the theory behind Hypermedia and HTMX. Freely available online)
- HTMX in 100 Seconds By Fireship
- My Flask Workshop (I've given this talk several times - if you're newer to Flask and/or web development, you may want to check this out)
- Official Flask Website
- Make sure you have Python and pip installed
- Clone this git repository
git clone https://github.com/jere-mie/flask-workshop- Install Python libraries
python3 -m pip install -r requirements.txt- Run the Flask server
python3 app.py- Head to http://127.0.0.1:5000/ to preview the web app!
If you'd like to use GitHub Codespaces instead of running the application locally, you can skip the first two steps. Instead, ensure you're signed into GitHub, then navigate to this repository and click Code > Codespaces > Create Codespace on main. This will open up a web version of VSCode with access to a full Linux shell.
This is the main Flask app, containing all of the routes and backend logic
This file contains all of the files and folders you do not want added to the git repository. Generally you include things like config files, database files, the venv folder, and the pycache folder.
This folder contains all static files you want to use in your Flask app. This would include css files, images, javascript files, etc. In our case, it includes HTMX and Bootstrap.
This folder contains all of your HTML templates. Usually you use a layout.html for things like metadata and a navbar, and then you create other templates that extend this template.
This is the SQLite database for our application. It will be automatically created if it doesn't exist when running app.py. If you want to start your database from scratch, simply delete this file.
Lists the third-party Python libraries used in our application.