Hot-reload with templ proxy and air

[leandergangso]

I wanted to use air (for obvious reasons) as well as the templ proxy to have hot-reloading in my browser, and this is the solution I've come up with.

It works by running air and templ separately, and using the templ -cmd flag to run a script that will trigger a new rebuild in air.

Do note that sometimes air is not fast enough to rebuild GO before templ has sent the reload event and the browser reloaded, in those cases you'll have to do a manual reload.
Also it seems like there are some optimization that can be done in templ to better determine when rebuilding GO is needed.

Anyhow, here are the files, just copy them into your project and run make dev to start your app. 😄

airtempl (make it executable: chmod +x airtempl)

#!/usr/bin/env bash

file="airtempl.txt"

# Check if file exists, if not create it
touch $file 

# Increment the value in file
echo $(( $(<$file) + 1 )) > $file 

makefile

dev: # -j flag specify how many 'jobs' to run at once for the make cmd
    $(MAKE) -j 2 air watch

air: # need this for make cmd
   air

watch:
    templ generate -watch -proxy="http://localhost:8080" -cmd="./airtempl"

air.toml

root = "."
tmp_dir = "tmp"

[build]
  args_bin = []
  bin = "./tmp/main"
  cmd = "go build -o ./tmp/main ." # change this as needed
  delay = 1 # as fast as possible (is faster than having 0)
  exclude_dir = ["tmp", "vendor", "view"] # can exclude the dir for your templ files instead of regex bellow
  exclude_file = []
  exclude_regex = ["_test.go", "_templ.go"] # don't want to detect templ.go files
  exclude_unchanged = false
  follow_symlink = false
  full_bin = ""
  include_dir = []
  include_ext = ["go", "txt"] # don't work with just include_file, so need to include "txt" here (probably a bug in air?)
  include_file = ["airtempl.txt"] # need to include this as to detect when to update based on templ
  kill_delay = "0s"
  log = "build-errors.log"
  poll = false
  poll_interval = 0
  post_cmd = []
  pre_cmd = []
  rerun = false
  rerun_delay = 500
  send_interrupt = false
  stop_on_error = false

[color]
  build = "yellow"
  main = "magenta"
  runner = "green"
  watcher = "cyan"
 
[log]
  main_only = true # true: for cleaner output
  time = false

[misc]
  clean_on_exit = false

[screen]
  clear_on_rebuild = false
  keep_scroll = true

[jackielii]

The problem with this is there is always the race condition where your server is not ready, but browser reload sse event is already sent down.

The sequence of events goes:

1. templ detects changes and regenerate the txt file or go file. (watch mode only generates txt so that go build doesn't need to run)
2. templ sends reload sse event to browser, browser reloads
3. air detects txt change, both _templ.txt and your airtempl.txt and rebuilds binary and re-run
4. browser should reload

#661 tries to address this problem. With it, you should be able to write Makefile:

live/templ:
	templ generate --watch --proxy="http://localhost:8080" --open-browser=false -v

live/server:
	go run github.com/cosmtrek/[email protected] \
	--build.cmd "go build -o tmp/bin/main" --build.bin "tmp/bin/main" --build.delay "100" \
	--build.exclude_dir "node_modules" \
	--build.include_ext "go" \
	--misc.clean_on_exit true

live/tailwind:
	npx tailwindcss -i ./input.css -o ./assets/styles.css --minify --watch

live/esbuild:
	npx esbuild js/index.ts --bundle --outdir=assets/ --watch

live/sync_assets:
	go run github.com/cosmtrek/[email protected] \
	--build.cmd "templ generate --notify-proxy" \
	--build.bin "true" \
	--build.delay "100" \
	--build.exclude_dir "" \
	--build.include_dir "assets" \
	--build.include_ext "js,css"

live: 
	make -j5 live/templ live/server live/tailwind live/esbuild live/sync_assets

This approach won't re-build your Go binary unless Go related file changes. But it will reload the browser if any templ file, bundled js, or css file changes.

Obviously if you're using //go:embed directive to embed assets, then you do need to rebuild the Go binary.

[jackielii]

You're right. And I tested it, somehow air doesn't rebuild even when _templ.go file changed... Easiest way is just to include templ files in the air watch list

[jackielii]

Right... It does work, it turns out I'm using the .air.toml as well as the command line, should've be more careful.

In the case where templ files changed the go file, live/server will rebuild and restart the binary.

Somehow there is always a refresh after the go server restarted. I don't know what's causing it. It could be the SSE tried to reconnect since the http connection got broken during restart... which is just what we want :D

[leandergangso]

Yhe, that sounds like my current experience. Just that it's not all that consistent, depending on what is changed and so on.
I have a tendency to not trust it 100% so I do end up manually reloading at times, just to be sure.
Would be nice to have something that feels a bit more "trust worthy".

[jackielii]

I did a few more tests. It'll 100% work because the reload event will be sent to the proxy server on .templ file change. So the browser will reload. At which point , templ has regenerated the _temple.go file and air will restart the go server. So the web page will just wait for a bit until the go server becomes available and display the response

[leandergangso]

You are correct, but there are still some race conditions at times, hence my statement above with why I don't completely trust this solution, but it mostly works.

E.g.

• tailwind watch is slower than templ, then css might not be correct.
• templ and browser reload before air has time to start rebuilding. (happens to me at times)