Add hot reload

This commit is contained in:
ekzyis 2024-10-26 01:59:45 +02:00
parent abad39a2bc
commit ccdc51eba5
6 changed files with 73 additions and 2 deletions

3
.gitignore vendored
View File

@ -13,3 +13,6 @@ public/css/tailwind.css
# js # js
node_modules node_modules
public/js/*.min.js public/js/*.min.js
# hot reload
public/__hotreload__

View File

@ -13,4 +13,7 @@ hermes: $(SOURCE)
run: run:
tailwindcss -i public/css/base.css -o public/css/tailwind.css tailwindcss -i public/css/base.css -o public/css/tailwind.css
templ generate -path pages templ generate -path pages
go run . go run .
dev:
bash hotreload.sh

27
hotreload.sh Normal file
View File

@ -0,0 +1,27 @@
#!/usr/bin/env bash
BINARY=hermes
PID=
set -e
function restart() {
date +%s.%N > public/__hotreload__
set +e
[[ -z "$PID" ]] || kill -15 $PID
make build -B
set -e
./$BINARY 2>&1 &
PID=$(pidof $BINARY)
}
function cleanup() {
rm -f public/__hotreload__
[[ -z "$PID" ]] || kill -15 $PID
}
trap cleanup EXIT
restart
while inotifywait -r -e modify fonts/ lib/ pages/ public/ server/; do
restart
done

View File

@ -23,6 +23,9 @@ templ Head() {
}' }'
/> />
<script src="/js/htmx.js" integrity="sha384-Xh+GLLi0SMFPwtHQjT72aPG19QvKB8grnyRbYBNIdHWc2NkCrz65jlU7YrzO6qRp" crossorigin="anonymous"></script> <script src="/js/htmx.js" integrity="sha384-Xh+GLLi0SMFPwtHQjT72aPG19QvKB8grnyRbYBNIdHWc2NkCrz65jlU7YrzO6qRp" crossorigin="anonymous"></script>
if ctx.Value("env") != "production" {
<script defer src="/js/hotreload.js"></script>
}
<script type="text/javascript"> <script type="text/javascript">
// helper functions // helper functions
var $ = selector => document.querySelector(selector) var $ = selector => document.querySelector(selector)

23
public/js/hotreload.js Normal file
View File

@ -0,0 +1,23 @@
/**
* This script polls /__hotreload__ and reloads the page if the response changes.
*/
// TODO: get commit from environment
const commit = "000000"
console.log(`running ${commit} in development mode`)
async function fetchStatus() {
const r = await fetch("/__hotreload__", { cache: "no-cache" })
return await r.text()
}
async function hotreload() {
const status = await fetchStatus()
setInterval(async () => {
const newStatus = await fetchStatus()
if (status !== newStatus) window.location.reload()
}, 1_000)
}
hotreload().catch(console.error)

View File

@ -1,6 +1,9 @@
package server package server
import ( import (
"context"
"os"
"github.com/ekzyis/hermes/pages" "github.com/ekzyis/hermes/pages"
"github.com/labstack/echo/v4" "github.com/labstack/echo/v4"
"github.com/labstack/echo/v4/middleware" "github.com/labstack/echo/v4/middleware"
@ -30,10 +33,19 @@ func New() *Server {
// e.HTTPErrorHandler = ... // e.HTTPErrorHandler = ...
e.GET("/", func(c echo.Context) error { e.GET("/", func(c echo.Context) error {
return pages.Index().Render(c.Request().Context(), c.Response().Writer) return pages.Index().Render(getContext(c), c.Response().Writer)
}) })
s := &Server{e} s := &Server{e}
return s return s
} }
func getContext(c echo.Context) context.Context {
ctx := c.Request().Context()
ctx = context.WithValue(ctx, "env", os.Getenv("ENVIRONMENT"))
ctx = context.WithValue(ctx, "session", c.Get("session"))
ctx = context.WithValue(ctx, "commit", os.Getenv("GIT_COMMIT"))
ctx = context.WithValue(ctx, "path", c.Request().URL.Path)
return ctx
}