Podlet proxy is not configured correctly if app.base !== "/"

[wkillerud]

Trying to create a podlet server with the (WIP) template. By default the Podlet Server is mounted on http://localhost:8080/name where name is the value of "name" from package.json.

I get unexpected 404s when I try to add an API route and follow the examples from the docs:

https://github.com/podium-lib/podlet-server/blob/main/README.md#defining-api-routes

Example server.js:

export default async function server(app, options) {
	const { config, podlet } = options;

	const target = "/api";
	app.get(podlet.proxy({ target, name: "api" }), async (req, reply) => {
		return { message: "You can also define custom API routes in server.js for client-side fetching." };
	});

	app.setContentState((request, context) => ({
		api: new URL(`${context.publicPathname}/api`, context.mountOrigin).href,
		message: "You can share values between client and server by using the setContentState function in server.js",
	}));
}

Example content.js:

import { html, css } from "lit";
import { PodiumElement } from "@podium/element";

export default class Content extends PodiumElement {
	static styles = [
		// Include CSS from the Warp design system
		// prettier-ignore
		css`@warp-css`,
		// Add custom CSS if needed
		css`
			.welcome {
				font-size: 1.2em;
			}
		`,
	];

	// Configure a reactive Lit property. Changes to this, for instance
	// in connectedCallback, will update the DOM.
	static properties = {
		// Delete if you don't have async state from the server
		response: { state: true },
	};

	// Delete if you don't have async state from the server
	async connectedCallback() {
		super.connectedCallback();
		const result = await fetch(this.initialState.api);
		this.response = await result.json();
	}

	render() {
		return html`<section class="pageholder">
			<h1>Borealis Podlet Starter</h1>
			<p class="welcome">Welcome to the Borealis Podlet Starter!</p>
			<p>
				To get started, open content.js and start editing. Any changes you make will updated in the browser
				automatically.
			</p>
			<p>${this.initialState.message}</p>
			<p>${this.response ? this.response.message : "..."}</p>
		</section>`;
	}
}

• The API is mounted at /name/api
• The client is given the path /podium-resource/name/api by the server
• The Podlet proxy is mounted at /name/podium-resource
• The API is not available at:
  • /name/podium-resource/api
  • /name/podium-resource/name/api
  • /name/podium-resource/name/name/api

After some debugging, @digitalsadhu @leftieFriele and I discovered that the Podlet proxy doesn't mount correctly unless app.base is set to "/".

With app.base set to "/" in config/common.json:

• The API is mounted at /api
• The Podlet proxy is mounted at /podium-resource
• The API is available at /podium-resource/name/api
• The client is given the path /podium-resource/name/api by the server.