Deploying Angular18 to Firebase Hosting

How to deploy your Angular 18 to Firebase Hosting

Using the firebase spark plan, it is free for you to use firebase hosting to deploy your web apps on the fly. In this article i will teach you how to deploy your AngularApp to Firebase Hosting

Creating new Angular Project

Let's create a new Angular Project. To create a new Angular app use the Angular cli command

ng new FirebaseHostingDemo

Open your project in Visual Studio Code

Creating Firebase Project and Firebase WebApp

Go to https://console.firebase.google.com/ . Create new Firebase Project

Disabled Google Analytics, in this blog we will not use Google Analytics.

Wait for it to finish

Next, we need to create a new web app in Firebase. Click the highlighted icon to create web app

Enter your web app nickname, could be anything you want. In this example we called it "FirebaseHostingDemo"

Tick the checkbox "Also set up Firebase Hosting" and click "Register app"

Go back to your AngularApp install firebase using npm

npm install firebase 

Initialize Firebase in your Angular App

Go back to console.firebase.com website setup. Copy the configuration to your AngularApp

In Visual Studio Code Angular App, open app.component.ts

Paste the configuration from console.firebase.com to app.component.ts

Install Firebase Tools

Go back to your vs code terminal and install

npm install -g firebase-tools

In VS Code Terminal, login your firebase account, to login simply write the command below

firebase login

Initialize Firebase to your AngularApp

Run the firebase init command to initialize firebase in your angular app

firebase init

Are you ready to proceed ? Y

Which Firebase features do you want to set up? ....

Project Setup > Use an existing Project

List of your projects will be displayed. Select your project "fir-hostingdemo-...." you want to use. In my case here is my project name

Do you want to use public directory? write "public"

Configure as SPA / single page app? Y
Setup automatic builds? N

Congratulations, Now your firebase initialization has been configured

In your AngularApp folder you should see firebase.json and .firebasessrc files created

Go back to firebase.console.com Copy the site value and public and paste it to your firebase.json

change the "public" to "public/browser" too.

Go to angular.json change the outputPath from "dist/,,," to

to public

Now run ng build, to create build files

ng build

After the build, you will see the public folder will have "browser" folders and "server".
These are the build files we will deploy to firebase hosting

Deploying AngularApp to Firebase Hosting

Let's go to Firebase Hosting . To go click "Build" > Hosting

As you can see below you have two hosting environment.

To view your website you can view the domain and preview

By default this what your website should looks like this. if you have not done any deployment / release yet.

Now we will deploy our AngularApp to firebase hosting

Finally we have sucessfully deployed our AngularApp to Firebase Hosting

If you want to change the deployment hosting target of your release you can simply change the
firebase.json file and change the site property to whatever site you want to deploy

In my firebase project i can deploy to this two hosting environment

Thank you for reading my article. Please react or comment if you have any issues.