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/air@v1.51.0 \
	--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/air@v1.51.0 \
	--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.

[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)

[patrickkdev]

Hi guys, I tried this and it works, except it does not trigger browser reload automatically when the change is in a .go file

[JappeHallunken]

@patrickkdev I also struggled with this (I'm new to this stuff), my problem was that I had an .air.toml file and I could not get the reload whithout a rebuild of the app, when my static assets (css) changed. My golang app runs on port 8080, the proxy on 8081, so I can see the hot reload on this port 8081. I deleted the .air.toml and use only makefile. Also I could not get it ro run correctly when using --notify-proxy, probably because I changed the default port?

Here is my working solution:

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

live/server:
        go run github.com/air-verse/air@v1.61.7 \
        --build.cmd "go build -o tmp/main" \
        --build.bin "tmp/main" \
        --build.include_ext "go" \
        --misc.clean_on_exit true \
        --proxy.enabled true \
        --proxy.app_port 8080 \
        --proxy.proxy_port 8081  # Air runs a proxy on 8081

live/sync_assets:
        go run github.com/air-verse/air@v1.61.7 \
        --build.cmd "templ generate --proxy='http://localhost:8081'"  \
        --build.delay "100" \
        --build.include_dir "assets" \
        --build.include_ext "css,js" \
        --build.bin "true" \
        --build.exclude_dir "" 

live:
        make -j3 live/templ live/server live/sync_assets

[EmpathyZeroed]

what is the purpose of build delay here? and why 100ms then and not 1000ms?

[JappeHallunken]

To be honest, I'm not sure anymore. I guess If you run some other commands that change multiple fils at once you don't want to trigger the build process for each file.

But while coming back to this topic I realised this solution does not work anymore for me: When I change static files like css files no reload is happening.

So I fixed it by sticking to the conf from the example in the temple docs

# run templ generation in watch mode to detect all .templ files and
# re-create _templ.txt files on change, then send reload event to browser.
# Default url: http://localhost:7331
live/templ:
        templ generate --watch --proxy="http://localhost:8080" --proxybind="192.168.178.56" --open-browser=false -v

# run air to detect any go file changes to re-build and re-run the server.
live/server:
        go run github.com/air-verse/air@v1.61.7 \
        --build.cmd "go build -o tmp/main" --build.bin "tmp/main" --build.delay "100" \
        --build.exclude_dir "node_modules" \
        --build.include_ext "go" \
        --build.stop_on_error "false" \
        --misc.clean_on_exit true

# watch for any js or css change in the assets/ folder, then reload the browser via templ proxy.
live/sync_assets:
        go run github.com/air-verse/air@v1.61.7 \
        --build.cmd "templ generate --notify-proxy" \
        --build.bin "true" \
        --build.delay "100" \
        --build.exclude_dir "" \
        --build.include_dir "assets" \
        --build.include_ext "js,css"

# start all 5 watch processes in parallel.
live:
        make -j3 live/templ live/server live/sync_assets

Some notes for people who want to copy this:
The templ proxy runs by default on localhost, but if you want to access the device you are developing on from another machine in the same network, you need to change the address it's listening on with --proxybind. (see templ docs).
The default proxy port is 7331, so now the proxy runs on this port instead of 8081 like in the previous example. My golang app still runs on port 8080
I guess the other settings are even more self-explanatory.
And in the 2nd air instance is again a build delay, because you probably change more then one asset file at once at the same time.