Angular 18 + 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 in 10 easy steps.

Creating new Angular Project

1. Create new Angular app -  ng new FirebaseHostingDemo

1.1 Open your project in Visual Studio Code

Create Firebase Project and WebApp

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

2.1 Disabled Google Analytics

2.2 Wait for it to finish 

2.3 Click this icon , to create web app

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

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

2.6 Go back to your AngularApp install firebase using npm

npm install firebase 

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

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

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

 

4.  Go back to your vs code terminal and install "npm install -g firebase-tools"

 

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

Initialize Firebase to your AngularApp

6. Run the firebase init  

firebase init

Are you ready to proceed ? Y

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

Project Setup > Use an existing Project

Select your project "fir-hostingdemo-...."

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

Configure as SPA / single page app? Y 

Congratulations, Now your firebase initialization has been configured

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

  

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

 file .

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

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

to public

9. Now run ng build, to create build files 

9.2 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

10. 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

 

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