{"id":15680466,"url":"https://github.com/denyncrawford/deno-livereload","last_synced_at":"2025-10-30T17:46:58.829Z","repository":{"id":62422038,"uuid":"358030494","full_name":"denyncrawford/deno-livereload","owner":"denyncrawford","description":"Automatic browser reloads at file changes for Deno ✨","archived":false,"fork":false,"pushed_at":"2023-02-13T01:04:01.000Z","size":70,"stargazers_count":7,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T19:51:08.641Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/denyncrawford.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-14T20:12:39.000Z","updated_at":"2024-02-08T14:31:53.000Z","dependencies_parsed_at":"2024-10-24T02:53:16.808Z","dependency_job_id":"cd1f642f-f995-4710-9af1-3a3bc1477d4b","html_url":"https://github.com/denyncrawford/deno-livereload","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denyncrawford%2Fdeno-livereload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denyncrawford%2Fdeno-livereload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denyncrawford%2Fdeno-livereload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denyncrawford%2Fdeno-livereload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/denyncrawford","download_url":"https://codeload.github.com/denyncrawford/deno-livereload/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253170633,"owners_count":21865271,"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":[],"created_at":"2024-10-03T16:42:07.926Z","updated_at":"2025-10-30T17:46:53.790Z","avatar_url":"https://github.com/denyncrawford.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Deno LiveReload\n\n\u003ca href=\"LICENSE\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-brightgreen.svg\" alt=\"Software License\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/denyncrawford/deno-livereload/issues\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/issues/denyncrawford/deno-livereload.svg\" alt=\"Issues\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/standard/ts-standard/\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/code%20style-standard-brightgreen.svg\" alt=\"Typescript Style Guide\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://deno.land/x/livereload\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/deno-^1.8.1-informational.svg?style=flat-squar\" alt=\"Deno.land\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/denyncrawford/deno-livereload/releases\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/release/denyncrawford/deno-livereload.svg\" alt=\"Latest Version\" /\u003e\n\u003c/a\u003e\n\n\nDeno LiveReload is a development tool for watching changes at your filesystem and automatic reload your browser. It is highly configurable and is intended to work with deno but you can use it wherever you want writing a simple watcher file. The official CLI is WIP.\n\n## Import\n\n```typescript\nimport LiveReload from 'https://deno.land/x/livereload@0.1.0/src/mod.ts'\n```\n\n## Usage\n\nTo use LiveReload you must create a WATCHER and then inject some code in your html.\n\n1. Create a server or handler:\n  \n**watcher.ts**\n\n```typescript\nconst live = new LiveReload('public');\n// foo code\nlive.watch()\n```\n\n2. Inject the script at your html files that you need to reload:\n\n\u003e If you're serving your files use the second option.\n\n **index.html**\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- 1. No served files --\u003e\n    \u003cscript src=\"http://localhost:39430/livereload/client.js\" defer\u003e\u003c/script\u003e\n    \u003c!-- 2. Injecting for Served files --\u003e\n    \u003cscript defer\u003e\n      document.write(`\u003cscript src=\"http://'${(location.host || 'localhost').split(':')[0]}:39430/livereload/client.js\u003e\u003c/script\u003e`)\n    \u003c/script\u003e\n    \u003c!-- 3. Using the same dev server (with live.handle) --\u003e\n    \u003cscript src=\"/livereload/client.js\" defer\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eHello world with Deno LiveReload\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nLivereload serves the backend instance and the client so it is stand alone by default, but if you have already a development server, you might want to disable the livereload server at the config object and use your own port and protocol, then you have to handle the incomming requests from the `/livereload` and `/livereload/client.js` endpoints with `LiveReload(options).handle(req)`. Please check [this example](#handling-request-with-opine-example) to know how to use your own server.\n\n## Instantiating\n\nYou can use it with any configuration more than the base path like in the example above or an array of base paths:\n\n```typescript\nconst live = new LiveReload(['public','assets', '.']);\n```\n\n\u003e Relative paths will resolve into CWD.\n\n## Config\n\nIf you pass a config object these are the options availble:\n\n- `options` **WatchOptions**\n  - `port` **number**\n    - The port that livereload will use for connect to the server\n    - *default*: `39430`\n  - `base` **Array(string) | string**\n    - Base paths(s) to watch \n    - *default*: `Deno.cwd()`\n  - `recursive` **b0olean**\n    - If true it Will watch the specified directory and all sub directories.\n    - *default*: `true`\n  - `serve` **boolean**\n    - If flase it will not serve and you might want to handle the server requests by your own.\n    - *default*: `true`\n  - `secure` **boolean**\n    - Tells client bundle to listen as http or https\n    - *default*: `false`,\n  - `exclude` *optional* **Array(string)**\n    - List of Glob Patterns for excluding reloads of matching paths.\n    *default*: `undefined`\n\n\n## API\n\nThe constructed LiveReload class expose just two methods:\n\n- `LiveReload.watch()` **void**\n  - Starts watching for changes, this method prevent declaring the instance where you don't want, so calling watch will fire the changes.\n  - *required*: `true`\n- `LiveReload.handle(request: ServerRequest)` **void**\n  - If the serve option is false you can use this method to handle each request of your own http server or http framework.\n  - *required*: `flase`\n\n ## Handling request with opine example:\n```typescript\nimport { opine } from \"https://deno.land/x/opine@1.0.2/mod.ts\"; // Note the version\nimport LiveReload from '../../mod.ts'\nimport { ServerRequest } from 'https://deno.land/std@0.83.0/http/server.ts';\nconst app = opine();\nconst port = 3000;\n\nconst live = new LiveReload({\n  base: 'test',\n  exclude: ['*.css'],\n  serve: false,\n  port\n});\n\napp.get(['/livereload', '/livereload/client.js'],(req: ServerRequest) =\u003e {\n   live.handle(req)\n})\n\napp.get(\"/\", async (req: ServerRequest) =\u003e {\n  const name = new TextDecoder().decode(await Deno.readFile('name.txt'));\n  req.respond({status: 200,\n    headers: new Headers({\n      \"content-type\": \"text/html\",\n    }),\n    body:`\u003cscript src=\"http://localhost:${port}/livereload/client.js\" defer\u003e\u003c/script\u003e\n            \u003ch1\u003eMy name is ${name}\u003ch1\u003e`\n    });\n});\n\nlive.watch()\n\napp.listen(port);\n```\n\n\u003e NOTE: By now, this module is only compatible with the std@0.83.0 http ServerRequest interface, if you want to use a custom framework or dev server you must check first the http version of the module and match it with the compatible version.\n\n## Building the web client\n\n\u003e The client is a ts file and you don't need to import it directly from the file system, instead livereload serves the constructed client as a js file. This is because it sets the port dynamically and builds the client in real-time every time a request is made. For normal usage you won't need to build your own client.\n\nThe client handles the inning notifications from the server and you can bundle your own custom client:\n\n1. Clone the repo\n2. Edit the src/client.ts\n3. Run the bundler `deno run -A --unstable bundler.ts`\n\n\n## Credits\n\n- [Miguel Rangel](https://github.com/denyncrawford)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenyncrawford%2Fdeno-livereload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdenyncrawford%2Fdeno-livereload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenyncrawford%2Fdeno-livereload/lists"}