{"id":14977089,"url":"https://github.com/applelo/vite-plugin-browser-sync","last_synced_at":"2025-04-04T16:12:17.236Z","repository":{"id":132087245,"uuid":"517257473","full_name":"Applelo/vite-plugin-browser-sync","owner":"Applelo","description":"Add BrowserSync in your Vite project ","archived":false,"fork":false,"pushed_at":"2024-12-15T20:59:36.000Z","size":1404,"stargazers_count":76,"open_issues_count":3,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T15:04:17.378Z","etag":null,"topics":["browsersync","vite","vite-plugin","vitejs"],"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/Applelo.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-24T07:34:54.000Z","updated_at":"2025-03-27T10:50:36.000Z","dependencies_parsed_at":"2023-11-16T20:10:47.694Z","dependency_job_id":"72a458e2-f209-4c23-b1d0-2fa91821b438","html_url":"https://github.com/Applelo/vite-plugin-browser-sync","commit_stats":{"total_commits":110,"total_committers":1,"mean_commits":110.0,"dds":0.0,"last_synced_commit":"c20a631655d260773336e051783e34b4d2c5177f"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Applelo%2Fvite-plugin-browser-sync","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Applelo%2Fvite-plugin-browser-sync/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Applelo%2Fvite-plugin-browser-sync/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Applelo%2Fvite-plugin-browser-sync/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Applelo","download_url":"https://codeload.github.com/Applelo/vite-plugin-browser-sync/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208142,"owners_count":20901570,"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":["browsersync","vite","vite-plugin","vitejs"],"created_at":"2024-09-24T13:55:02.175Z","updated_at":"2025-04-04T16:12:17.220Z","avatar_url":"https://github.com/Applelo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/v/vite-plugin-browser-sync)](https://www.npmjs.com/package/vite-plugin-browser-sync) [![JSR Package](https://jsr.io/badges/@applelo/vite-plugin-browser-sync)](https://jsr.io/@applelo/vite-plugin-browser-sync) [![node-current](https://img.shields.io/node/v/vite-plugin-browser-sync)](https://nodejs.org/) [![Coverage Status](https://coveralls.io/repos/github/Applelo/vite-plugin-browser-sync/badge.svg?branch=main)](https://coveralls.io/github/Applelo/vite-plugin-browser-sync?branch=main)\n\n# vite-plugin-browser-sync\n\nAdd [BrowserSync](https://browsersync.io) in your Vite project.\n\n\u003e This plugin supports Vite 5 and 6.\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/Applelo/vite-plugin-browser-sync/blob/main/screenshot.png?raw=true\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Applelo/vite-plugin-browser-sync/main/screenshot.png?raw=true\"/\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n## 🚀 Features\n\n- ⚡ Fully integrate in your ViteJS environment\n- 👌 Zero config available for common use cases\n- ✨ All the [BrowserSync features](https://browsersync.io/)\n- 🙌 Support for BrowserSync `proxy` and `snippet` mode\n- 🔥 Liberty to manage BrowserSync options\n- 🎛️ Can run on `dev`, `preview` or `build --watch`\n\n## 📦 Install\n\n```\nnpm i -D vite-plugin-browser-sync\n\n# yarn\nyarn add -D vite-plugin-browser-sync\n\n# pnpm\npnpm add -D vite-plugin-browser-sync\n\n# bun\nbun add -D vite-plugin-browser-sync\n```\n\n## 👨‍💻 Usage\n\nBy default, BrowserSync will start alongside your Vite Server in `dev`. It uses the `proxy` mode of BrowserSync based on your Vite server options : no need to pass any options to make it works!\n\n```js\n// vite.config.js / vite.config.ts\nimport VitePluginBrowserSync from 'vite-plugin-browser-sync'\n\nexport default {\n  plugins: [VitePluginBrowserSync()]\n}\n```\n\nIf you want to manage BrowserSync or [override default behavior of this plugin](https://github.com/Applelo/vite-plugin-browser-sync#vite-plugin-browser-sync-options-for-browsersync), you can pass a `bs` object with your [BrowserSync options](https://browsersync.io/docs/options) in it :\n\n```js\n// vite.config.js / vite.config.ts\nimport VitePluginBrowserSync from 'vite-plugin-browser-sync'\n\nexport default {\n  plugins: [\n    VitePluginBrowserSync({\n      dev: {\n        bs: {\n          ui: {\n            port: 8080\n          },\n          notify: false\n        }\n      }\n    })\n  ]\n}\n```\n\nIf you need the `snippet` mode of BrowserSync, the plugin supports it by injecting the script automatically.\n\n```js\n// vite.config.js / vite.config.ts\nimport VitePluginBrowserSync from 'vite-plugin-browser-sync'\n\nexport default {\n  plugins: [\n    VitePluginBrowserSync({\n      dev: {\n        mode: 'snippet'\n      }\n    })\n  ]\n}\n```\n\nYou can also enable the plugin on `vite build --watch` mode and `vite preview` mode.\n\n\u003e [!IMPORTANT]\n\u003e - In `buildWatch`, if you use the default `proxy` mode you need to set the `bs` object.\n\u003e - `snippet` mode is available in `buildWatch` but it is not recommanded to use since it update your `index.html` file.\n\u003e - In `preview`, only the `proxy` mode is supported since it will not inject the `snippet`.\n\n```js\n// vite.config.js / vite.config.ts\nimport VitePluginBrowserSync from 'vite-plugin-browser-sync'\n\nexport default {\n  plugins: [\n    VitePluginBrowserSync({\n      dev: {\n        enable: false,\n      },\n      preview: {\n        enable: true,\n      },\n      buildWatch: {\n        enable: true,\n        bs: {\n          proxy: 'http://localhost:3000',\n        }\n      }\n    })\n  ]\n}\n```\n\n\u003e [!NOTE]\n\u003e For Astro user, this plugin is not working in preview mode because of [overrides made by Astro](https://github.com/withastro/astro/blob/a6c4e6754493e7af5c953b644c6a19461f15467b/packages/astro/src/core/preview/static-preview-server.ts#L40).\n\n## vite-plugin-browser-sync options for BrowserSync\n\nThis plugin overrides default options from BrowserSync to doesn't duplicate behaviors already handle by ViteJS. Futhermore, your ViteJS config are synced with BrowserSync.\n\nIf you want to change the overrided options you free to do so via the `bs` object.\n\n| Option                                                          | Why                                                                                                                            | dev | buildWatch | preview |\n|-----------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|:---:|:----------:|:-------:|\n| [logLevel](https://browsersync.io/docs/options#option-logLevel) | Set to `silent`, use ViteJS [printUrls](https://vitejs.dev/guide/api-javascript.html#createserver) to display BrowserSync info |  ✔️  |      ✔️     |    ✔️    |\n| [open](https://browsersync.io/docs/options#option-open)         | Apply ViteJS [open option](https://vitejs.dev/config/server-options.html#server-open)                                          |  ✔️  |            |    ✔️    |\n| [codeSync](https://browsersync.io/docs/options#option-codeSync) | Disabled because it is already handle by ViteJS                                                                                |  ✔️  |            |         |\n| [online](https://browsersync.io/docs/options#option-online)     | Synced with the [server host option](https://vitejs.dev/config/server-options.html#server-host)                                |  ✔️  |            |    ✔️    |\n\n### For `proxy` mode\n\n| Option                                                           | Why                                           | dev | buildWatch | preview |\n|------------------------------------------------------------------|-----------------------------------------------|:---:|------------|:-------:|\n| [proxy.target](https://browsersync.io/docs/options#option-proxy) | Inject the right url from ViteJS              |  ✔️  |            |    ✔️    |\n| [proxy.ws](https://browsersync.io/docs/options#option-proxy)     | Force websocket proxy to make work ViteJS HMR |  ✔️  |            |    ✔️    |\n\n### For `snippet` mode\n\n| Option                                                              | Why                                                    |\n| ------------------------------------------------------------------- | ------------------------------------------------------ |\n| [logSnippet](https://browsersync.io/docs/options#option-logSnippet) | Handle by the plugin so no need to display the snippet |\n| [snippet](https://browsersync.io/docs/options#option-snippet)       | The snippet injection is handle by the plugin          |\n\n## 👨‍💼 Licence\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapplelo%2Fvite-plugin-browser-sync","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapplelo%2Fvite-plugin-browser-sync","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapplelo%2Fvite-plugin-browser-sync/lists"}