From 43c50c8425dbf5e3dd943f5f717bcc92dd536e04 Mon Sep 17 00:00:00 2001 From: "Mohamed E." Date: Thu, 16 Oct 2025 23:22:17 +0300 Subject: [PATCH 1/4] Update Firebase Hosting instructions for Gatsby Added instructions for configuring Firebase Hosting with Gatsby 5.12 and above, including installation of Gatsby Firebase Adapter and its usage in gatsby-config.js. --- .../deploying-to-firebase.md | 35 ++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md b/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md index a08fce7c1a6b8..eb864c0207382 100644 --- a/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md +++ b/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md @@ -39,7 +39,40 @@ title: Deploying to Firebase Hosting When prompted to select your public directory, press enter. It will default to `public`, which is also Gatsby's default public directory. -4. Update the `firebase.json` with the following cache settings +4. Configure Firebase Hosting + + Depending on your Gatsby version, follow one of the two methods below. + + #### For Gatsby 5.12 and above + + Gatsby 5.12 introduced [adapters](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/adapters/), which automatically configure deployment targets. + To use Firebase Hosting with full support for **SSR**, **DSG**, and **Gatsby Functions**, install [Gatsby Firebase Adapter](https://github.com/mohatt/gatsby-adapter-firebase): + + ```shell + npm install gatsby-adapter-firebase + ``` + + Then add it to your `gatsby-config.js`: + + ```js + // gatsby-config.js + const firebaseAdapter = require('gatsby-adapter-firebase') + + module.exports = { + adapter: firebaseAdapter(), + } + ``` + During gatsby build, the adapter will automatically: + + - Generate or update your firebase.json + - Configure redirects, headers, and caching rules + - Package SSR, DSG, and API routes into Cloud Functions + + See [gatsby-adapter-firebase](https://github.com/mohatt/gatsby-adapter-firebase) on GitHub for advanced options and local emulator setup. + + #### For Gatsby versions below 5.12 + + Update the `firebase.json` with the following cache settings ```json { From 8c3dfb8d5ce8268f45c2bba49d257c4250b6ea24 Mon Sep 17 00:00:00 2001 From: "Mohamed E." Date: Fri, 17 Oct 2025 06:06:28 +0300 Subject: [PATCH 2/4] format Removed redundant bullet points and adjusted formatting for clarity. --- .../deploying-to-firebase.md | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md b/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md index eb864c0207382..a057fed24bd3a 100644 --- a/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md +++ b/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md @@ -33,7 +33,6 @@ title: Deploying to Firebase Hosting ``` This command will prompt you to: - - select the Firebase products you wish to set up. Be sure to select **Firebase Hosting**. - select the Firebase project you wish to use or create a new one, if you haven't done it previously. @@ -51,25 +50,25 @@ title: Deploying to Firebase Hosting ```shell npm install gatsby-adapter-firebase ``` - + Then add it to your `gatsby-config.js`: - + ```js // gatsby-config.js const firebaseAdapter = require('gatsby-adapter-firebase') - + module.exports = { adapter: firebaseAdapter(), } ``` + During gatsby build, the adapter will automatically: + - Generate or update your firebase.json + - Configure redirects, headers, and caching rules + - Package SSR, DSG, and API routes into Cloud Functions - - Generate or update your firebase.json - - Configure redirects, headers, and caching rules - - Package SSR, DSG, and API routes into Cloud Functions - See [gatsby-adapter-firebase](https://github.com/mohatt/gatsby-adapter-firebase) on GitHub for advanced options and local emulator setup. - + #### For Gatsby versions below 5.12 Update the `firebase.json` with the following cache settings @@ -142,9 +141,7 @@ All done! Once the deployment concludes, you can access your website using `fire Check the [Firebase Docs](https://firebase.google.com/docs/hosting/full-config) for information about how to customize your deployment further. Remember that each time you wish to redeploy your site, you will need to rerun `gatsby build` first. - - For automatic setup of builds that are deployed straight to Firebase: - +For automatic setup of builds that are deployed straight to Firebase: ## Limitations From 9c4cd79d0125702bc6966d07d68d39f16d7ac5f5 Mon Sep 17 00:00:00 2001 From: "Mohamed E." Date: Fri, 17 Oct 2025 06:08:24 +0300 Subject: [PATCH 3/4] fix format --- .../previews-deploys-hosting/deploying-to-firebase.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md b/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md index a057fed24bd3a..4e20ac499a4f0 100644 --- a/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md +++ b/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md @@ -55,7 +55,7 @@ title: Deploying to Firebase Hosting ```js // gatsby-config.js - const firebaseAdapter = require('gatsby-adapter-firebase') + const firebaseAdapter = require("gatsby-adapter-firebase") module.exports = { adapter: firebaseAdapter(), @@ -141,7 +141,9 @@ All done! Once the deployment concludes, you can access your website using `fire Check the [Firebase Docs](https://firebase.google.com/docs/hosting/full-config) for information about how to customize your deployment further. Remember that each time you wish to redeploy your site, you will need to rerun `gatsby build` first. -For automatic setup of builds that are deployed straight to Firebase: + + For automatic setup of builds that are deployed straight to Firebase: + ## Limitations From 545c70e23ce6640029e3d4d63dc8e0bc586241ac Mon Sep 17 00:00:00 2001 From: Mohamed Elkholy Date: Fri, 17 Oct 2025 07:42:11 +0400 Subject: [PATCH 4/4] fix format --- .../how-to/previews-deploys-hosting/deploying-to-firebase.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md b/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md index 4e20ac499a4f0..71dea508b6824 100644 --- a/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md +++ b/docs/docs/how-to/previews-deploys-hosting/deploying-to-firebase.md @@ -33,6 +33,7 @@ title: Deploying to Firebase Hosting ``` This command will prompt you to: + - select the Firebase products you wish to set up. Be sure to select **Firebase Hosting**. - select the Firebase project you wish to use or create a new one, if you haven't done it previously. @@ -63,6 +64,7 @@ title: Deploying to Firebase Hosting ``` During gatsby build, the adapter will automatically: + - Generate or update your firebase.json - Configure redirects, headers, and caching rules - Package SSR, DSG, and API routes into Cloud Functions