N
Nuxt•4w ago
Hermes Alves

Hosting Nuxt 3 Server API on Cloudflare: Pages, Workers, or Neither?

I built a simple API in the server directory of my Nuxt 3 project. The structure looks like this: 
// server/api/hello.ts
export default defineEventHandler((event) => {
  return {
    hello: 'world'
  }
})
// server/api/hello.ts
export default defineEventHandler((event) => {
  return {
    hello: 'world'
  }
})
Now, I want to host this project on Cloudflare. However, I'm unsure which Cloudflare service supports hosting Nuxt 3 server APIs: Cloudflare Pages: Does it support server-side APIs like the one I built in Nuxt 3? Cloudflare Workers: Would this be a better fit for hosting the server API? Neither: Is there no support for Nuxt 3 server APIs on Cloudflare at all? If anyone has experience with this setup or knows the best way to deploy a Nuxt 3 server API on Cloudflare, I'd appreciate the guidance!
2 Replies
kapa.ai
kapa.ai•4w ago
Hi @Hermes Alves. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I can answer your question about hosting a Nuxt 3 server API on Cloudflare. Cloudflare Pages is indeed capable of hosting Nuxt 3 applications, including server-side APIs like the one you've built. This is supported through the Cloudflare Pages serverless deployment option. Here's how you can set it up: 1. Use the cloudflare-pages preset for Nitro, which is Nuxt's server engine. You can set this in your nuxt.config.ts file: 
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare-pages'
  }
})
export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare-pages'
  }
})
2. Build your Nuxt application using the following command: 
NITRO_PRESET=cloudflare_pages npx nuxt build
NITRO_PRESET=cloudflare_pages npx nuxt build
3. Configure prerendering in your nuxt.config.ts to handle both static pages and dynamic API routes: 
export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/'],
      ignore: ["/api"]
    }
  },
})
export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/'],
      ignore: ["/api"]
    }
  },
})
This configuration will prerender your static routes while keeping the /api routes dynamic. By using this setup, Cloudflare Pages will host both your static assets and your server-side API. The API routes will be handled by a Cloudflare Worker behind the scenes. It's worth noting that you don't need to use Cloudflare Workers separately; the Cloudflare Pages deployment will automatically create the necessary Worker to handle your server-side code. Sources: Stack Overflow - How to make Nuxt 3 correctly build SSG pages + dynamic API routes? Nuxt Documentation - Deployment Remember to check the Cloudflare documentation for any specific configuration steps required for your Cloudflare Pages project. Also, ensure that your Nuxt version is compatible with the latest Cloudflare Pages features. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@727670710033580124> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?