Nuxt•4mo ago

Pre-render for Firebase Hosting, Nitro deploy to firebase functions

Hello everyone, I want to be able to prerender all my website (SSG) so they can be served by Firebase Hosting, but allow nitro endpoints (deployed on Firebase Functions). I can run pnpm generate to get my SSG, but I'm not finding a way to build the nitro backend WITHOUT serving the static content. Any ideas on how we can do that?

2 Replies

kapa.ai•4mo ago

Hi @Renato L.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve full SSG (static site generation) for your Nuxt pages (to be served by Firebase Hosting) while also deploying Nitro server endpoints (API routes) to Firebase Functions, you are essentially looking for a hybrid deployment: static HTML for your pages, and serverless functions for your API. Based on the knowledge sources, here’s what is supported and what the limitations are: - Running nuxi generate (or pnpm generate) will prerender your pages and output static files for hosting, but it will not output a server for your API routes—API endpoints will not be available at runtime in this mode, as no server is included in the output folder. This is by design for static hosting and SSG in Nuxt 3 Universal Rendering. - Running nuxi build with a server preset (like Firebase Functions) will output a Nitro server that can handle API routes at runtime, but by default, it does not prerender your pages as static HTML unless you configure prerendering explicitly Deployment. A similar scenario is discussed in a Stack Overflow post, where the solution was to configure Nitro’s prerender option to crawl and prerender all non-API routes, while ignoring /api so those routes are handled by the server (Firebase Functions) at runtime:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/'],
      ignore: ['/api']
    }
  }
})

export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/'],
      ignore: ['/api']
    }
  }
})

This setup, when used with nuxi build and the appropriate Nitro preset (e.g., firebase), will: - Prerender all your pages (SSG) for static hosting. - Output a server bundle (for Firebase Functions) that handles your API routes at runtime. You will need to deploy the static output to Firebase Hosting and the server output to Firebase Functions. This hybrid approach is supported by Nitro and is the recommended way to achieve your goal Stack Overflow: SSG + API routes. Summary:
- Use nuxi build with the firebase preset and the above nitro.prerender config. - Deploy the static output to Firebase Hosting. - Deploy the server output (API) to Firebase Functions. If you need more granular control, refer to the Nuxt prerendering docs and Nitro deployment docs. If you need a step-by-step deployment guide for Firebase, the knowledge sources do not provide one, but the configuration above is the key to enabling both SSG and serverless API endpoints. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@343939339094327296> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Pre-render for Firebase Hosting, Nitro deploy to firebase functions

Did you find this page helpful?