How can I make manifest.webmanifest be different in production from staging

[nstringham]

My web app has a manifest.webmanifest file which is static json in the root of the website this file contains information about the web app but also need to refer to my related android app.

My app has two different deployment environment "staging" and "production" so I have a .env.staging and a .env.production that I use for configuration differences such as which database to use.

How can I make the staging and production environments point to different android apps in manifest.webmanifest?

The first thing that comes to mind is dynamically emitting the manifest during the build process but it doesn't seam like SvelteKit has an easy way to do that. I considered writing a custom Vite plugin but thought I should ask here first.

[wwwdepot]

Create a server route ./src/routes/manifest.webmanifest/+server.ts, & prerender it.

import type { RequestHandler } from './$types';

const manifest = /** generate web app manifest */

export const GET: RequestHandler = async () => {
	return new Response(JSON.stringify(manifest), {
		headers: {
			'content-type': 'application/manifest+json',
		},
	});
};

export const prerender = true; // this line will generate a static manifest.webmanifest

[nstringham]

Thanks!

this is the code I ended up using

import manifest from "./manifest.webmanifest?raw";
import { PUBLIC_ANDROID_APP_ID } from "$env/static/public";

export const prerender = true;

export const GET = () => {
  return new Response(manifest.replaceAll("{PUBLIC_ANDROID_APP_ID}", PUBLIC_ANDROID_APP_ID));
};