watch frontend assets during development

Author: pierres

.air.toml

@@ -3,5 +3,6 @@ pre_cmd = ["go tool templ generate"]
 cmd = "go build -tags production -o ./tmp/pkgstatsd ."
 entrypoint = ["./tmp/pkgstatsd"]
 include_ext = ["go", "templ"]
+include_file = [".assets-rebuilt"]
 exclude_dir = [".idea", "dist", "node_modules", "tmp"]
 exclude_regex = ["_templ\\.go$"]

.gitignore

@@ -13,6 +13,7 @@
 /tmp/*
 !/tmp/.gitkeep
 /pkgstatsd
+/.assets-rebuilt
 
 # development
 /fixtures

README.md

@@ -17,10 +17,7 @@ the Arch Linux package statistics website.
 
 # Contributing
 ## Dev Mode
-Run `just dev` to watch for template and Go changes and rebuild automatically (requires [air](https://github.com/air-verse/air)).
-The automatic rebuild does not include assets (images, JS, CSS) and all unused classes are stripped during the build process.
-Thus, when changing classes for example, you might need to stop the dev server and run `just build-assets` and then start
-the project again.
+Run `just dev` to watch for Go, template and frontend changes and rebuild automatically (requires [air](https://github.com/air-verse/air)).
 
 ## Tests
 For contributing you'll probably want to test your changes at least once

justfile

@@ -36,8 +36,20 @@ build: build-assets build-templates
 run:
     go run -tags production .
 
+# open the local dev server in the default browser
+open:
+    xdg-open 'http://localhost:{{ PORT }}'
+
 # watch for template and Go changes and rebuild automatically
-dev:
+[parallel]
+dev: dev-assets dev-server
+
+[private]
+dev-assets:
+    pnpm exec vite build --watch
+
+[private]
+dev-server:
     air
 
 # run all tests

vite.config.ts

@@ -1,9 +1,21 @@
+import { writeFileSync } from "fs";
 import { fileURLToPath } from "url";
 import { dirname, resolve } from "path";
-import type { UserConfig } from "vite";
+import type { Plugin, UserConfig } from "vite";
+
+const isWatch = process.argv.includes("--watch");
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
+function notifyAir(): Plugin {
+    return {
+        name: "notify-air",
+        writeBundle() {
+            writeFileSync(".assets-rebuilt", String(Date.now()));
+        },
+    };
+}
+
 export default {
     resolve: {
         alias: [
@@ -49,10 +61,11 @@ export default {
             },
         },
     },
+    plugins: isWatch ? [notifyAir()] : [],
     publicDir: false,
     build: {
         manifest: "manifest.json",
-        minify: "terser",
+        minify: isWatch ? false : "terser",
         rollupOptions: {
             input: "src/main.ts",
         },