I'm developing a Nuxt 3 application that's primarily static content, but I have a form submission that interacts with Pipedrive CRM. In development (npx nuxi dev), everything works perfectly. The problem arises when I try to statically generate the site using nuxt generate.
Here are the specifics:
I have a form component that, upon submission, calls a function sendPipedriveLead from a composable (~/composables/pipedrive.ts).
The function in the composable makes an await $fetch call to the route /api/createLead.
The server-side logic for this route is housed in ~/server/api/createLead. This follows Nuxt's new directory structure where server-side routes can be created using files inside ~/server/api. Within that route/file, we do the rest of the magic, including another $fetch to Pipedrive's API URL.
When running in development mode, I can see the server handle this route correctly. It all works perfectly there. However, after running npx nuxi generate --dotenv .env.local then npx serve .output/public (basically nuxt generate) and serving the static files (npx serve .output/public), I get a 404 error when submitting and attempting the /api/createLead route.
The error is as follows:
HTTP 10/5/2023 3:33:20 PM ::1 POST /api/createLead
HTTP 10/5/2023 3:33:20 PM ::1 Returned 404 in 1 ms
From my understanding, the ~/server/api directory is used for server-based routes, accessible only when there's an active server running. Given that nuxt generate produces a fully static site without an active server, it seems like these routes are not accessible post-generation. Is that the case?
How can I maintain my server-side route functionality for form submission while still leveraging the performance benefits of nuxt generate for the rest of my site? Is there a recommended approach to handle this kind of scenario in Nuxt 3?
