The Definitive Guide to Hotwire and Django

Introduction
	What is Hotwire
	Objectives
	What is included
	Demo
	What if you have problem or suggestions
	Changelog
Create A project
	Objective
	Create Django Project
	Install python-webpack-boilerplate
	Run frontend project
	Install Tailwind
	Write Tailwind CSS
	Test in Django Template
	JIT
	Setup Live Reload
Setup Turbo
	Objective
	Turbo
	Preparation
	Setup Turbo
	Template
	Reference
Create Task App
	Objective
	Tasks App
	Model
	Form
Render Django Form with Tailwind CSS Style
	Objectives
	Django App
	View
	Template
	URL
	Manual test
	tailwindcss-forms
	crispy-tailwind
	JIT
	Test Again
Explore Turbo Drive (Page Navigation)
	Objective
	List Page
	Add NavBar
	How Turbo Drive Works
	Page Navigation Basics
	Simple Tests
Explore Turbo Drive (Cache)
	Objective
	turbo:before-cache
	data-turbo-cache
	turbo-cache-control
	Improve Page Navigation Style
Explore Turbo Drive (Javascript, CSS)
	Objective
	Where to put Javascript bundle
	defer
	Templates
	Manual Test
	DOMContentLoaded
	Handle Script in
	Handle Script in
	Auto Reload on Assets Change
	Inline Script
Explore Turbo Drive (3-party Javascript)
	Objective
	Problem
	Why did it happen
	Solution
Turbo Drive and Django form validation
	Objective
	Django Form Validation
	View
	Redirect After Form Submission
	Workflow
	Unprocessable Entity
Prepare to learn Turbo Frame
	Objective
	Django App
	View
	Template
	Frontend
	URL
	Manual test
Turbo Frame Basics
	Objective
	What is Turbo Frame
	Simple Example
	Add Turbo Frame
	Notes
Turbo Frame and Django Form
	Objective
	Load Django Form in Turbo Frame
	Form action
	Form response
	Install django-turbo-response
	Return Turbo Response using django-turbo-response
	Fix Form on the standard page
Inline Editing with Turbo Frames
	Objective
	Detail
	Edit
	Delete
	Manual Test
Prepare Django app to learn Stimulus Basics
	Objective
	Django App
	View
	Template
	Frontend
	URL
	Manual test
Stimulus Controller Basics
	Objective
	Introduction
	Install Stimulus
	First Stimulus Controller
	Register Controller
	How to use the controller
	Workflow
	AutoLoading Controllers
Stimulus Controller (Actions, Values)
	Objective
	Controller Instance State
	Getter, Setter
	Stimulus Values
	Actions
Stimulus Controller (Targets, CSS classes)
	Objective
	Improve style
	Target
	Multiple Target
	CSS classes
	Controller
Stimulus Controller (Lifecycle)
	Objective
	Load page content with Turbo Frame
	Manual Test
	Lifecycle Callback
	initialize vs connect
	Page Cache
Stimulus Controller (3-party Resources)
	Objective
	Background
	Stimulus Controller
	Manual Test
	Content Loader
Stimulus Controller (Date Picker)
	Objective
	Preparation
	Frontend
	Manual Test
	Custom Form Widget
	Flatpickr
	Notes:
Stimulus Controller (Form Submission)
	Objective
	Workflow
	Spinner
	Form Controller
	CSS
	Template
Prepare Django app to learn Stimulus and Turbo Frame
	Objective
	Django App
	View
	Template
	Frontend
	URL
	Manual test
Stimulus Controller (Flash Message)
	Objective
	tailwindcss-stimulus-components
	View
	MESSAGE_TAGS
	Template
	URL
	Test
	Notes:
Build Stimulus Controller for Modal
	Objective
	View
	Template
	Frontend
	Manual Test
	Make Tailwind JIT work with 3-party npm package
Load Form in the Modal
	Objective
	Extend Modal Controller
	Template
	Manual Test
	Lazy-loaded frame
	Turbo Frame
Handle Form Submission in Modal
	Objective
	Manual Test
	Close Modal After successful form submission
	Async method
Full Page Redirect in Modal
	Objective
	Problem
	Solution 1
	Solution 2
Communication Among Stimulus Controllers Via Events
	Objective
	Basics
	Preparation
	Controller
	Send Message from Child to Parent
	Send Message from Parent to Child
Prepare Django app to learn Stimulus Stream
	Objective
	Django App
	View
	Template
	Frontend
	URL
	Manual test
Import Turbo Frame
	Objective
	Index Page
	Load Django Form in Turbo Frame
	Return Turbo Frame
	Question
Turbo Stream Basics
	Objective
	What is Turbo Stream
	Simple Test
	Message
	text/vnd.turbo-stream.html
	Conclusion
Use Turbo Stream to improve inline editing
	Objective
	List Page
	Detail Page
	Edit Page
	Delete Page
	Manual Test
Filtering on the List Page
	Objective
	Filter
	Pagination
	Turbo Frame
	Loading Opacity
Auto Search
	Objective
	Controller
	Template
	Problem
	Turbo Stream Header
	View
RealTime Update based on Websocket (Part 1)
	Websocket
	Redis
	django-channels
	Routing
	Stimulus Controller
	Test
RealTime Update based on Websocket (Part 2)
	Signal Receiver
	Test
	ReconnectingWebSocket
	Notes:
	If you want to dive deeper:
Next Steps
	Learning Resources
	My Next Step
	Thank You