Deploy Angular & Next.js apps with App Hosting, now GA! in Firebase: Web Architecture & Implementation Guide

Q: How It Works: Technical Breakdown & Implementation?

Since that initial preview, we’ve continued to ship major updates to App Hosting to make it easier to build and deploy modern web apps with Firebase. Today, In this update, the Firebase team announced that Firebase App Hosting has reached General Availability (GA)! This milestone brings even more features designed to help you get to market faster and scale.

For years, choosing Firebase meant trading away relational SQL joins, strict foreign keys, and pgvector similarity search in favor of NoSQL document denormalization. Following the announcement of Deploy Angular & Next.js apps with App Hosting, now GA! by Julia Reid, Jeff Huleatt on the Official Firebase Blog (2025-04-09), 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. Last year at Google I/O 2024, we launched the first public preview of App Hosting, our serverless web hosting service built for modern, full-stack web apps - think streamlined deployments for Angular and Next.js in a fully managed environment. You import your GitHub repo, and App Hosting handles the rest. App Hosting automatically sets up CI/CD to run static site generation, deploys server-rendered content to Cloud Run, caches static content on a global CDN, and takes care of all the networking bits in between. By abstracting away the infrastructure, you can focus on building your web apps, knowing you have an automatically scaling and secure platform.

The Mental Model: Why Deploy Angular & Next.js apps with App Hosting, now GA! 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 Data Connect bridges that gap by pairing a managed Google Cloud SQL for PostgreSQL instance with a declarative GraphQL schema compiler that automatically generates type-safe TypeScript, React, and Angular SDKs alongside server-enforced @auth directives.

AJ Pro-Tip from Alex: Keep your authorization logic inside your Data Connect GraphQL operations using @auth(level: USER) and server-evaluated expressions like auth.uid and request.time rather than trusting client-supplied user IDs in query variables.

How It Works: Technical Breakdown & Implementation

Since that initial preview, we’ve continued to ship major updates to App Hosting to make it easier to build and deploy modern web apps with Firebase. Today, In this update, the Firebase team announced that Firebase App Hosting has reached General Availability (GA)! This milestone brings even more features designed to help you get to market faster and scale.

Ready for production use

Now that App Hosting is GA, it’s fully supported for production deployments. Deploy your production Angular and Next.js apps with confidence, knowing they’re backed by a platform meeting stringent GA requirements from Google Cloud and covered by the Google Cloud Platform Terms of Service.

Ready to migrate your production app to App Hosting? You’ll probably need to migrate your domain. App Hosting’s new “Migrate a domain” flow ensures a seamless transition with zero downtime for your app. This new flow walks you through the correct order of DNS record updates so that your users and business aren’t disrupted when you switch.

A critical aspect of production readiness is robust security, and that begins with protecting sensitive information like API keys from unauthorized use. With Firebase App Hosting, you can securely store API keys as secrets and control who has access using the streamlined integration with Cloud Secret Manager.

Besides making App Hosting production-ready, there are significant new features since the initial preview, all designed to:

Provide greater flexibility and customization

Keep reading to learn about everything that’s new since our preview launch last year.

Unlock rapid innovation

App Hosting accelerates time-to-market by managing your entire stack and offering seamless integration with GitHub for automated deployments. Over the past year, The Firebase team added new features to help you build faster, with confidence.

It’s much easier and faster if you can test code locally before deploying to staging or production. Now part of the Firebase Local Emulator Suite, App Hosting has a new emulator-specific configuration file, where you can make overrides for local development. These overrides live in apphosting.emulator.yaml, which is automatically created by the Firebase CLI. The emulator now dynamically loads secrets from Cloud Secret Manager, which means you can reference secrets in your local config and safely check it into source control to share with teammates.

Once you’ve tested locally, you’re ready to deploy. However, your local and production environments may be out of sync, causing your build to fail. With App Hosting’s improved build error messages, you can more easily diagnose and resolve build failures so you can get to production faster.

After you roll out a new version, use metrics in the App Hosting dashboard to monitor the health and resource usage of your web app. Each rollout is marked in your usage graphs so you can quickly know which commit may have caused an issue.

If you identify an issue, you can quickly roll back to a previous version of your app - without rebuilding, using App Hosting’s new rollbacks feature. Skipping the build leads to a faster recovery and ensures consistency in generated static content.

Opinionated, but flexible

App Hosting simplifies your infrastructure but doesn’t sacrifice control. While opinionated, it’s also flexible, letting you make customizations to fit your specific app and business requirements.

App Hosting provides defaults for Cloud Run, but you can customize your backend configuration, aspects like concurrency, CPU, and memory limits, depending on your app’s compute needs.

App Hosting also supports granular environment configurations. Not only can you define multiple environment configurations for the same codebase, you can control where each environment variable is used, either at build time or run time. This gives you more control over how your secrets and data are being handled, ensuring they aren’t accessible in more places than they need to be.

Since last year’s preview, we’ve enhanced App Hosting’s flexibility with more customization features. You can now:

Add a wildcard subdomain as a custom domain to host multi-tenant applications and map hundreds, or even thousands, of subdomains to a single backend.
Connect App Hosting to a Google Cloud VPC network, letting you expand your app’s capabilities by integrating with backend services, such as a Redis cache.
Override App Hosting’s smart defaults for build and start commands, giving you more control over how your app is run.

You can also customize where your app lives. App Hosting integrates with a global CDN for fast delivery, but you can serve the app from a region close to your users to reduce latency for uncached content.

We first launched App Hosting with support for us-central1 and have added regions in Europe and Asia for better global coverage. App Hosting is available in us-central1 (Iowa), asia-east1 (Taiwan), and europe-west4 (Netherlands).

