Day 9 of Building HYNA-Stage: Hot Reloading, Spinners, and the 502 Eradicator
When I started building HYNA-Stage, I thought I was just building a tool. A tool does the job. It takes your code, puts it in a cloud sandbox, and gives you a URL. But yesterday, while staring at my terminal on a $150 Android phone, I realized I needed to stop building a tool and start building a product . The difference? Developer Experience (DX). A product makes the developer feel powerful…
On the ninth day of building HYNA-Stage, the developer realized that the project had transitioned from being a simple tool to becoming a product. The focus shifted from merely getting the API to work to enhancing the developer experience (DX). This shift brought about several noteworthy updates in version 2.1.0.
Firstly, the developer implemented hot reloading with the command `hyna-stage watch test.html`. This feature allowed changes to the local file to automatically deploy within 800 milliseconds, eliminating the need for manual redeploys and refreshing the browser. This was achieved by integrating `fs.watch` with a debounce timer, preventing frequent command spamming.
Secondly, the developer introduced enterprise spinners to the CLI. Instead of the monotonous "Loading..." message, users now see smooth, animated spinners during deployment, such as ⏳ Authenticating... ☁️ Provisioning Firecracker MicroVM... 🚀 Deploying to E2B... This small addition made the CLI feel more like a premium macOS tool rather than a hastily assembled project.
Next, an improvement in the browser opening process was introduced. The CLI now pauses to ask the user to press enter before opening the live URL in their browser. Once entered, Chrome is launched using `termux-open-url`, streamlining the workflow and removing the need to manually copy and paste URLs from the terminal.
The developer also addressed a significant issue known as the 502 Bad Gateway error. The problem arose due to E2B MicroVMs occasionally taking 2-3 seconds to boot the Python HTTP server, causing the CLI to return the URL prematurely and users encountering a dead port when attempting to access the site. The solution involved implementing a Deno polling loop within a Supabase Edge Function.
This loop generated the E2B public URL, pinged it every 500ms, waited up to 10 seconds for the server to respond, and only returned success once the MicroVM was fully online. Consequently, the URL would now only open when the server was genuinely ready, effectively eliminating 502 errors.
Finally, a local config storage system was added using `~/.hyna-stage`. With this feature, running `hyna-stage open` would instantly reopen the last deployed URL, eliminating the need to re-run the entire deployment process. This enhancement significantly improved the developer experience.
The developer's realization of the importance of developer experience came from using an inexpensive Android phone in Tamil Nadu. Despite having limited resources compared to the typical high-end equipment used in enterprise-grade applications, the developer was able to build a developer experience that rivals leading platforms like Vercel. The new experience is now available for everyone to try: `npm install -g @hynaweb/stage hyna-stage watch your-file.html`.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
