Table Of ContentContents
1 Introduction 1
1.1 WhatisHotwire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Whatisincluded. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.4 Demo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.5 Whatifyouhaveproblemorsuggestions . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.6 Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2 CreateAproject 3
2.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 CreateDjangoProject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.3 Installpython-webpack-boilerplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.4 Runfrontendproject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.5 InstallTailwind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.6 WriteTailwindCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.7 TestinDjangoTemplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.8 JIT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.9 SetupLiveReload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3 SetupTurbo 12
3.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2 Turbo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.3 Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.4 SetupTurbo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.5 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.6 Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4 CreateTaskApp 16
4.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.2 TasksApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.3 Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.4 Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
5 RenderDjangoFormwithTailwindCSSStyle 18
5.1 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
5.2 DjangoApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
5.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
5.4 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
5.5 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
5.6 Manualtest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
5.7 tailwindcss-forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
5.8 crispy-tailwind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5.9 JIT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
5.10 TestAgain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
6 ExploreTurboDrive(PageNavigation) 27
6.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
i
6.2 ListPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
6.3 AddNavBar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
6.4 HowTurboDriveWorks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
6.5 PageNavigationBasics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
6.6 SimpleTests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
7 ExploreTurboDrive(Cache) 31
7.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
7.2 turbo:before-cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
7.3 data-turbo-cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
7.4 turbo-cache-control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
7.5 ImprovePageNavigationStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
8 ExploreTurboDrive(Javascript,CSS) 35
8.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
8.2 WheretoputJavascriptbundle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
8.3 defer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
8.4 Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
8.5 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
8.6 DOMContentLoaded . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
8.7 HandleScriptin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
8.8 HandleScriptin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
8.9 AutoReloadonAssetsChange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
8.10 InlineScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
9 ExploreTurboDrive(3-partyJavascript) 41
9.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
9.2 Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
9.3 Whydidithappen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
9.4 Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
10 TurboDriveandDjangoformvalidation 43
10.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
10.2 DjangoFormValidation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
10.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
10.4 RedirectAfterFormSubmission . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
10.5 Workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
10.6 UnprocessableEntity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
11 PreparetolearnTurboFrame 47
11.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
11.2 DjangoApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
11.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
11.4 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
11.5 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
11.6 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
11.7 Manualtest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
12 TurboFrameBasics 55
12.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
12.2 WhatisTurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
12.3 SimpleExample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
12.4 AddTurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
12.5 Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
13 TurboFrameandDjangoForm 60
13.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
13.2 LoadDjangoForminTurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
13.3 Formaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
ii
13.4 Formresponse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
13.5 Installdjango-turbo-response . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
13.6 ReturnTurboResponseusingdjango-turbo-response . . . . . . . . . . . . . . . . . . . . . 64
13.7 FixFormonthestandardpage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
14 InlineEditingwithTurboFrames 67
14.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
14.2 Detail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
14.3 Edit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
14.4 Delete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
14.5 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
15 PrepareDjangoapptolearnStimulusBasics 71
15.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
15.2 DjangoApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
15.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
15.4 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
15.5 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
15.6 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
15.7 Manualtest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
16 StimulusControllerBasics 75
16.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
16.2 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
16.3 InstallStimulus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
16.4 FirstStimulusController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
16.5 RegisterController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
16.6 Howtousethecontroller. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
16.7 Workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
16.8 AutoLoadingControllers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
17 StimulusController(Actions,Values) 79
17.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
17.2 ControllerInstanceState . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
17.3 Getter,Setter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
17.4 StimulusValues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
17.5 Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
18 StimulusController(Targets,CSSclasses) 84
18.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
18.2 Improvestyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
18.3 Target . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
18.4 MultipleTarget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
18.5 CSSclasses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
18.6 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
19 StimulusController(Lifecycle) 90
19.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
19.2 LoadpagecontentwithTurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
19.3 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
19.4 LifecycleCallback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
19.5 initializevsconnect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
19.6 PageCache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
20 StimulusController(3-partyResources) 96
20.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
20.2 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
20.3 StimulusController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
20.4 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
iii
20.5 ContentLoader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
21 StimulusController(DatePicker) 99
21.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
21.2 Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
21.3 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
21.4 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
21.5 CustomFormWidget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
21.6 Flatpickr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
21.7 Notes: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
22 StimulusController(FormSubmission) 105
22.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
22.2 Workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
22.3 Spinner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
22.4 FormController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
22.5 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
22.6 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
23 PrepareDjangoapptolearnStimulusandTurboFrame 110
23.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
23.2 DjangoApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
23.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
23.4 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
23.5 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
23.6 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
23.7 Manualtest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
24 StimulusController(FlashMessage) 118
24.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
24.2 tailwindcss-stimulus-components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
24.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
24.4 MESSAGE_TAGS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
24.5 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
24.6 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
24.7 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
24.8 Notes: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
25 BuildStimulusControllerforModal 123
25.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
25.2 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
25.3 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
25.4 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
25.5 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
25.6 MakeTailwindJITworkwith3-partynpmpackage . . . . . . . . . . . . . . . . . . . . . . 126
26 LoadFormintheModal 128
26.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
26.2 ExtendModalController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
26.3 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
26.4 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
26.5 Lazy-loadedframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
26.6 TurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
27 HandleFormSubmissioninModal 133
27.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
27.2 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
27.3 CloseModalAftersuccessfulformsubmission . . . . . . . . . . . . . . . . . . . . . . . . 135
27.4 Asyncmethod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
iv
28 FullPageRedirectinModal 137
28.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
28.2 Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
28.3 Solution1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
28.4 Solution2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
29 CommunicationAmongStimulusControllersViaEvents 140
29.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
29.2 Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
29.3 Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
29.4 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
29.5 SendMessagefromChildtoParent. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
29.6 SendMessagefromParenttoChild. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
30 PrepareDjangoapptolearnStimulusStream 148
30.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
30.2 DjangoApp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
30.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
30.4 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
30.5 Frontend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
30.6 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
30.7 Manualtest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
31 ImportTurboFrame 156
31.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
31.2 IndexPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
31.3 LoadDjangoForminTurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
31.4 ReturnTurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
31.5 Question . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
32 TurboStreamBasics 161
32.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
32.2 WhatisTurboStream . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
32.3 SimpleTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
32.4 Message . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
32.5 text/vnd.turbo-stream.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
32.6 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
33 UseTurboStreamtoimproveinlineediting 166
33.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
33.2 ListPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
33.3 DetailPage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
33.4 EditPage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
33.5 DeletePage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
33.6 ManualTest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
34 FilteringontheListPage 171
34.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
34.2 Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
34.3 Pagination . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
34.4 TurboFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
34.5 LoadingOpacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
35 AutoSearch 177
35.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
35.2 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
35.3 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
35.4 Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
35.5 TurboStreamHeader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
v
35.6 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
36 RealTimeUpdatebasedonWebsocket(Part1) 181
36.1 Websocket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
36.2 Redis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
36.3 django-channels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
36.4 Routing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
36.5 StimulusController . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
36.6 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
37 RealTimeUpdatebasedonWebsocket(Part2) 188
37.1 SignalReceiver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
37.2 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
37.3 ReconnectingWebSocket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
37.4 Notes: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
37.5 Ifyouwanttodivedeeper: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
38 NextSteps 191
38.1 LearningResources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
38.2 MyNextStep . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
38.3 ThankYou . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
vi
Chapter 1
Introduction
1.1 What is Hotwire
Hotwire(HTMLOVERTHEWIRE)isanalternativeapproachtobuildingmodernwebapplicationswithout
usingmuchJavaScriptbysendingHTMLinsteadofJSONoverthewire.
1. ItisbuiltbyBasecamp(itpowerstheHEYemailservice).
2. Ithasahealthyecosystem,andtherearemanyrelevantprojects,tutorialsaboutit.
3. IthasbecomethedefaultfrontendsolutionsinRails.
4. ItisalsoverypopularinthePHPcommunity(Laravel,Symfony).
1.2 Objectives
ThisbookwillhelpyoutolearnHotwirewithDjangoinsystematicway.
Bytheendofthisbook,youwillbeableto:
1. LearnHowtwireincludesTurboandStimulus,andwhatproblemtheycanhelpsolve.
2. JumpstartfrontendprojectbundledbyWebpack.
3. SetupTurboandStimulus.
4. LearnhowpagenavigationworksinTurbo Drive
5. UnderstandwhatiscacheinTurboDriveandhowpreviewworks.
6. LearnwhatisTurbo Frameandhowitworks.
7. BuildInline EditingfeaturewithTurbo Frame.
8. LearnwhatisStimulusandhowStimulus Controllerwork.
9. WhatisStimulusValues,Targes,andActions
10. UseStimulustobuildaDatetimepickerandimproveformsubmissionprocess.
11. UnderstandhowtouseeventstodocommunicationamongStimuluscontrollers
12. BuildType as searchfeaturewithStimulus,TurboandDjango.
13. LearnwhatisTurbo Streamandhowitworks.
14. HowtobuildCollaborative EditingbasedonWebsocketandTurbo Stream
WithHotwire,wecanbringSPA-like experiencetoourDjangowebapp:
1
DefinitiveGuidetoHotwireandDjango,Release1.0.0
1. WedoNOTneedheavyfrontendsolutionsuchasReact,Vue
2. WedoNOTneedJSONandDjangoRESTframework
3. WewilluseDjangoform,Djangotemplatesandtheystillrock.
1.3 What is included
1. APDFebookwhichcontainsabout40chapters.
2. Thesourcecodeoftheproject.
1.4 Demo
Thedemoisavailableonhttp://hotwire-django.herokuapp.com/
1.5 What if you have problem or suggestions
Ifyoumeetproblem,pleasecheckFAQfirst(youcanfinditattheendofthebook)
Ifyouwanttotalkwithme,pleasesendemailto
[email protected]
1.6 Changelog
1.6.1 1.0.0
• 2022-05-27: Published
• 2022-05-25: Reviewfinished
• 2022-02-15: Draftversionfinished
• 2021-12-23: Startedwriting
2 Chapter1. Introduction
Chapter 2
Create A project
2.1 Objective
1. CreateADjangoproject
2. Usepython-webpack-boilerplatetojumpstartfrontendprojectbundledbyWebpack.
3. ImportTailwindCSSasstylesolution.
4. SetupLiveReloadwithwebpack-dev-server
2.2 Create Django Project
IrecommendtousePython3.9+
$ mkdir hotwire_django_project && cd hotwire_django_project
$ python3 -V
Python 3.9.9
# create virtualenv
$ python3 -m venv venv
$ source venv/bin/activate
YoucanalsouseothertoolssuchasPoetry1orPipenv2
Createrequirements.txt
django==3.2
(venv)$ pip install -r requirements.txt
(venv)$ django-admin.py startproject hotwire_django_app .
Youwillseestructurelikethis
.
├── hotwire_django_app
├── env
├── manage.py
└── requirements.txt
Now,let’sgettheprojectrunningonlocalenv.
1https://python-poetry.org/
2https://pipenv.pypa.io/
3
