DEV Community

Cover image for Deploying Angular18 to Firebase Hosting
Jp Lazaro
Jp Lazaro

Posted on

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


Enter fullscreen mode Exit fullscreen mode

Image description

Open your project in Visual Studio Code
Image description

Creating Firebase Project and Firebase WebApp

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

Image description

Image description

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

Image description

Wait for it to finish

Image description

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

Image description

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"

Image description

Go back to your AngularApp install firebase using npm



npm install firebase 


Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Initialize Firebase in your Angular App

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

Image description

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

Image description

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

Image description

Install Firebase Tools

Go back to your vs code terminal and install



npm install -g firebase-tools


Enter fullscreen mode Exit fullscreen mode

Image description

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



firebase login


Enter fullscreen mode Exit fullscreen mode

Image description

Initialize Firebase to your AngularApp

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



firebase init


Enter fullscreen mode Exit fullscreen mode

Are you ready to proceed ? Y

Image description

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

Image description

Project Setup > Use an existing Project

Image description

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

Image description

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

Image description

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

Congratulations, Now your firebase initialization has been configured
Image description

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

Image description

Image description

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

Image description

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

Image description

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

to public
Image description

Now run ng build, to create build files



ng build


Enter fullscreen mode Exit fullscreen mode

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
Image description

Deploying AngularApp to Firebase Hosting

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

Image description

As you can see below you have two hosting environment.
Image description

To view your website you can view the domain and preview
Image description

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

Now we will deploy our AngularApp to firebase hosting

Image description

Finally we have sucessfully deployed our AngularApp to Firebase Hosting

Image description

Image description

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

Image description

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

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

Top comments (1)

Collapse
 
ryanninodizon profile image
Ryan Niño Dizon

Nice. Keep writing like this.