{"id":16105202,"url":"https://github.com/mikeckennedy/server-hot-reload","last_synced_at":"2025-07-21T07:32:16.906Z","repository":{"id":189562601,"uuid":"680891895","full_name":"mikeckennedy/server-hot-reload","owner":"mikeckennedy","description":"Include in your web projects for dev-time auto reloading of web browser when any change is detected in content.","archived":false,"fork":false,"pushed_at":"2023-08-20T19:29:16.000Z","size":13,"stargazers_count":15,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T13:48:51.106Z","etag":null,"topics":["developer-tools","javascript-tools","webdevelopment"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mikeckennedy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-20T18:33:21.000Z","updated_at":"2025-03-14T00:56:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"c946ceb8-02b2-4f3e-90ee-63e416b1ecbb","html_url":"https://github.com/mikeckennedy/server-hot-reload","commit_stats":null,"previous_names":["mikeckennedy/server-hot-reload"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mikeckennedy/server-hot-reload","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeckennedy%2Fserver-hot-reload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeckennedy%2Fserver-hot-reload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeckennedy%2Fserver-hot-reload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeckennedy%2Fserver-hot-reload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikeckennedy","download_url":"https://codeload.github.com/mikeckennedy/server-hot-reload/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeckennedy%2Fserver-hot-reload/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266261143,"owners_count":23901285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developer-tools","javascript-tools","webdevelopment"],"created_at":"2024-10-09T19:08:51.754Z","updated_at":"2025-07-21T07:32:16.891Z","avatar_url":"https://github.com/mikeckennedy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Server Hot Reload\n\nInclude this script in your web projects for dev-time auto reloading \nof web browser when any change is detected in content. Works across\nall web technologies, built out on a FastAPI / Tailwind project.\n\n## Install and setup\n\nJust download and include the script at the top of your web:\n\n```html\n\u003cscript tal:condition=\"dev_mode\" src=\"/static/js/server-hot-reload.js\"\u003e\u003c/script\u003e\n```\nThe script polls the current URL as you navigate around. \nIt will compare the exact contents of the returned HTML. \nIf it changes in any way, the script will instantly reload the\npage. Be sure to include it only in your dev versions. \nNotice we're testing `tal:condition=\"dev_mode\"` (Chameleon) in\nour example.\n\n## Configure polling interval\n\nTo change the polling interval (default of once per sec), just\nedit the section:\n\n```javascript\nlet checkIntervalInMs = 1000;\n```\nAnd set it to whatever makes sense for you. Longer intervals\nmight make sense on very slow pages.\n\n## Pausing the script\n\nUsually you just want this thing to constantly check the dev server. \nBut there are times when it's just noise. For example, if you're\ndebugging the web app and have a break point you're stepping\nthrough, the extra requests may interfere. \n\nTo pause the script (until the page is reloaded), just open\nthe console in the web browser dev tools, and type \n`toggleServerReload()`.\n\n## Reloading on JS, CSS, image resource changes\n\nPart of the magic of this script is that it *can* reload when\nyou make changes to any static resources used in the page. \nBut this requires the smallest amount of work on your part.\n\nMy current use-case is this working with Tailwind for the design.\nFor reloading, that looks like:\n\n1. Edit the source CSS file\n2. Tailwind watcher generates a built CSS file\n3. Built CSS file is included the Python web HTML template\n4. Template appends a hash ID for the state of the CSS file\n5. Changes to the source CSS thus trigger a change in the final ID\n6. New ID means the page contents change and the script does a reload\n\nSo in that way, even editing an input file to tailwind will \nauto refresh all browsers pointed at the page during development.\n\nTo make this happen, you need to append some sort of ID to\nyour static resources (this is great for stale content busting \nin general). In Python, [I use this bit of code](https://github.com/talkpython/fast-python-webapps-with-cdns/blob/main/code/ch8_perf_testing/infrastructure/cache_buster.py).\n\nHowever you do it, the static URLs should look something like this, \n(notice the **?v=** hash ID):\n\n```html\n\u003clink href=\"/static/site.css?v=670022\" rel=\"stylesheet\"\u003e\n\n\u003cimg src=\"/static/img/logo.webp?v=a4c931\" /\u003e\n```\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikeckennedy%2Fserver-hot-reload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikeckennedy%2Fserver-hot-reload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikeckennedy%2Fserver-hot-reload/lists"}