How to Deploy Angular to Firebase Hosting Quickly

To deploy an Angular app to Firebase, first build your app using ng build --prod to create optimized files. Then, initialize Firebase in your project with firebase init, select Hosting, and finally deploy using firebase deploy.

Syntax

Deploying Angular to Firebase involves these main commands:

• ng build --prod: Builds the Angular app for production, creating static files in the dist/ folder.
• firebase init: Sets up Firebase Hosting in your project folder and creates configuration files.
• firebase deploy: Uploads your built app files to Firebase Hosting to make your app live.

bash

ng build --prod
firebase init
firebase deploy

Example

This example shows how to deploy a simple Angular app to Firebase Hosting step-by-step.

bash

npm install -g @angular/cli firebase-tools
ng new my-angular-app
cd my-angular-app
ng build --prod
firebase login
firebase init
# Select Hosting, choose dist/my-angular-app as public directory, configure as SPA
firebase deploy

Output

✔  Build complete.
✔  Firebase initialization complete.
✔  Deploy complete! Your app is live at https://your-project-id.web.app

Common Pitfalls

Common mistakes when deploying Angular to Firebase include:

• Not building the app before deploying, so Firebase uploads old or missing files.
• Choosing the wrong public directory during firebase init (it must match your Angular build output folder, usually dist/your-app-name).
• Forgetting to configure Firebase Hosting as a Single Page Application (SPA) by rewriting all URLs to index.html.

bash

Wrong public directory example:
firebase init
# User sets public directory to 'public' instead of 'dist/my-angular-app'

Correct public directory example:
firebase init
# User sets public directory to 'dist/my-angular-app'
# Then configures SPA rewrite to 'index.html'

Quick Reference

Summary tips for deploying Angular to Firebase:

• Always run ng build --prod before deploying.
• During firebase init, select Hosting and set the public directory to your Angular build folder.
• Enable SPA rewrite to index.html to support Angular routing.
• Use firebase deploy to publish your app.

Key Takeaways

Build your Angular app with ng build --prod before deploying.

Use firebase init to set up Firebase Hosting and select the correct public directory.

Configure Firebase Hosting as a Single Page Application to handle Angular routes.

Deploy your app with firebase deploy to make it live.

Check your Firebase project URL after deployment to verify your app is online.