Providing a custom domain for all assets

[a-type]

My use case:

We have an app which has two separate codebases, one for the landing page and one for the rest of the app.

We'd like to write the landing page in 11ty and host it on landing.thing.com, while the main app is on thing.com.

We'd like to include a rewrite rule for thing.com/ which transparently rewrites the response to come from landing.thing.com. i.e. the URL still says thing.com/, but the response comes from the other domain.

This works! But all included assets are resolved relative to thing.com/, which does not serve them! Instead I'd like to configure our build server for the 11ty landing site (using Netlify) with an environment variable like PUBLIC_URL=https://landing.thing.com, and have 11ty rewrite all asset paths to resolve relative to this base URL.

I tried using pathPrefix but it didn't work (it adds a leading slash - so now all the asset URLs are /https://landing.thing.com/asset/path).

Is there a supported way of doing this?

[pdehaan]

An easy solution might be a custom filter which wraps the JavaScript URL object so you can easily prefix a custom domain on a per-asset basis.

// .eleventy.js
const env = require("./src/_data/env");

module.exports = (eleventyConfig) => {
  eleventyConfig.addFilter("absUrl", (url="", base=env.PUBLIC_URL) => new URL(url, base).href);
  // ...
  return {...};
};

// ./src/_data/env.js
module.exports = {
  PUBLIC_URL: process.env.PUBLIC_URL || "https://landing.thing.com"
};

// ./src/_data/books.js
module.exports = [
  {title: "Cat in a Hat", tags: ["cat", "hat"], logo: "/img/cat.png"},
  {title: "Dog in a Coat", tags: ["dog", "coat"], logo: "/img/dog.png"},
];

USAGE

<img src="{{ book.logo | url }}" alt="{{ book.title }}" />
<img src="{{ book.logo | url | absUrl() }}" alt="{{ book.title }}" />
<img src="{{ book.logo | url | absUrl('https://cdn.landing.com') }}" alt="{{ book.title }}" />
<img src="{{ 'https://cdn2.thing.com/asset/path/header.gif' | url | absUrl('https://bing.com') }}" alt="{{ book.title }}" />

OUTPUT

<!-- This doesn't use the custom `absUrl()` filter, so it remains a relative URL. -->
<img src="/img/cat.png" alt="Cat in a Hat" />

<!-- This uses the `absUrl()` filter with a default base URL (which we pull from the `process.env.PUBLIC_URL` 
     variable in Netlify or wherever). -->
<img src="https://landing.thing.com/img/cat.png" alt="Cat in a Hat" />

<!-- This uses the `absUrl()` filter with a custom base URL. -->
<img src="https://cdn.landing.com/img/cat.png" alt="Cat in a Hat" />

<!-- This uses the `absUrl()` with a fully qualified URL and custom base URL, but the custom base URL is 
	 ignored since that is how the URL library works. -->
<img src="https://cdn2.thing.com/asset/path/header.gif" alt="Cat in a Hat" />

🤷

[a-type]

That's quite versatile, thanks for the thorough suggestion!