Log inSign up
dcm31
dcm31live-reload2
Remix of stevekrouse/live-reload
Public
Like
live-reload2
Code
7
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
Sign up now
Code
/
Search
Open in new tab
README.md

Live-Reload for Val Town

Automatically reload your Val Town project in the browser when any of its files change. No more manual refreshing to see your updates!

Demo video

Features

  • 🔄 Instant page reloads when your code changes
  • 🔌 Simple one-line integration
  • 🧠 Smart polling frequency based on edit recency
  • 🛡️ Error state handling with automatic recovery
  • 🔍 Works only in development environments (*.val.run domains)

Installation

Import and use the liveReload wrapper function in your main entry point:

import { liveReload } from "https://esm.town/v/stevekrouse/live-reload/main.ts";

const handler = (req: Request) => { /* your fetch handler */}
export default liveReload(handler, import.meta.url);

You can also remix this example to get started.

How It Works

  1. Detection: The system uses the Val Town API to monitor your project for changes
  2. Long Polling: The client periodically checks if the project has been updated
  3. Smart Polling: Polling frequency adjusts based on how recently the project was edited:
    • < 15 minutes: Polls every 500ms
    • < 3 hours: Polls every 1 second
    • > 3 hours: Polls every 5 seconds
  4. Reload: When a change is detected, the page is redirected through a special proxy that handles error states
  5. Error Recovery: If val returns an error, we'll redirect you to our reload.val.run proxy, which will show you the error, and poll for non-error responses, and reload the page when it gets one.

Example Usage

Here's a complete example using Hono:

/** @jsxImportSource npm:hono/jsx **/
import { Hono } from "npm:hono";
import { liveReload } from "https://esm.town/v/stevekrouse/live-reload/main.ts";

const app = new Hono();

app.get("/", (c) => {
  return c.html(
    <body>
      <h1>My App with Live Reloading</h1>
      <p>Edit this file and save to see instant updates!</p>
    </body>,
  );
});

// Enable live reloading
export default liveReload(app.fetch, import.meta.url);

Troubleshooting

Live reload isn't working

  1. Check the domain: Live reload only works on *.val.run domains (not custom domains)
  2. Check the console: Look for messages about live-reload being skipped
  3. Iframe detection: Live reload is disabled in iframes (like the Val Town editor preview)

Disabled on development

  • Only works on *.val.run domains (not custom domains)
  • Disabled in iframes (including the Val Town editor preview)
  • Requires the Val Town API to be accessible

Prior Art

This project is a port of reloadOnSave.

Code