Your favorite frameworks

App Hosting is optimized for modern, server-rendered JavaScript frameworks like Angular and Next.js. Today, In this update, the Firebase team announced that App Hosting has a new community framework adapter model, with preview support for Nitro and Astro.

App Hosting has framework adapters to automatically build and deploy apps. The Angular and Next.js adapters are officially supported and maintained by the App Hosting team, but we want App Hosting to work well for all modern web frameworks. To allow for deployments with more frameworks, we published an open output bundle specification and worked with the Nitro team to build the first App Hosting community adapter, released in Nitro 2.11.0.

Since many frameworks are built on top of Nitro, this unlocks more frameworks you can use with App Hosting, including Nuxt, Analog, TanStack Start, and Vinxi.

We also built a proof-of-concept adapter for Astro and are looking forward to more community adapters in the future.

To get started, check out the new Angular and Next.js starter apps! Get started by cloning an Angular or Next.js template from the firebase-framework-tools repository, or by running npm init @apphosting in your terminal.

These sample apps range from Hello World starters to e-commerce apps built with other Firebase products, like Genkit, Auth, and Data Connect. Building a full-stack web app often involves more than hosting, so we want to showcase how to use App Hosting with the rest of Firebase, giving you a one-stop shop for all your app’s building blocks.

These starter apps use the latest Firebase JavaScript SDK, which now works better than ever with full-stack web frameworks.

The Firebase JavaScript SDK for modern web apps

If you have used Firebase, you’re familiar with the SDKs for web development: the JavaScript SDK (which traditionally runs in the browser) and the Admin SDK (which runs in trusted backend environments).

The emergence of full-stack JavaScript frameworks, which run seamlessly across both client and server, revealed challenges in this distinct client/server SDK separation. Over the past year, The Firebase team improved the JavaScript SDK to make it easier to build modern, full-stack web apps with Firebase.

The Firebase Admin SDK is useful for talking to other Firebase services, but it has one big problem for server-rendered web apps: it bypasses all security rules. The Firebase team introduced FirebaseServerApp, which is a modified version of the Firebase JavaScript SDK meant specifically to be run on the server by SSR web apps. Now, you can read from and write to Firestore and Cloud Storage with user credentials from the user that made a request to your backend.

To learn more, see the new guide: Use Firebase in dynamic web apps with SSR.

Firebase Authentication was originally designed around single-page apps, and thus didn’t have support for cookie authentication. As a result, synchronizing auth state between the client and server in full-stack web apps was difficult.

Firebase Auth now has preview support for automatic cookie sync in Next.js apps with a custom middleware library (released in version 11.6.0). This preview implementation is just the beginning of our journey; watch this space as we continue to refine the cookie-based authentication experience!

We know juggling the Firebase config object can be tricky, especially if you have multiple backends for development and production. App Hosting now automatically configures the SDKs for you, so you can call initializeApp() without any arguments.

Besides being convenient, it lets you safely deploy the same codebase across environments, preventing your staging app from accidentally accessing production data.

Show Me the Code: TypeScript & Web SDK Setup

Here is the production baseline pattern we use at CodingCat.dev when wiring Deploy Angular & Next.js apps with App Hosting, now GA! into a modern TypeScript web application:

# Firebase Data Connect Schema & Type-Safe Web Query
type Project @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  ownerUid: String! @default(expr: "auth.uid")
  createdAt: Timestamp! @default(expr: "request.time")
}

query ListUserProjects @auth(level: USER) {
  projects(where: { ownerUid: { eq_expr: "auth.uid" } }, orderBy: [{ createdAt: DESC }]) {
    id
    title
    createdAt
  }
}

Production Web Architecture & Security Checklist

Whether we are deploying on Firebase App Hosting, Cloudflare Workers, or Vercel, shipping AI 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 Deploy Angular & Next.js apps with App Hosting, now GA! 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 Firebase SQL with Data Connect 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

Primary Release Source: Deploy Angular & Next.js apps with App Hosting, now GA! on the Official Firebase Blog (published 2025-04-09 by Julia Reid, Jeff Huleatt)
Official Firebase Documentation: Firebase Developer Docs & Web SDK Reference
Related on CodingCat.dev: Introducing the AI-Powered App Testing Agent
Related on CodingCat.dev: What's new in Firebase at Cloud Next 2025
Related on CodingCat.dev: Firebase SQL with Data Connect
Related on CodingCat.dev: Build a Custom No-Code App in 90 Minutes

Frequently Asked Questions (FAQ)

What are the key capabilities introduced in Deploy Angular & Next.js apps with App Hosting, now GA!?

Deploy Angular & Next.js apps with App Hosting, now GA! (announced 2025-04-09 by the Firebase team) enhances the platform for Firebase, Google Cloud, Web Dev, AI, SQL, Next.js, Angular, TypeScript, Security, Serverless workloads. Last year at Google I/O 2024, we launched the first public preview of App Hosting, our serverless web hosting service built for modern, full-stack web apps - think streamlined deployments for Angular and Next.js in a fully managed environment. You import your GitHub repo, and App Hosting handles the rest. App Hosting automatically sets up CI/CD to run static site generation, deploys server-rendered content to Cloud Run, caches static content on a global CDN, and takes care of all the networking bits in between. By abstracting away the infrastructure, you can focus on building your web apps, knowing you have an automatically scaling and secure platform. Developers can review the primary announcement on the Firebase Blog alongside our implementation patterns and production checklist above.

How do web developers use Deploy Angular & Next.js apps with App Hosting, now GA! 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 Firebase SQL with Data Connect, and follow us on X (@CodingCatDev) for weekly full-stack tutorials.