firebase-frameworks

Firebase CLI framework-awareness

Frameworks

	Built-in frameworks
	Next.js	Angular	Nuxt	Custom
SSR	✅	✅	🔜	👍
SPA	✅	✅	🔜	👍
SSG	✅	✅	🔜	👍
SWR/E	❌	❌	🔜	❌
Auth+SSR	✅	✅	🔜	👍
Status	🔬	🔬	🔬	🔬

Status

This repository is maintained by Googlers but is not a supported Firebase product. Issues here are answered by maintainers and other community members on GitHub on a best-effort basis.

Enable framework-awareness

This is an experimental addon to the Firebase CLI to add web framework support, to enable it call the following:

firebase --open-sesame frameworkawareness

Deploy Next.js

Easily deploy your Next.js application to Firebase and serve dynamic content to your users.

What you'll need before you begin

Prerequisites

• Firebase CLI version 10.9.1 or later (see installation instructions here)
• (optional) Billing enabled on your Firebase Project (if you plan to use SSR)

Initialize Firebase

To get started, you'll need to initialize Firebase for your framework project. Use the Firebase CLI for a new project, or modify firebase.json for an existing project.

Initialize a new project

Run the initialization command from the CLI: shell firebase init hosting

Initialize an existing project

Change your hosting config in firebase.json to have a source option, rather than a public option. For example:

{
  "hosting": {
    "source": "."
  }
}

Serve locally

You can test your integration locally by following these steps:

1. Run firebase serve from the terminal. This should build your Next.js app and serve it using the Firebase CLI.
2. Open your web app at the local URL returned by the CLI (usually http://localhost:5000)

Deploy your app to Firebase Hosting

When you're ready to share your changes with the world, deploy your Next.js app to your live site:

1. Run firebase deploy from the terminal.
2. Check your website on: SITE_ID.web.app or PROJECT_ID.web.app (or your custom domain, if you did setup one)

Common Configurations

Add cleanUrls option

By default, a page created on /pages/foo/bar.jsx is only accessible through the url /foo/bar.html. To make the page accessible on /foo/bar instead, add cleanUrls option to your hosting config in firebase.json.

{
  "hosting": {
    "source": ".",
    "cleanUrls": true
  }
}

Deploy Angular

Easily deploy your Angular application to Firebase and serve dynamic content to your users.

What you'll need before you begin

Prerequisites

• Firebase CLI version 10.9.1 or later (see installation instructions here)
• (optional) Billing enabled on your Firebase Project (if you plan to use SSR)

Initialize Firebase

To get started, you'll need to initialize Firebase for your framework project. Use the Firebase CLI for a new project, or modify firebase.json for an existing project.

Initialize a new project

Run the initialization command from the CLI:

firebase init hosting

Initialize an existing project

Change your hosting config in firebase.json to have a source option, rather than a public option. For example:

{
  "hosting": {
    "source": "."
  }
}

Serve locally

You can test your integration locally by following these steps:

1. Run firebase serve from the terminal. This should build your Angular app and serve it using the Firebase CLI.
2. Open your web app at the local URL returned by the CLI (usually http://localhost:5000)

Deploy your app to Firebase Hosting

When you're ready to share your changes with the world, deploy your Angular app to your live site:

1. Run firebase deploy from the terminal.
2. Check your website on: SITE_ID.web.app or PROJECT_ID.web.app (or your custom domain, if you did setup one)

Contributors

We'd love to accept your patches and contributions to this project. There are just a few small guidelines you need to follow. See CONTRIBUTING.

Building

$ cd <YOUR-GIT-CHECKOUT>
$ npm i
$ npm run build