↑ ↓ navigate↵ selectesc close

App Hosting has in-console environment variables and faster builds in Firebase: Web Architecture & Implementation Guide

CodingCat.dev tutorial cover image
Alex Patterson
Alex Patterson

Deploying server-rendered Next.js, Angular, or Astro apps alongside Firebase used to require stitching together custom Cloud Functions rewrites or managing separate Cloud Run containers by hand. Following the announcement of App Hosting has in-console environment variables and faster builds by Julia Reid on the Official Firebase Blog (2026-03-12), here is our hands-on CodingCat.dev breakdown of what actually shipped, how it works under the hood, and how we wire it into production TypeScript, Next.js, Astro, SvelteKit, React, and Angular applications. We’re thrilled to walk you through a fresh set of updates for Firebase App Hosting! These new features, designed to speed up your deployment workflow, include an interface for managing environment variables in the Firebase console and faster deployment times.

The Mental Model: Why App Hosting has in-console environment variables and faster builds Matters for Web Devs

As a Google Developer Expert (GDE) for Firebase and Senior Solutions Engineer at CodingCat.dev, I evaluate every Firebase update through one lens: does it reduce boilerplate while keeping our runtime security and cloud bills predictable? Firebase App Hosting automates Git-driven Cloud Build pipelines, Cloud Run scaling, CDN caching, and Secret Manager integration so full-stack SSR frameworks run natively on Google Cloud infrastructure.

AJ Pro-Tip from Alex: Set explicit maxInstances and concurrency limits in your apphosting.yaml file and cache public SSR responses at the CDN edge so traffic spikes do not trigger unnecessary Cloud Run cold starts.

How It Works: Technical Breakdown & Implementation

Manage environment variables in the Firebase console

Today, In this update, the Firebase team announced that you can add and edit App Hosting environment variables in the Firebase console!

You can add environment variables when creating a new App Hosting backend:

Or add them later in backend Settings. To manage environment variables for an existing backend, navigate to View Backend >> Settings >> Environment and then add, edit, or delete environment variables.

Pro tip: To speed up migrating an existing app to App Hosting, you can copy and paste content directly from your dotenv files into the Firebase console.

Environment variables set in the console are visible to any user who has access to your project. For sensitive information like API keys, I recommend using Cloud Secret Manager for more granular access control. You can use the firebase apphosting:secrets:set CLI command to create and add secret references in apphosting.yaml.

The Firebase console and apphosting.yaml can be used in tandem to define environment variables and secrets for your backend. Firebase App Hosting merges the configurations, with console values always taking precedence over conflicting values in apphosting.yaml. Learn more about the order of precedence in the docs.

To view the final set of merged environment variables for a rollout, navigate to the Rollouts tab and click on the rollout. In the side panel, you’ll find the complete list of environment variables used and their sources.

You’ll notice a few Firebase system environment variables: FIREBASE_CONFIG and FIREBASE_WEBAPP_CONFIG. These are populated by Firebase App Hosting at build time to automatically initialize the Firebase SDKs. You can override the default values for these system environment variables in the Firebase console or in apphosting.yaml.

To learn more about App Hosting environment configuration, check out Configure and manage App Hosting backends.

Faster builds

Firebase App Hosting uses Cloud Native Buildpacks to transform your application source code into production-ready container images. We recently optimized the App Hosting build process by directly invoking the buildpack binary rather than using the pack CLI command, eliminating an unnecessary image pull step. Our internal monitoring suggests this small change has reduced p50 build times by ~18% and p99 build times by ~27%.

Improving App Hosting builds continues to be a focus area for us. Stay tuned for future optimizations!

Show Me the Code: TypeScript & Web SDK Setup

Here is the production baseline pattern we use at CodingCat.dev when wiring App Hosting has in-console environment variables and faster builds into a modern TypeScript web application:

import { initializeApp, getApps } from "firebase/app";
import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

export const app = getApps().length ? getApps()[0] : initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);

Production Web Architecture & Security Checklist

Whether we are deploying on Firebase App Hosting, Cloudflare Workers, or Vercel, shipping Next.js features to production requires defense-in-depth across three layers:

  • Enforce Firebase App Check & Attestation: Protect your web endpoints, Cloud Functions, Data Connect GraphQL resolvers, and Firebase AI Logic calls against unauthorized replay or billing abuse using Firebase App Check with reCAPTCHA Enterprise.
  • Validate Locally with the Firebase Emulator Suite: Run deterministic integration tests against local Firestore, Auth, Functions, and Data Connect PostgreSQL emulators before promoting schema or rule changes to production.
  • Keep Server & Client Boundaries Type-Safe: Use the modular Firebase Web SDK and generated TypeScript bindings so SSR frameworks like Next.js, Astro, SvelteKit, and Angular serialize state cleanly without hydration flickers.

Conclusion

Accelerate your full-stack web and AI development by pairing App Hosting has in-console environment variables and faster builds with strict Security Rules, Firebase App Check, and local emulator testing. Come tell us on X (@CodingCatDev) and LinkedIn (CodingCat.dev) how you are using Firebase in your stack, and subscribe to the CodingCat.dev YouTube Channel so you don't miss what we build next!

Watch Our Related Firebase Video Tutorial on YouTube

Want to see how we architect and debug Firebase web applications live? Watch our related CodingCat.dev session Building a web application with Next.js and Firebase - Firebase Summit 2021 below, and make sure to Subscribe to CodingCat.dev on YouTube for weekly full-stack web and AI deep dives:

Resources, Official Docs & Related CodingCat.dev Guides

Frequently Asked Questions (FAQ)

What are the key capabilities introduced in App Hosting has in-console environment variables and faster builds?

App Hosting has in-console environment variables and faster builds (announced 2026-03-12 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, Next.js, Serverless workloads. We’re thrilled to walk you through a fresh set of updates for Firebase App Hosting! These new features, designed to speed up your deployment workflow, include an interface for managing environment variables in the Firebase console and faster deployment times. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use App Hosting has in-console environment variables and faster builds with Next.js, SvelteKit, React, or Angular?

Web developers can integrate these features using the modular Firebase JavaScript/TypeScript SDK, Firebase Data Connect web bindings, and Firebase App Hosting. Always pair client-side SDK initialization with Firebase App Check and strict Security Rules, and test locally with the Firebase Local Emulator Suite before deploying.

Where can I watch video tutorials on Firebase Web and AI development?

You can watch our hands-on Firebase video walkthroughs on the CodingCat.dev YouTube Channel, including Building a web application with Next.js and Firebase - Firebase Summit 2021, and follow us on X (@CodingCatDev) for weekly full-stack tutorials.