├── .gitignore ├── README.md ├── package.json └── server.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

11ty Logo

2 | 3 | # eleventy-server-browsersync 🕚⚡️🎈🐀 4 | 5 | A server plugin to use [Browsersync](https://browsersync.io/) with Eleventy 2.0+. 6 | 7 | ## ➡ [Documentation: Swap back to Browsersync](https://www.11ty.dev/docs/watch-serve/#swap-back-to-browsersync) 8 | 9 | - Please star [Eleventy on GitHub](https://github.com/11ty/eleventy/)! 10 | - Follow us on Twitter [@eleven_ty](https://twitter.com/eleven_ty) 11 | - Support [11ty on Open Collective](https://opencollective.com/11ty) 12 | - [11ty on npm](https://www.npmjs.com/org/11ty) 13 | - [11ty on GitHub](https://github.com/11ty) 14 | 15 | [![npm Version](https://img.shields.io/npm/v/@11ty/eleventy-server-browsersync.svg?style=for-the-badge)](https://www.npmjs.com/package/@11ty/eleventy-server-browsersync) 16 | 17 | ## Installation 18 | 19 | ``` 20 | npm install @11ty/eleventy-server-browsersync 21 | ``` 22 | 23 | ```js 24 | module.exports = function(eleventyConfig) { 25 | eleventyConfig.setServerOptions({ 26 | module: "@11ty/eleventy-server-browsersync", 27 | 28 | // Default options shown: 29 | port: 8080, 30 | ignore: ["node_modules"], 31 | watch: false, 32 | open: false, 33 | notify: false, 34 | ui: false, 35 | ghostMode: false, 36 | index: "index.html", 37 | }) 38 | }; 39 | ``` 40 | 41 | View the [full list of Browsersync options](https://browsersync.io/docs/options). 42 | 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@11ty/eleventy-server-browsersync", 3 | "version": "1.0.2", 4 | "description": "An Eleventy server plugin to use Browsersync with Eleventy 2.0+.", 5 | "main": "server.js", 6 | "license": "MIT", 7 | "engines": { 8 | "node": ">=12" 9 | }, 10 | "funding": { 11 | "type": "opencollective", 12 | "url": "https://opencollective.com/11ty" 13 | }, 14 | "keywords": [ 15 | "eleventy", 16 | "server" 17 | ], 18 | "11ty": { 19 | "compatibility": ">=2" 20 | }, 21 | "publishConfig": { 22 | "access": "public" 23 | }, 24 | "author": { 25 | "name": "Zach Leatherman", 26 | "email": "zachleatherman@gmail.com", 27 | "url": "https://zachleat.com/" 28 | }, 29 | "repository": { 30 | "type": "git", 31 | "url": "git://github.com/11ty/eleventy-server-browsersync.git" 32 | }, 33 | "bugs": "https://github.com/11ty/eleventy-server-browsersync/issues", 34 | "homepage": "https://github.com/11ty/eleventy-server-browsersync/", 35 | "dependencies": { 36 | "browser-sync": "^2.27.11" 37 | }, 38 | "devDependencies": { 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const BrowserSync = require("browser-sync"); 2 | 3 | const debug = require("debug")("EleventyBrowserSync"); 4 | 5 | const serverCache = {}; 6 | 7 | const DEFAULT_OPTIONS = { 8 | port: 8080, 9 | ignore: ["node_modules"], 10 | watch: false, 11 | open: false, 12 | notify: false, 13 | ui: false, // Default changed in 1.0 14 | ghostMode: false, // Default changed in 1.0 15 | index: "index.html", 16 | 17 | // Non-standard Browser-Sync options 18 | // These must be removed below in the `getBrowserSyncOptions` method 19 | 20 | // May be overridden by Eleventy, adds a virtual base directory to your project 21 | pathPrefix: "/", 22 | } 23 | 24 | class EleventyBrowserSync { 25 | static getServer(...args) { 26 | let [name] = args; 27 | 28 | if (!serverCache[name]) { 29 | serverCache[name] = new EleventyBrowserSync(...args); 30 | } 31 | 32 | return serverCache[name]; 33 | } 34 | 35 | constructor(name, dir, options = {}) { 36 | this.name = name; 37 | this.options = Object.assign({}, DEFAULT_OPTIONS, options); 38 | 39 | // Directory to serve 40 | if(!dir) { 41 | throw new Error("Missing `dir` to serve."); 42 | } 43 | this.dir = dir; 44 | } 45 | 46 | getBrowserSyncOptions(port) { 47 | let serverConfig = { 48 | baseDir: this.dir, 49 | }; 50 | 51 | if(this.options.pathPrefix !== "/") { 52 | serverConfig.baseDir = undefined; 53 | serverConfig.routes = {}; 54 | serverConfig.routes[this.options.pathPrefix] = this.dir; 55 | } 56 | 57 | let options = Object.assign({ 58 | server: serverConfig, 59 | }, this.options); 60 | 61 | // We don’t pass these to browser-sync’s init method 62 | delete options.module; 63 | delete options.pathPrefix; 64 | delete options.logger; 65 | delete options.setup; 66 | 67 | if(port) { 68 | options.port = port; 69 | } 70 | 71 | return options; 72 | } 73 | 74 | get server() { 75 | if (this._server) { 76 | return this._server; 77 | } 78 | 79 | this._server = BrowserSync.create("eleventy-server"); 80 | 81 | return this._server; 82 | } 83 | 84 | serve(port) { 85 | let options = this.getBrowserSyncOptions(port); 86 | this.server.init(options); 87 | } 88 | 89 | close() { 90 | this.server.exit(); 91 | } 92 | 93 | sendError({ error }) { 94 | // Do nothing, this feature is not supported by browser-sync 95 | } 96 | 97 | reload({ subtype }) { 98 | this.server.reload(subtype === "css" ? "*.css" : undefined); 99 | } 100 | } 101 | 102 | module.exports = EleventyBrowserSync; 103 | --------------------------------------------------------------------------------