Providing services to a `LayerRouter` can be a bit tricky if you're not familiar with how layers ...

export const SpaFallback = HttpLayerRouter.add(
  "GET",
  `/*`,
  Effect.gen(function* () {
    return yield* HttpServerResponse.file(`dist/index.html`);
  }).pipe(
    // this works but i'd like to do this in my composition root.
    Effect.provide(NodeHttpServer.layerContext),
  ),
);

// This does not.
const AllRoutes = Layer.mergeAll(
  SpaFallback,
).pipe(
  Layer.provide(NodeHttpServer.layerContext),
);
// const handler: (request: Request, context: Context<HttpPlatform>) => Promise<Response>
export const { dispose, handler } = HttpLayerRouter.toWebHandler(
  AllRoutes,
  {},
);

export const SpaFallback = HttpLayerRouter.add(
  "GET",
  `/*`,
  Effect.gen(function* () {
    return yield* HttpServerResponse.file(`dist/index.html`);
  }).pipe(
    // this works but i'd like to do this in my composition root.
    Effect.provide(NodeHttpServer.layerContext),
  ),
);

// This does not.
const AllRoutes = Layer.mergeAll(
  SpaFallback,
).pipe(
  Layer.provide(NodeHttpServer.layerContext),
);
// const handler: (request: Request, context: Context<HttpPlatform>) => Promise<Response>
export const { dispose, handler } = HttpLayerRouter.toWebHandler(
  AllRoutes,
  {},
);