Hot Reload for ServerSide Rendering, even more easily

I’m working on a project with HTMX & serverside rendering. HTMX has been great to work with, but it gets a bit annoying without the hot reloading that occurs automatically on saving the page like with React.

I came across this nice article where Any sets up sockets to listen to the refresh. It’s a nice idea but was a bit more than I wanted to try.

Hot Reload for ServerSide Rendering

However, I wanted to share another more flexible way to achieve the same thing.

This approach is better in that

• it’s even simpler to get started
• the tools here are macOS-app specific, not project specific, so you don’t have to reset this up for any new project or environment you work on.

This approach is specifically for Macbook users.

Create an Apple Script automation

Open up Automator and create a new “Quick Action” automation with “Apple Script”. Enter the following code, setting the workflow to receive “no input”.

I’m using Arc, but you can replace that whatever other unique application name. You can find that unique name in Activity Monitor if you’re not sure.

on run {input, parameters}
 tell application "Arc"
  activate
  tell application "System Events" to keystroke "r" using {command down}
 end tell
 return input
end runapple

Create a global keyboard shortcut

Settings -> Keyboard -> Keyboard Shortcuts -> Services -> General

I decided to use Shift-Command-S as my shortcut since it’s so close to the Command-S shortcut I use to save right before refreshing, but—use whatever you’d like.

Override any local keyboard shortcuts

For me, I’m using the Shift-Command-S as my global shortcut, and using it primarily from VSCode. So I change the Save As… shortcut, which previously used this combination, to something else.

And you’re set! Enjoy simple hot reloading for serverside applications for any project. It’s not as fast as React hot reloading but it’s almost as good.