Deploying with Firebase App Hosting
Firebase offers a powerful and flexible new platform for hosting and managing fullstack web applications and it is called App Hosting. It's easy to use, scalable, and reliable, and has built-in framework support for Next.js and Angular applications.
It uses GitHub integration through installation of the Firebase app on your GitHub account to simplify the creation of a CI/CD pipeline, and the integration of all other Firebase products you might be using in your application, such as Firebase Authentication and Cloud Firestore.
In this guide, we'll walk through the process of creating a Firebase project, setting up App Hosting, and managing your environment variables securely using Google Cloud Secret Manager.

by Brett Eastman

Creating a Firebase Project
1
Sign In
Sign into the Google account you want to use for your Firebase project.
2
Access Console
Go to the Firebase console at https://console.firebase.google.com/.
3
Add Project
Click "Add Project", give it a name, and press continue. You can skip setting up Google Analytics or other Firebase products unless needed, or add later. Or, if you already have a project added to Firebase you would like to use, select it now.
4
Upgrade Plan
For App Hosting, you need to upgrade to the Blaze plan, which will be very cheap, even for large-ish projects, but it is not free. Here is a price breakdown:https://firebase.google.com/pricing.
Setting Up App Hosting
💡You can also use Firebase CLI, but here I will show you how to do it using the Firebase console
1
Access App Hosting
In the Firebase console, navigate to Build > App Hosting > Get Started.
2
Connect to GitHub
Authorize and install the Firebase app on your GitHub account. Select which repositories you wish to connect.
(The connection between Firebase and GitHub is stored securely in Google Cloud's Developer Connect)
3
Import Repository
Import your repo and set the app's root directory (default is '/').
4
Configure Settings
Set the live branch (usually main) and keep automatic rollouts enabled. This updates your deployed app every time you merge to main.
Deploying Your App
1
Name Your Backend
Choose a name for your app hosting backend, which is the collection of all of your cloud services.
2
Trigger Deployment
Click "Finish and Deploy" to initiate the first rollout. This process takes about 5-7 minutes.
3
Access Deployed App
Once completed, you will be able to access your free domain under "domains". The deployed app will be served at this generated url, which conforms to the following format: backend-id—project-id.us-central1.hosted.app
4
Manage Environment Variables
Create or relocate your environment variables, potentially using Google Secrets in Cloud Storage.
Introduction to Cloud Secrets
Local Development
Secrets and API keys should never be checked into source code. When working locally, developers most often use a .env or .env.local file to store confidential information.
Deployment Solution
For deployment, Google Secrets Manager provides a secure way to store these variables.
Preferred Method
The Firebase CLI is my recommendation for creating and managing secrets in Google Secrets Manager, although you may also use the Firebase Console.
Setting Up Cloud Secrets
1
Install Firebase CLI
Open up your terminal and ensure you have the latest version of Firebase CLI installed. Instructions can be found at https://firebase.google.com/docs/cli.
2
Login to Firebase
Use 'firebase login' or 'firebase login:use <your-email>' to log in to your desired account.
3
Set Secrets
Run 'firebase apphosting:secrets:set' followed by the secret name, e.g., 'firebase apphosting:secrets:set firebase-api-key'.
When prompted, paste the secret data.
4
Grant Access
You will also be prompted to grant your App Hosting backend service account access to the secret. Select "Y" to do so.
Managing apphosting.yaml
💡apphosting.yaml is a config file that holds environment variables, secret bindings, and runtime settings for your backend.
1
Automatic Creation
App Hosting will offer to add the secret or create the apphosting.yaml file for you. Select "Y" to do this automatically.
2
Secret References
The apphosting.yaml file holds references to your secrets, allowing you to safely check it into source code without revealing sensitive information.
3
Version Control
You can create multiple versions of a secret, enabling smooth rotation and easy rollback if needed. This also provides an audit trail.
4
Updating Secrets
To create a new version of an existing secret, use the same command 'apphosting:secrets:set' .
View all versions with the command 'apphosting:secrets:describe'.
Advanced Secret Management
By default, the latest version of a secret is used. However, you can specify a particular version in your apphosting.yaml file. For example, if you wanted to roll back to version 1 of a Google API key secret, you would update your yaml file like this:
env:
  - variable: NEXT_PUBLIC_FIREBASE_API_KEY
    secret: firebase-api-key@1
End Notes
Firebase App Hosting is a brand new product and is currently available as a public preview. I am currently using it on a Next.js fullstack app my web development agency has built for a client. So far, it has been working flawlessly and I have confidence in it. But it is something you may want to keep in the back of your mind.
Firebase App Hosting is not to be confused with Firebase Hosting, which has been around since 2014. If you are building a static website, or any web app without a backend, Firebase Hosting is the better choice.
For more information, see the following links:
Made with