How to Deploy an Angular App to Firebase Hosting

Deploying an Angular app to Firebase Hosting is a quick and efficient way to host your application. Firebase provides a free hosting service with SSL, CDN, and custom domain support. In this guide, we’ll walk through the steps to deploy an Angular app on Firebase.

Prerequisites

Before you begin, make sure you have:

• Node.js installed (Download here)
• Angular CLI installed (npm install -g @angular/cli)
• A Firebase account (Sign up here)
• Firebase CLI installed (npm install -g firebase-tools)

---

Step 1: Create and Build Your Angular App

If you haven’t already created an Angular app, you can create one with:

ng new my-angular-app
cd my-angular-app

Then, build your app for production:

ng build --configuration=production

This will generate a dist/my-angular-app/ folder containing the optimized files for deployment.

---

Step 2: Initialize Firebase in Your Project

1. Login to Firebase

Run the following command to log into Firebase:

firebase login

It will open a browser asking you to sign in with your Google account.

2. Initialize Firebase Hosting

Navigate to your Angular project folder and run:

firebase init

During the setup:

• Select “Hosting” using the spacebar.
• Choose “Use an existing project” (or create a new one if needed).
• Set the public directory to: dist/my-angular-app.
• Choose “Yes” when asked if this is a single-page app (index.html will handle navigation).
• Choose “No” for automatic builds (unless you want Firebase integration with GitHub for CI/CD).

After completing these steps, a firebase.json file will be created in your project folder.

---

Step 3: Deploy to Firebase Hosting

Run the following command to deploy your Angular app:

firebase deploy

Once deployment is complete, Firebase will provide a live URL like:

https://your-project-id.web.app/

Open this URL in your browser to see your Angular app running on Firebase Hosting!

---

Troubleshooting

Seeing the Default Firebase Welcome Page?

If you see the Firebase default welcome page instead of your app:

1. Open the firebase.json file and make sure the public field is set to:

   {
     "hosting": {
       "public": "dist/my-angular-app",
       "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
       "rewrites": [{ "source": "**", "destination": "/index.html" }]
     }
   }
   

2. Run ng build --configuration=production again to ensure your build files are updated.
3. Deploy again using firebase deploy.

---

Congratulations! 🎉 You’ve successfully deployed your Angular app to Firebase Hosting. Your app is now accessible online with SSL and a global CDN. You can further enhance your deployment by adding a custom domain or integrating Firebase functions.

Let me know if you need any additional help! 🚀