Firebase

Firebase app hosting

Preset: firebase_app_hosting

Project setup

When you deploy with Firebase App Hosting, the App Hosting preset will be run automatically at build time.

Firebase hosting (deprecated)

Preset: firebase

Project Setup

Using firebase CLI (recommended)

You may instead prefer to set up your project with the Firebase CLI, which will fetch your project ID for you, add required dependencies (see above) and even set up automated deployments via GitHub Actions (for hosting only). Learn about installing the firebase CLI.

1. Install firebase CLI globally

Always try to use the latest version of the Firebase CLI.

npm install -g firebase-tools@latest

Note: You need to be on ^11.18.0 to deploy a nodejs18 function.

2. Initialize your firebase project

firebase login
firebase init hosting

When prompted, you can enter .output/public as the public directory. In the next step, do not configure your project as a single-page app.

Once complete, add the following to your firebase.json to enable server rendering in Cloud Functions:

{
  "functions": { "source": ".output/server" },
  "hosting": [
    {
      "site": "<your_project_id>",
      "public": ".output/public",
      "cleanUrls": true,
      "rewrites": [{ "source": "**", "function": "server" }]
    }
  ]
}

You can find more details in the Firebase documentation.

Alternative method

If you don't already have a firebase.json in your root directory, Nitro will create one the first time you run it. In this file, you will need to replace <your_project_id> with the ID of your Firebase project. This file should then be committed to the git.

1. Create a .firebaserc file

It is recommended to create a .firebaserc file so you don't need to manually pass your project ID to your firebase commands (with --project <your_project_id>):

{
  "projects": {
    "default": "<your_project_id>"
  }
}

This file is usually generated when you initialize your project with the Firebase CLI. But if you don't have one, you can create it manually.

2. Install firebase dependencies

Then, add Firebase dependencies to your project:

npm i firebase-admin firebase-functions firebase-functions-test

yarn add firebase-admin firebase-functions firebase-functions-test

pnpm i firebase-admin firebase-functions firebase-functions-test

bun i firebase-admin firebase-functions firebase-functions-test

deno i npm:firebase-admin firebase-functions firebase-functions-test

3. Log into the firebase CLI

Make sure you are authenticated with the firebase cli. Run this command and follow the prompts:

npx firebase-tools login

yarn dlx firebase-tools login

pnpm dlx firebase-tools login

bunx firebase-tools login

deno run -A npm:firebase-tools login

Local preview

You can preview a local version of your site if you need to test things out without deploying.

NITRO_PRESET=firebase npm run build
firebase emulators:start

Build and deploy

Deploy to Firebase Hosting by running a Nitro build and then running the firebase deploy command.

NITRO_PRESET=firebase npm run build

npx firebase-tools deploy

yarn dlx firebase-tools deploy

pnpm dlx firebase-tools deploy

bunx firebase-tools deploy

deno run -A npm:firebase-tools deploy

If you installed the Firebase CLI globally, you can also run:

firebase deploy

Using 2nd generation firebase functions

• Comparison between 1st and 2nd generation functions

To switch to the more recent and, recommended generation of firebase functions, set the firebase.gen option to 2:

export default defineNitroConfig({
  firebase: {
    gen: 2
    // ...
  }
})

export default defineNuxtConfig({
  nitro: {
    firebase: {
      gen: 2
      // ...
    }
  }
})

If you already have a deployed version of your website and want to upgrade to 2nd gen, see the Migration process on Firebase docs. Namely, the CLI will ask you to delete your existing functions before deploying the new ones.

Options

You can set options for the firebase functions in your nitro.config.ts file:

export default defineNitroConfig({
  firebase: {
    gen: 2,
    httpsOptions: {
      region: 'europe-west1',
      maxInstances: 3,
    },
  },
});

export default defineNuxtConfig({
  nitro: {
    firebase: {
      gen: 2,
      httpsOptions: {
        region: 'europe-west1',
        maxInstances: 3,
      },
    },
  },
});

You can also set options for 1st generation Cloud Functions if the gen option is set to 1. Note these are different from the options for 2nd generation Cloud Functions.

Runtime Node.js version

You can set custom Node.js version in configuration:

export default defineNitroConfig({
  firebase: {
    nodeVersion: "20" // Can be "16", "18", "20" or "22"
  },
});

export default defineNuxtConfig({
  nitro: {
    firebase: {
      nodeVersion: "20" // Can be "16", "18", "20" or "22"
    },
  },
});

Firebase tools use the engines.node version in package.json to determine which node version to use for your functions. Nitro automatically writes to the .output/server/package.json with configured Node.js version.

You might also need to add a runtime key to your firebase.json file:

{
  "functions": {
    "source": ".output/server",
    "runtime": "nodejs20"
  }
}

You can read more about this in Firebase Docs.

If your firebase project has other cloud functions

You may be warned that other cloud functions will be deleted when you deploy your nitro project. This is because nitro will deploy your entire project to firebase functions. If you want to deploy only your nitro project, you can use the --only flag:

firebase deploy --only functions:server,hosting

Advanced

Renaming function

When deploying multiple apps within the same Firebase project, you must give your server a unique name in order to avoid overwriting your functions.

You can specify a new name for the deployed Firebase function in your configuration:

export default defineNitroConfig({
  firebase: {
    serverFunctionName: "<new_function_name>"
  }
})

export default defineNuxtConfig({
  nitro: {
    firebase: {
      serverFunctionName: "<new_function_name>"
    }
  }
})