Setting Up Apple Pay Domain Verification Route in TanStack Start

[cedar remnant]

I'm using TanStack Start, hosted on a VPS with Docker, and I'm trying to set up a route for Apple Pay verification on my staging URL (staging.xxx.ie).

I initially tried placing apple-developer-merchantid-domain-association.tsx inside a .well-known folder but then opted to use createRoute inside __root.tsx.

Current Code:
I created this route inside the __root.tsx:

const appleMerchantId = process.env.APPLE_MERCHANT_ID!;

export const appleRoute = createRoute({
  getParentRoute: () => Route,
  path: "/.well-known/apple-developer-merchantid-domain-association",
  component: () => appleMerchantId,
});

This should return the Apple Merchant ID for verification, but when I try to access the URL, I get a "page not found" error.
(see image attached)

Question:
Is this the correct way to expose the apple-developer-merchantid-domain-association file for Apple Pay domain verification? Or is there a better approach?

[fiery geode]

that's static data, right?

[cedar remnant]

ya

[fiery geode]

so can't you configure your server to serve the .well-known dir?

[cedar remnant]

I trying to do it within tanstack start as a route

oh I get what ur saying now.
You are saying make it outside the main project