How to Set Up an Angular Application on Firebase

Angular is a powerful front-end framework designed for creating scalable, high-performance web applications. With its component-based architecture and features like dependency injection, it simplifies the process of building complex interfaces for web, mobile, and desktop.

In this guide, we’ll walk through the process of setting up an Angular application and deploying it to Firebase Hosting in just a few minutes.

Step 1: Getting Started with Angular CLI

The Angular CLI is the official tool for initializing, developing, and maintaining Angular apps. To get started, install it globally via npm:

npm install -g @angular/cli

Once installed, create a new project:

ng new demoFirebaseApp

To test your app locally, navigate into the project folder and start the development server:

cd demoFirebaseApp
ng serve

Step 2: Setting Up Firebase

Firebase is an excellent choice for hosting Angular apps because it is incredibly fast to set up and offers a generous free tier for developers.

1. Create an Account: Go to the Firebase Console.
2. Add Project: Click “Add Project” and give it a name (e.g., “Demo Firebase App”).
3. Project ID: Note your project ID; your app will be hosted at your-project-id.firebaseapp.com.

Step 3: Installing Firebase Tools

To interact with Firebase from your terminal, you need the Firebase Tools CLI. Install it using npm:

npm install -g firebase-tools

Next, log in to your Google account:

firebase login

Step 4: Initializing Firebase in Your Project

Navigate to your Angular project root and run the initialization command:

firebase init

During the setup, choose the following options:

• Feature: Select Hosting.
• Project: Select the project you created in Step 2.
• Public Directory: Set this to dist. (Angular builds your app into this folder).
• Single Page App: Select Yes (this ensures all URLs redirect to index.html).

Firebase will generate firebase.json and .firebaserc files in your directory.

Step 5: Building and Deploying

Before deploying, you must create a production-ready build. Using the --prod flag is crucial as it minifies your code and optimizes performance, often reducing file sizes by over 80%.

ng build --prod

Now, deploy your app to the cloud:

firebase deploy

If everything goes okay, you should see something like this:

• === Deploying to ‘demoangularapplication’… 
• deploying hosting…
• hosting: preparing dist directory for upload… 
• hosting: 8 files uploaded successfully…
• Deploy complete!

Project Console: https://console.firebase.google.com/project/demoangularapplication/overview

Hosting URL: https://demoangularapplication.firebaseapp.com

Pro Tip: Automate your workflow by adding a deploy script to your package.json:

"scripts": {
  "deploy": "ng build --prod && firebase deploy"
}

Now, you can simply run npm run deploy to build and push updates in one go.