Add ability to proxy local domain

[jeromecoupe]

In the spirit of using this outside of 11ty / Jamstack contexts, a Browsersync feature I am missing righ now (unless I am mistaken) is the ability to proxy a local domain.

[zachleat]

https://browsersync.io/docs/options/#option-proxy this one, right?

[jeromecoupe]

Indeed. I think having such an option opens up a lots of possibilities for a local dev server. A common use case for me would be when working with local installs of more traditional CMSes, etc.

With a proxy and a watch dir(s) options, I could use eleventy-dev-server to watch my templates, assets directories, etc. and proxy my local domain.

For reference, here is a sample Browsersync CLI line from my NPM scripts

"scripts": {
  "server": "browser-sync start --proxy 'mydomain.test' --files './dist' './templates' './translations' --no-open"
},

[zachleat]

Can you provide one (or more 😅) very specific example of how you use this? I just want to make sure I understand exactly what you’re looking for

[jeromecoupe]

This is (mainly) related to uses cases for Browsersync outside of an Eleventy context, so maybe it is out of scope for this project. I work a lot with Craft CMS in headless mode or not. In those instances I run a LAMP stack locally that mirrors my production server as closely as possible. A custom .test domain is mapped to each site: http://craft.sandbox.test for example.

I then run Browsersync in proxy mode through the CLI in NPM script so that http://localhost:3000 for example proxies http://craft.sandbox.test.

I can then watch any files / directories I want with Browsersync and it will either inject changes (CSS/images) or make a full page refresh (when changing a Twig template)

Sample NPM scripts for a hypothetical Craft build (sorry no public repo right now but I could give you access to a private one if that helps)

• ./web/ is my webroot

"scripts": {
    "clean": "rm -rf './web/dist'",
    "styles:dev": "sass --embed-source-map --source-map-urls=absolute ./src/scss/main.scss ./web/dist/css/main.css",
    "styles:prod": "sass --no-source-map --style=compressed ./src/scss/main.scss ./web/dist/css/main.css",
    "poststyles:prod": "postcss ./web/dist/css/main.css --replace --no-map --use autoprefixer cssnano",
    "copy:images": "copyfiles -u 1 './src/img/**/*' './web/dist'",
    "copy:fonts": "copyfiles -u 1 './src/fonts/**/*' './web/dist'",
    "copy": "npm-run-all --parallel copy:images copy:fonts",
    "scripts:prod": "esbuild ./src/js/main.js --target=es6 --bundle --minify --outfile=./web/dist/js/main.bundle.js",
    "scripts:dev": "esbuild ./src/js/main.js --target=es6 --bundle --outfile=./web/dist/js/main.bundle.js",
    "cachebust": "node build_scripts/cachebust.js",
    "watch:scripts": "onchange './src/js/**/*' -- npm run scripts:dev",
    "watch:styles": "onchange './src/scss/**/*' -- npm run styles:dev",
    "build": "npm-run-all clean --parallel copy cachebust styles:prod scripts:prod",
    "server": "browser-sync start --proxy 'http://sandbox.craft.test' --serveStatic './web/dist' --files './web/dist' './templates' './translations' --no-open",
    "dev": "npm-run-all --parallel server watch:*"
  },

Not strictly related to --proxy but I generally run my dev server aside from Eleventy. For example with 1.0.0, even though browsersync is included, I run "my own" separate Browsersync instance as a dev server and Eleventy is a task among others. See my own website as an example. --proxy is a nice to have on top of that.

Hope that's a bit clearer for you and that I didn't ramble too much 😅

[chalkygames123]

@zachleat For example, we may want another server to interpret PHP while taking advantage of the dev server's features, and Browsersync can easily achieve this with a command like php -S localhost:8000 and npx browser-sync start --proxy 'localhost:8000' (or npx browser-sync 'http://localhost:8000' for short). It would be great if the same could be done with the Eleventy Dev Server.

[pfist]

Can you provide one (or more 😅) very specific example of how you use this? I just want to make sure I understand exactly what you’re looking for

I can. I use Ghost for most of my websites, and I use a local install to develop themes. Ghost runs on locahost:2368, so it requires a proxy to work with dev servers. The closest eleventy-dev-server gets is letting me set the port to 2368, but of course that interferes with Ghost. BrowserSync allows me to add Ghost's domain as a proxy:

browserSync.init({proxy: 'http://localhost:2368'})

It would be great to have this in eleventy-dev-server. I love how fast and lightweight it is compared to BrowserSync, but right now I can't use it for Ghost theme development.

[castastrophe]

Can you provide one (or more 😅) very specific example of how you use this? I just want to make sure I understand exactly what you’re looking for

I would find this very helpful for our (@adobe/spectrum-css) documentation site which is migrating to 11ty. When in development mode, I'd like my developers to be able to live update the docs site and run the storybook server in parallel - with our built-in preview link in the navigation linking directly to the proxy instead of a static storybook build.

[KonnorRogers]

Just chiming in, I know its undocumented, but would a workaround for now be to add a middleware to the 11ty dev server?

I went spelunking through the Vite server and found this:

https://github.com/11ty/eleventy-plugin-vite/blob/fa4708b01fd0a660189c098ac02aa57e75d19da9/.eleventy.js#L26-L40

and am semi-curious if it could work for proxying as well.

[zachleat]

This is possible today using the onRequest option: https://www.11ty.dev/docs/dev-server/#on-request-for-request-time-processing

eleventyConfig.setServerOptions({
	onRequest: {
		// proxy all paths (change this!)
		"/*": async function(req) {
			let response = await fetch(new URL(req.url.pathname, "https://www.zachleat.com/"));

			return {
				status: response.status,
				headers: {
					"content-type": response.headers.get("content-type"),
				},
				body: await response.bytes(),
			};
		}
	}
});

Further, I just added a feature in the soon-to-be-released Dev Server 2.0.7 to support Response instances returned in onRequest callbacks, so the above will be simplified to this:

eleventyConfig.setServerOptions({
	onRequest: {
		// proxy all paths (change this!)
		"/*": function(req) {
			return fetch(new URL(req.url.pathname, "https://www.zachleat.com/"));
		}
	}
});

[zachleat]

Just one more small note: onRequest originally shipped in Dev Server v2.0.0 so it should be available to all Eleventy Core v3.0.0 installs: https://github.com/11ty/eleventy-dev-server/releases/tag/v2.0.0