Ask your question and get a summary of the document by referencing this page and the AI provider of your choice
If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
Firebase Hosting is a service provided by Google’s Firebase app development platform, which can be used to deploy an Astro site.
See our separate guide for adding Firebase backend services such as databases, authentication, and storage.
Project Configuration
Your Astro project can be deployed to Firebase as a static site, or as a server-side rendered site (SSR).
Static Site
Your Astro project is a static site by default. You don’t need any extra configuration to deploy a static Astro site to Firebase.
Adapter for SSR
To enable SSR in your Astro project and deploy on Firebase add the Node.js adapter.
:::note Deploying an SSR Astro site to Firebase requires the Blaze plan or higher. :::
How to deploy
<PackageManagerTabs> <Fragment slot="npm"> ```shell npm install firebase-tools ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm add firebase-tools ``` </Fragment> <Fragment slot="yarn"> ```shell yarn add firebase-tools ``` </Fragment> </PackageManagerTabs>2. Authenticate the Firebase CLI with your Google account. This will open a browser window where you can log in to your Google account.
<PackageManagerTabs> <Fragment slot="npm"> ```shell npx firebase login ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm exec firebase login ``` </Fragment> <Fragment slot="yarn"> ```shell yarn firebase login ``` </Fragment> </PackageManagerTabs>3. Enable experimental web frameworks support. This is an experimental feature that allows the Firebase CLI to detect and configure your deployment settings for Astro.
<PackageManagerTabs> <Fragment slot="npm"> ```shell npx firebase experiments:enable webframeworks ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm exec firebase experiments:enable webframeworks ``` </Fragment> <Fragment slot="yarn"> ```shell yarn firebase experiments:enable webframeworks ``` </Fragment> </PackageManagerTabs>4. Initialize Firebase Hosting in your project. This will create a firebase.json and .firebaserc file in your project root.
<PackageManagerTabs> <Fragment slot="npm"> ```shell npx firebase init hosting ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm exec firebase init hosting ``` </Fragment> <Fragment slot="yarn"> ```shell yarn firebase init hosting ``` </Fragment> </PackageManagerTabs>5. Deploy your site to Firebase Hosting. This will build your Astro site and deploy it to Firebase.
<PackageManagerTabs> <Fragment slot="npm"> ```shell npx firebase deploy --only hosting ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm exec firebase deploy --only hosting ``` </Fragment> <Fragment slot="yarn"> ```shell yarn firebase deploy --only hosting ``` </Fragment> </PackageManagerTabs>