Home

Hosting an Astro Project on Firebase

Firebase announced at Google I/O 2023 that they were launching support for hosting Astro projects. This is great news for Astro developers as Firebase is a great platform for hosting static sites at it’s free tier is generous.

When I went to deploy my Astro SSR project to Firebase I could not get it to display when I went to the URL. I ran across this Stack Overflow post hoping to find the answer but it had gone unanswered (it had only been lass than a day). After some digging around I did find the answer and I’m sharing it here in case anyone else runs into this issue.

This isn’t documented anywhere specifically for Astro but I followed the Next.js instructions and the app is working. The key parts are:

firebase experiments:enable webframeworks

firebase init hosting and answer yes to “Do you want to use a web framework? (experimental)”

Then when you run firebase deploy you will see that the build process looks completely different. Hope this helps.

P.S. Austin Crim responded to my answer with some additional information. I’m including it here for reference. I had my adapter mode set to standalone and it was working but the middleware mode seems like the correct one to use.

astro.config.mjs

import { defineConfig } from 'astro/config';
import node from '@astrojs/node'

// https://astro.build/config
export default defineConfig({
  adapter: node({
    mode: "middleware"
  })
});

Tags: googlefirebaseastro