firebase-framework-tools
firebase-framework-tools copied to clipboard
Experimental addon to the Firebase CLI to add web framework support
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:
- Run
firebase serve
from the terminal. This should build your Next.js app and serve it using the Firebase CLI. - 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:
- Run
firebase deploy
from the terminal. - Check your website on:
SITE_ID.web.app
orPROJECT_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:
- Run
firebase serve
from the terminal. This should build your Angular app and serve it using the Firebase CLI. - 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:
- Run
firebase deploy
from the terminal. - Check your website on:
SITE_ID.web.app
orPROJECT_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