aripalo Posts - Answer Overflow

aripalo

•Created by aripalo on 3/10/2024 in #pages-help

Astro Hybrid output with Server Endpoints (API Routes)

Has anyone managed to get Astro with output: "hybrid" mode working in CloudFlare pages with Server Endpoints https://docs.astro.build/en/guides/endpoints/#server-endpoints-api-routes Astro docs on CloudFlare adapter https://docs.astro.build/en/guides/integrations-guide/cloudflare/ claim that:

This adapter allows Astro to deploy your hybrid or server rendered site to Cloudflare.

But no matter what, I haven't been able to to get API Routes working with CloudFlare pages on "hybrid" mode. If I change to "server" output, then the API routes immediately start working. I'm using latest dependencies of everything with minimal setup. I've tried all sorts of combinations. So with server mode and with this configuration, it works:

export default defineConfig({
    output: "server",
    adapter: cloudflare({
        imageService: "compile",
        mode: "directory",
        routes: {
            strategy: "include",
            include: ["/api/*"],
        },
    }),
});

export default defineConfig({
    output: "server",
    adapter: cloudflare({
        imageService: "compile",
        mode: "directory",
        routes: {
            strategy: "include",
            include: ["/api/*"],
        },
    }),
});

… but if I change that output value to hybrid, it stops working. Or it "works" but it acts like a Static Endpoint, always returning Hello World! and ignoring the url search params. My super simple test endpoint at src/pages/api/hello.ts looks like this:

import { type APIRoute } from "astro";

export const GET: APIRoute = ({ request }) => {
    const url = new URL(request.url);
    const name = url.searchParams.get("name") || "World";

    return new Response(
        JSON.stringify({
            message: `Hello ${name}!`,
        }),
        {
            status: 200,
            headers: {
                "Content-Type": "application/json",
            },
        },
    );
};

import { type APIRoute } from "astro";

export const GET: APIRoute = ({ request }) => {
    const url = new URL(request.url);
    const name = url.searchParams.get("name") || "World";

    return new Response(
        JSON.stringify({
            message: `Hello ${name}!`,
        }),
        {
            status: 200,
            headers: {
                "Content-Type": "application/json",
            },
        },
    );
};

4 replies

Gaming

Programming