Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For a client-rendered Angular single-page app, deploy its production build to Firebase Hosting. Set the Hosting public directory to the folder containing the built index.html and assets, enable the single-page-app rewrite during setup, then run firebase deploy --only hosting. If the app needs server-side rendering (SSR) or a full-stack framework deployment, evaluate Firebase App Hosting instead.

Choose Firebase Hosting or App Hosting

The right Firebase product depends on what the Angular app must serve. A static single-page app (SPA) can use Firebase Hosting. SSR and full-stack framework deployments call for a framework-oriented option.

Angular app Starting point Why
Client-rendered SPA with static build files Firebase Hosting The standard Hosting workflow serves static files and supports rewrites for client-side routes.
SSR, prerendered, or full-stack app Evaluate Firebase App Hosting Firebase documents built-in Angular support and positions App Hosting for framework-oriented deployment.
Already using Firebase’s Angular framework-aware Hosting experiment Plan a move to App Hosting Firebase says the experiment is closed to new participants and recommends that existing participants graduate to App Hosting.

Firebase’s framework-aware Angular Hosting integration is described as an early public preview; it is not the stable path to choose for a new project. Firebase says App Hosting combines CDN and server-side rendering with improved GitHub integration. App Hosting’s infrastructure uses Cloud Build, Cloud Run, and Cloud CDN. See Firebase’s Angular integration guidance and its App Hosting overview.

Deploy a static Angular app to Firebase Hosting

1. Build the app and locate its public files

Run the production build using the command and configuration for your Angular project. Then inspect the generated output and identify the directory that contains the browser-ready index.html and assets. Output paths vary by project configuration, so do not assume a particular dist path.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

2. Initialize Hosting from the project directory

Open a terminal in the Angular project directory and run:

firebase init hosting

Select the intended Firebase project, or configure project aliases if you work with more than one. When prompted for the public directory, enter the path to the built files—not merely the project root. For an Angular app using client-side routes, choose the single-page-app configuration. The Firebase Hosting quickstart explains this setup and the rewrite configuration it adds.

Rank #2
Sale
HTML and CSS: Design and Build Websites
  • HTML CSS Design and Build Web Sites
  • Comes with secure packaging
  • It can be a gift option

3. Check the Hosting configuration

Before deploying, inspect firebase.json. Its Hosting public directory should point to the build output identified above, and its rewrite configuration should send app routes to index.html when appropriate. That fallback lets Angular handle routes such as /about when a visitor opens one directly or refreshes the page.

Firebase’s CLI uses firebase.json to determine which files and settings to deploy. The .firebaserc file stores project aliases. Check both so the deployment uses the intended project and configuration; see the Firebase CLI reference.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

4. Deploy only Hosting

From the project directory, run:

firebase deploy --only hosting

This deploys Hosting content and configuration. A plain firebase deploy can deploy all configured deployable resources in the directory, so the Hosting-only command is useful when that is your intended scope. It does not deploy other resources such as functions or database rules.

5. Verify the live app and its routes

Open the Firebase-provisioned site address, typically under the project’s web.app or firebaseapp.com subdomain, as described in the Hosting quickstart. Check that the landing page loads, assets resolve, and a nested Angular route works when opened directly and refreshed. Firebase also documents local testing and temporary preview channels in its preview and deploy guide.

Rank #4
Sale
Web Design with HTML, CSS, JavaScript and jQuery Set
  • Brand: Wiley
  • Set of 2 Volumes
  • A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers

Optional next steps

  • Custom domain: Firebase Hosting supports connecting a custom domain; see the Firebase Hosting overview.
  • Team review: Use preview channels to share a temporary version before making it live. The preview guide covers local testing and previews.
  • GitHub workflow: Hosting supports GitHub integration; for framework-oriented Angular deployment, review App Hosting.
  • Rollback: Firebase documents rollback through the Hosting console. Consult the Hosting documentation for the current controls.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

What a successful Hosting deploy does—and does not—mean

A successful --only hosting deployment confirms that Hosting content and configuration were deployed to the selected project. It does not establish that application security, database rules, backend configuration, or other Firebase resources are correct. If the app depends on functions or database rules, deploy those resources with the appropriate scope and verify them separately.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.